From 1f878f7483226174fc8714f084b5fb3673167d13 Mon Sep 17 00:00:00 2001
From: Kwon Seo Jin <97675977+B0XERCAT@users.noreply.github.com>
Date: Thu, 28 Nov 2024 20:34:51 +0900
Subject: [PATCH] feat(fe): apply error boundary for main directory (#2241)
* feat(fe): install suspensive, implement ErrorFallback component, apply ErrorBoundary to home page
* chore(fe): fix pnpm-lock.yaml
* feat(fe): add retry button in FetchErrorFallback
* feat(fe): apply ErrorBoundary
* chore(fe): remove console logging
* chore(fe): specify importing type ErrorBoundaryFallbackProps
* chore(fe): narrow the scope of ErrorBoundary in contest page
---
.../app/(client)/(main)/contest/page.tsx | 53 ++++---
.../app/(client)/(main)/notice/page.tsx | 51 ++++---
apps/frontend/app/(client)/(main)/page.tsx | 11 +-
.../components/FetchErrorFallback.tsx | 37 +++++
pnpm-lock.yaml | 141 +++++++++++-------
5 files changed, 196 insertions(+), 97 deletions(-)
create mode 100644 apps/frontend/components/FetchErrorFallback.tsx
diff --git a/apps/frontend/app/(client)/(main)/contest/page.tsx b/apps/frontend/app/(client)/(main)/contest/page.tsx
index 1811a381f8..a01ea8d71b 100644
--- a/apps/frontend/app/(client)/(main)/contest/page.tsx
+++ b/apps/frontend/app/(client)/(main)/contest/page.tsx
@@ -1,6 +1,8 @@
+import FetchErrorFallback from '@/components/FetchErrorFallback'
import { Separator } from '@/components/shadcn/separator'
import { Skeleton } from '@/components/shadcn/skeleton'
import { auth } from '@/libs/auth'
+import { ErrorBoundary } from '@suspensive/react'
import { redirect } from 'next/navigation'
import { Suspense } from 'react'
import SearchBar from '../_components/SearchBar'
@@ -64,25 +66,30 @@ export default async function Contest({ searchParams }: ContestProps) {
return (
<>
- }>
-
-
- }>
-
-
+
+ }>
+
+
+
+
+ }>
+
+
+
List of Contests
+
}>
{session ? (
@@ -92,14 +99,16 @@ export default async function Contest({ searchParams }: ContestProps) {
)}
-
-
-
- {session && registered ? (
-
- ) : (
-
- )}
+
+
+
+
+ {session && registered ? (
+
+ ) : (
+
+ )}
+
diff --git a/apps/frontend/app/(client)/(main)/notice/page.tsx b/apps/frontend/app/(client)/(main)/notice/page.tsx
index 2d6c8dcf63..f752ec2457 100644
--- a/apps/frontend/app/(client)/(main)/notice/page.tsx
+++ b/apps/frontend/app/(client)/(main)/notice/page.tsx
@@ -1,5 +1,7 @@
+import FetchErrorFallback from '@/components/FetchErrorFallback'
import { Skeleton } from '@/components/shadcn/skeleton'
import type { Notice } from '@/types/type'
+import { ErrorBoundary } from '@suspensive/react'
import { Suspense } from 'react'
import SearchBar from '../_components/SearchBar'
import NoticeTable from './_components/NoticeTable'
@@ -16,28 +18,33 @@ export default function Notice({ searchParams }: NoticeProps) {
-
-
-
-
-
-
-
-
-
-
-
-
- {[...Array(5)].map((_, i) => (
-
- ))}
-
- }
- >
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {[...Array(5)].map((_, i) => (
+
+ ))}
+
+ }
+ >
+
+
+
)
}
diff --git a/apps/frontend/app/(client)/(main)/page.tsx b/apps/frontend/app/(client)/(main)/page.tsx
index 2311fe33a2..7a08a929ac 100644
--- a/apps/frontend/app/(client)/(main)/page.tsx
+++ b/apps/frontend/app/(client)/(main)/page.tsx
@@ -1,4 +1,6 @@
+import FetchErrorFallback from '@/components/FetchErrorFallback'
import { Button } from '@/components/shadcn/button'
+import { ErrorBoundary } from '@suspensive/react'
import Link from 'next/link'
import Carousel from './_components/Carousel'
import ContestCards from './_components/ContestCards'
@@ -67,7 +69,9 @@ export default function Home() {
-
+
+
+
@@ -79,8 +83,9 @@ export default function Home() {
- {/**TODO: add error boundary */}
-
+
+
+
)
diff --git a/apps/frontend/components/FetchErrorFallback.tsx b/apps/frontend/components/FetchErrorFallback.tsx
new file mode 100644
index 0000000000..ffd7eca5d3
--- /dev/null
+++ b/apps/frontend/components/FetchErrorFallback.tsx
@@ -0,0 +1,37 @@
+'use client'
+
+import type { ErrorBoundaryFallbackProps } from '@suspensive/react'
+import { useRouter } from 'next/navigation'
+import { startTransition, useState } from 'react'
+import { RiAlertFill } from 'react-icons/ri'
+import { Button } from './shadcn/button'
+
+export default function FetchErrorFallback({
+ reset
+}: ErrorBoundaryFallbackProps) {
+ const router = useRouter()
+ const [isResetting, setIsResetting] = useState(false)
+
+ const handleRetry = () => {
+ setIsResetting(true)
+
+ startTransition(() => {
+ router.refresh()
+ reset()
+ setIsResetting(false)
+ })
+ }
+ return (
+
+
+
Failed to load data
+
+