From f9aa73f3258e7c36014389420313f096481fc9f5 Mon Sep 17 00:00:00 2001
From: Eunbi Kang <jenabill@naver.com>
Date: Wed, 27 Nov 2024 17:20:02 +0900
Subject: [PATCH] fix(fe): handle contest problems api error using error
 boundary (#2243)

fix(fe): add error boundary
---
 .../(main)/contest/[contestId]/@tabs/page.tsx        | 10 ++++++----
 apps/frontend/package.json                           |  1 +
 pnpm-lock.yaml                                       | 12 ++++++++++++
 3 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/apps/frontend/app/(client)/(main)/contest/[contestId]/@tabs/page.tsx b/apps/frontend/app/(client)/(main)/contest/[contestId]/@tabs/page.tsx
index cf5b13bde..9f1181e29 100644
--- a/apps/frontend/app/(client)/(main)/contest/[contestId]/@tabs/page.tsx
+++ b/apps/frontend/app/(client)/(main)/contest/[contestId]/@tabs/page.tsx
@@ -1,6 +1,7 @@
 import KatexContent from '@/components/KatexContent'
 import { auth } from '@/libs/auth'
 import { fetcherWithAuth } from '@/libs/utils'
+import { ErrorBoundary } from '@suspensive/react'
 import { Suspense } from 'react'
 import {
   GoToFirstProblemButton,
@@ -49,10 +50,11 @@ export default async function ContestTop({ params }: ContestTopProps) {
       {session && state !== 'Finished' && (
         <div className="mt-10 flex justify-center">
           {data.isRegistered ? (
-            // TODO: add error boundary
-            <Suspense fallback={<GoToFirstProblemButtonFallback />}>
-              <GoToFirstProblemButton contestId={Number(contestId)} />
-            </Suspense>
+            <ErrorBoundary fallback={null}>
+              <Suspense fallback={<GoToFirstProblemButtonFallback />}>
+                <GoToFirstProblemButton contestId={Number(contestId)} />
+              </Suspense>
+            </ErrorBoundary>
           ) : (
             <RegisterButton
               id={contestId}
diff --git a/apps/frontend/package.json b/apps/frontend/package.json
index 42ecee58b..808b49462 100644
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -42,6 +42,7 @@
     "@radix-ui/react-toggle": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.3",
     "@sentry/nextjs": "^8.38.0",
+    "@suspensive/react": "^2.18.7",
     "@tailwindcss/typography": "^0.5.15",
     "@tanstack/react-query": "^5.59.20",
     "@tanstack/react-table": "^8.20.5",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3a737cba3..dc8baf2f2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -447,6 +447,9 @@ importers:
       '@sentry/nextjs':
         specifier: ^8.38.0
         version: 8.38.0(@opentelemetry/core@1.27.0(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.54.1(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@1.27.0(@opentelemetry/api@1.9.0))(next@14.2.17(@babel/core@7.26.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.48.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)(webpack@5.96.1(@swc/core@1.9.2(@swc/helpers@0.5.13)))
+      '@suspensive/react':
+        specifier: ^2.18.7
+        version: 2.18.7(react@18.3.1)
       '@tailwindcss/typography':
         specifier: ^0.5.15
         version: 0.5.15(tailwindcss@3.4.14(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.13))(@types/node@20.17.6)(typescript@5.6.3)))
@@ -4224,6 +4227,11 @@ packages:
     engines: {node: '>=8.10'}
     hasBin: true
 
+  '@suspensive/react@2.18.7':
+    resolution: {integrity: sha512-phPb6ZM08Koz/dW74Xnk7c6WK43Vz3ftTV/26BIQW7aUXfRHqAZe7dTqvFnkeDbj3jWZ+XcTi6IT3xGYKaTPqA==}
+    peerDependencies:
+      react: ^18
+
   '@swc-node/core@1.13.3':
     resolution: {integrity: sha512-OGsvXIid2Go21kiNqeTIn79jcaX4l0G93X2rAnas4LFoDyA9wAwVK7xZdm+QsKoMn5Mus2yFLCc4OtX2dD/PWA==}
     engines: {node: '>= 10'}
@@ -15544,6 +15552,10 @@ snapshots:
       ignore: 5.3.2
       p-map: 4.0.0
 
+  '@suspensive/react@2.18.7(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+
   '@swc-node/core@1.13.3(@swc/core@1.9.2(@swc/helpers@0.5.13))(@swc/types@0.1.15)':
     dependencies:
       '@swc/core': 1.9.2(@swc/helpers@0.5.13)