Feature : Sentry 설정 (#604)

* feat: sentry 초기 세팅

* refactor : 주석 제거

* refactor : 모듈 재설치

* feat : Suspense + ErrorBoundary 컴포넌트 구현

* feat : react-error-boundary 설치

* refactor : RejectedFallback 컴포넌트 제거

* feat : 기존 Suspense를 LocalApiAsyncBoundary로 교체

* refactor : 기존 LocalApiAsyncBoundary에서 LocalErrorSuspenseBoundary로 네이밍 수정

* refactor : error.js 제거

* fix : error.message제거

* fix: 커스텀 ErrorBoundary 내 useEffect, useCallback 훅 제거

* feat : @sentry/utils 버전업

* feat : Suspense에서 LocalErrorSuspenseBoundary로 교체

* refactor : LocalErrorSuspenseBoundary에서 LocalSuspenseErrorBoundary로 네이밍 수정

* feat : Footer Lazy Loading

* fix : return문 제거

* feat : yarn 업데이트

.gitignore

@@ -24,3 +24,5 @@ coverage
 .sentryclirc
 
 .idea/*
+# Sentry Config File
+.sentryclirc

package.json

@@ -19,8 +19,8 @@
  "@plaiceholder/next": "^3.0.0",
  "@react-google-maps/api": "^2.19.2",
  "@sentry/cli": "^2.20.4",
- "@sentry/nextjs": "^7.62.0",
- "@sentry/utils": "^7.62.0",
+ "@sentry/nextjs": "^7.93.0",
+ "@sentry/utils": "^7.98.0",
  "@tanstack/react-query": "^5.17.15",
  "@tanstack/react-query-devtools": "^5.17.18",
  "accept-language": "^3.0.18",
@@ -41,6 +41,7 @@
  "react": "18.2.0",
  "react-datepicker": "^4.15.0",
  "react-dom": "18.2.0",
+ "react-error-boundary": "^4.0.12",
  "react-hook-form": "^7.45.0",
  "react-i18next": "^13.2.2",
  "react-intersection-observer": "^9.5.2",

src/app/[lng]/(main)/community/[articleId]/page.tsx

@@ -1,9 +1,10 @@
 import { Keys, getCommunityArticleDetail } from '@/apis/community';
 import ArticleDetail from '@/app/[lng]/(main)/community/[articleId]/components/ArticleDetail';
 import ArticleDetailHeader from '@/app/[lng]/(main)/community/[articleId]/components/ArticleDetailHeader';
-import { Loading } from '@/components/Loading';
+import CommentForm from '@/app/[lng]/(main)/community/[articleId]/components/CommentForm';
+import { LocalSuspenseErrorBoundary } from '@/components/ErrorBoundary';
 import { HydrationProvider } from '@/components/Provider';
-import { Suspense } from 'react';
+import { Spacing } from '@/components/Spacing';
 
 interface CommunityArticlePageProps {
  params: {
@@ -15,14 +16,19 @@ export default function CommunityArticlePage({ params }: CommunityArticlePagePro
  const articleId = Number(params.articleId);
 
  return (
- <Suspense fallback={<Loading className="h-[calc(100dvh-48px)]" />}>
- <HydrationProvider
- queryFn={() => getCommunityArticleDetail(articleId)}
- queryKey={Keys.getCommunityArticleDetail(articleId)}
- >
- <ArticleDetailHeader />
- <ArticleDetail articleId={articleId} />
- </HydrationProvider>
- </Suspense>
+ <>
+ <LocalSuspenseErrorBoundary>
+ <HydrationProvider
+ queryFn={() => getCommunityArticleDetail(articleId)}
+ queryKey={Keys.getCommunityArticleDetail(articleId)}
+ >
+ <ArticleDetailHeader />
+ <ArticleDetail articleId={articleId} />
+ </HydrationProvider>
+ </LocalSuspenseErrorBoundary>
+ <Spacing size={100} />
+ <CommentForm />
+ <Spacing size={60} />
+ </>
  );
 }

src/app/[lng]/(main)/community/page.tsx

@@ -1,11 +1,10 @@
 import CommunityHeader from './components/CommunityHeader';
 import ContentSection from './components/ContentSection.client';
 import { Keys, getCommunityArticles } from '@/apis/community';
-import { Loading } from '@/components/Loading';
+import { LocalSuspenseErrorBoundary } from '@/components/ErrorBoundary';
 import { HydrationProvider } from '@/components/Provider';
 import { Spacing } from '@/components/Spacing';
 import dynamic from 'next/dynamic';
-import { Suspense } from 'react';
 
 const Footer = dynamic(() => import('@/components/Footer/Footer'), { ssr: false });
 interface CommunityPageProps {
@@ -18,7 +17,7 @@ export default function CommunityPage({ params: { lng } }: CommunityPageProps) {
  return (
  <>
  <CommunityHeader lng={lng} />
- <Suspense fallback={<Loading />}>
+ <LocalSuspenseErrorBoundary>
  <HydrationProvider
  queryMultipleFn={[
  () => getCommunityArticles({ categoryId: 0, pageParam: 0 }),
@@ -36,7 +35,7 @@ export default function CommunityPage({ params: { lng } }: CommunityPageProps) {
  >
  <ContentSection />
  </HydrationProvider>
- </Suspense>
+ </LocalSuspenseErrorBoundary>
  <Spacing size={60} />
  <Footer page="community" lng={lng} />
  </>

src/app/[lng]/(main)/grouping/[groupId]/articles/[articleId]/page.tsx

@@ -2,6 +2,7 @@ import ArticleDetail from './components/ArticleDetail.client';
 import ArticleHeader from './components/ArticleHeader.client';
 import CommentForm from './components/CommentForm';
 import { Keys, getArticle } from '@/apis/groups';
+import { LocalSuspenseErrorBoundary } from '@/components/ErrorBoundary';
 import { Loading } from '@/components/Loading';
 import { HydrationProvider } from '@/components/Provider';
 import { Spacing } from '@/components/Spacing';
@@ -21,14 +22,14 @@ export default function ArticlePage({ params }: ArticleDetailPageProps) {
  return (
  <>
  <ArticleHeader />
- <Suspense fallback={<Loading className="h-[calc(100dvh-250px)]" />}>
+ <LocalSuspenseErrorBoundary>
  <HydrationProvider
  queryFn={() => getArticle(groupId, articleId)}
  queryKey={Keys.getArticle(groupId, articleId)}
  >
  <ArticleDetail />
  </HydrationProvider>
- </Suspense>
+ </LocalSuspenseErrorBoundary>
  <Spacing size={100} />
  <CommentForm />
  <Spacing size={60} />

src/app/[lng]/(main)/grouping/[groupId]/manage/page.tsx

@@ -1,9 +1,8 @@
 import ManageDetail from './components/ManageDetail.client';
 import ManageHeader from './components/ManageHeader.client';
 import { Keys, getApplies } from '@/apis/groups';
-import { Loading } from '@/components/Loading';
+import { LocalSuspenseErrorBoundary } from '@/components/ErrorBoundary';
 import { HydrationProvider } from '@/components/Provider';
-import { Suspense } from 'react';
 
 interface GroupingManagePageProps {
  params: {
@@ -17,11 +16,11 @@ export default function GroupingManagePage({ params }: GroupingManagePageProps)
  return (
  <>
  <ManageHeader />
- <Suspense fallback={<Loading />}>
+ <LocalSuspenseErrorBoundary>
  <HydrationProvider queryFn={() => getApplies(groupId)} queryKey={Keys.getApplies(groupId)}>
  <ManageDetail />
  </HydrationProvider>
- </Suspense>
+ </LocalSuspenseErrorBoundary>
  </>
  );
 }

src/app/[lng]/(main)/grouping/[groupId]/members/page.tsx

@@ -1,9 +1,8 @@
 import MemeberList from './components/MemberList.client';
 import MembersHeader from './components/MembersHeader.client';
 import { Keys, getGroupMembers } from '@/apis/groups';
-import { Loading } from '@/components/Loading';
+import { LocalSuspenseErrorBoundary } from '@/components/ErrorBoundary';
 import { HydrationProvider } from '@/components/Provider';
-import { Suspense } from 'react';
 
 interface GroupingMembersPageProps {
  params: {
@@ -17,14 +16,14 @@ export default function GroupingMembersPage({ params }: GroupingMembersPageProps
  return (
  <>
  <MembersHeader />
- <Suspense fallback={<Loading />}>
+ <LocalSuspenseErrorBoundary>
  <HydrationProvider
  queryFn={() => getGroupMembers(groupId)}
  queryKey={Keys.getGroupMembers(groupId)}
  >
  <MemeberList />
  </HydrationProvider>
- </Suspense>
+ </LocalSuspenseErrorBoundary>
  </>
  );
 }

src/app/[lng]/(main)/grouping/[groupId]/page.tsx

@@ -1,10 +1,8 @@
 import GroupDetailPage from './components/GroupDetail.client';
 import GroupDetailHeader from './components/GroupDetailHeader.client';
 import { Keys, getGroupDetail, getGroupMembers, getNotices } from '@/apis/groups';
-import { RejectedFallback } from '@/components/ErrorBoundary';
-import { Loading } from '@/components/Loading';
+import { LocalSuspenseErrorBoundary } from '@/components/ErrorBoundary';
 import { HydrationProvider } from '@/components/Provider';
-import { Suspense } from 'react';
 
 interface GroupingDetailPageProps {
  params: {
@@ -18,7 +16,7 @@ export default function GroupingDetailPage({ params }: GroupingDetailPageProps)
  return (
  <>
  <GroupDetailHeader />
- <Suspense fallback={<Loading className="h-[calc(100dvh-48px)]" />}>
+ <LocalSuspenseErrorBoundary>
  <HydrationProvider
  queryMultipleFn={[
  () => getGroupDetail(groupId),
@@ -33,7 +31,7 @@ export default function GroupingDetailPage({ params }: GroupingDetailPageProps)
  >
  <GroupDetailPage />
  </HydrationProvider>
- </Suspense>
+ </LocalSuspenseErrorBoundary>
  </>
  );
 }

src/app/[lng]/(main)/grouping/[groupId]/write/page.tsx

@@ -1,9 +1,8 @@
 import InputForm from './components/InputForm.client';
 import WriteHeader from './components/WriteHeader.client';
 import { Keys, getGroupDetail } from '@/apis/groups';
-import { Loading } from '@/components/Loading';
+import { LocalSuspenseErrorBoundary } from '@/components/ErrorBoundary';
 import { HydrationProvider } from '@/components/Provider';
-import { Suspense } from 'react';
 
 interface WritePageProps {
  params: {
@@ -17,14 +16,14 @@ export default function WritePage({ params }: WritePageProps) {
  return (
  <div className="flex h-full flex-col">
  <WriteHeader />
- <Suspense fallback={<Loading />}>
+ <LocalSuspenseErrorBoundary>
  <HydrationProvider
  queryFn={() => getGroupDetail(groupId)}
  queryKey={Keys.getGroupDetail(groupId)}
  >
  <InputForm />
  </HydrationProvider>
- </Suspense>
+ </LocalSuspenseErrorBoundary>
  </div>
  );
 }

src/app/[lng]/(main)/grouping/page.tsx

@@ -2,11 +2,10 @@ import CreateGroupButton from './components/CreateGroupButton.client';
 import GroupingCardList from './components/GroupingCardList.client';
 import GroupingHeader from './components/GroupingHeader';
 import { Keys, getGroups } from '@/apis/groups';
-import { Loading } from '@/components/Loading';
+import { LocalSuspenseErrorBoundary } from '@/components/ErrorBoundary';
 import { HydrationProvider } from '@/components/Provider';
 import { Spacing } from '@/components/Spacing';
 import dynamic from 'next/dynamic';
-import { Suspense } from 'react';
 
 const Footer = dynamic(() => import('@/components/Footer/Footer'), { ssr: false });
 
@@ -20,11 +19,11 @@ export default function GroupingPage({ params: { lng } }: GroupingPageProps) {
  return (
  <>
  <GroupingHeader />
- <Suspense fallback={<Loading />}>
+ <LocalSuspenseErrorBoundary>
  <HydrationProvider queryFn={() => getGroups(0)} queryKey={Keys.getGroups()} isInfiniteQuery>
  <GroupingCardList />
  </HydrationProvider>
- </Suspense>
+ </LocalSuspenseErrorBoundary>
  <CreateGroupButton />
  <Spacing size={60} />
  <Footer page="grouping" lng={lng} />

src/app/[lng]/(main)/meeting/participate/feedback/[groupId]/page.tsx

@@ -1,9 +1,8 @@
 import FeedbackFunnel from './components/FeedbackFunnel.client';
 import FeedbackProvider from './components/FeedbackProvider.client';
 import { Keys, getEstimate } from '@/apis/groups';
-import { Loading } from '@/components/Loading';
+import { LocalSuspenseErrorBoundary } from '@/components/ErrorBoundary';
 import { HydrationProvider } from '@/components/Provider';
-import { Suspense } from 'react';
 
 interface PageProps {
  params: {
@@ -15,12 +14,12 @@ export default function page({ params }: PageProps) {
  const groupId = Number(params.groupId);
 
  return (
- <Suspense fallback={<Loading />}>
+ <LocalSuspenseErrorBoundary>
  <HydrationProvider queryKey={Keys.getEstimate(groupId)} queryFn={() => getEstimate(groupId)}>
  <FeedbackProvider>
  <FeedbackFunnel />
  </FeedbackProvider>
  </HydrationProvider>
- </Suspense>
+ </LocalSuspenseErrorBoundary>
  );
 }

src/app/[lng]/(main)/meeting/participate/page.tsx

@@ -8,10 +8,9 @@ import {
  getMeetingRejected,
  getMeetingWaiting,
 } from '@/apis/meeting';
-import { Loading } from '@/components/Loading';
+import { LocalSuspenseErrorBoundary } from '@/components/ErrorBoundary';
 import { HydrationProvider } from '@/components/Provider';
 import dynamic from 'next/dynamic';
-import { Suspense } from 'react';
 
 const Footer = dynamic(() => import('@/components/Footer/Footer'), { ssr: false });
 interface MeetingPageProps {
@@ -24,7 +23,7 @@ export default function MeetingPage({ params: { lng } }: MeetingPageProps) {
  return (
  <>
  <MeetingParticipateHeader />
- <Suspense fallback={<Loading />}>
+ <LocalSuspenseErrorBoundary>
  <HydrationProvider
  queryMultipleFn={[
  getMeetingParticipating,
@@ -43,7 +42,7 @@ export default function MeetingPage({ params: { lng } }: MeetingPageProps) {
  >
  <ContentSection />
  </HydrationProvider>
- </Suspense>
+ </LocalSuspenseErrorBoundary>
  <Footer page="meeting" lng={lng} />
  </>
  );

src/app/[lng]/(main)/meeting/scrap/page.tsx

@@ -1,10 +1,11 @@
 import ContentSection from './components/ContentSection.client';
 import MeetingScrapHeader from './components/MeetingScrapHeader';
 import { Keys, getMeetingScrap } from '@/apis/meeting';
-import { Footer } from '@/components/Footer';
-import { Loading } from '@/components/Loading';
+import { LocalSuspenseErrorBoundary } from '@/components/ErrorBoundary';
 import { HydrationProvider } from '@/components/Provider';
-import { Suspense } from 'react';
+import dynamic from 'next/dynamic';
+
+const Footer = dynamic(() => import('@/components/Footer/Footer'), { ssr: false });
 
 interface MeetingPageProps {
  params: {
@@ -16,11 +17,11 @@ export default function MeetingPage({ params: { lng } }: MeetingPageProps) {
  return (
  <>
  <MeetingScrapHeader />
- <Suspense fallback={<Loading />}>
+ <LocalSuspenseErrorBoundary>
  <HydrationProvider queryFn={getMeetingScrap} queryKey={Keys.getMeetingScraps()}>
  <ContentSection />
  </HydrationProvider>
- </Suspense>
+ </LocalSuspenseErrorBoundary>
  <Footer page="meeting" lng={lng} />
  </>
  );

src/app/[lng]/(main)/profile/[userId]/page.tsx

@@ -1,9 +1,8 @@
 import ProfileByIdDetail from './components/ProfileByIdDetail.client';
 import ProfileByIdHeader from './components/ProfileByIdHeader';
 import { Keys, getProfileById } from '@/apis/profile';
-import { Loading } from '@/components/Loading';
+import { LocalSuspenseErrorBoundary } from '@/components/ErrorBoundary';
 import { HydrationProvider } from '@/components/Provider';
-import { Suspense } from 'react';
 
 interface PageProps {
  params: {
@@ -15,14 +14,14 @@ export default function page({ params }: PageProps) {
  const userId = Number(params.userId);
 
  return (
- <Suspense fallback={<Loading />}>
+ <LocalSuspenseErrorBoundary>
  <HydrationProvider
  queryFn={() => getProfileById(userId)}
  queryKey={Keys.getProfileById(userId)}
  >
  <ProfileByIdHeader />
  <ProfileByIdDetail />
  </HydrationProvider>
- </Suspense>
+ </LocalSuspenseErrorBoundary>
  );
 }