style: error boundary for demo page

asmyshlyaev177 · Nov 13, 2024 · ad4647b · ad4647b
1 parent 969e30a
commit ad4647b
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 21 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/example-nextjs14/package.json b/packages/example-nextjs14/package.json
@@ -18,6 +18,7 @@
     "next": "^14.2.16",
     "react": "^18",
     "react-dom": "^18",
+    "react-error-boundary": "^4.1.2",
     "react-share": "^5.1.0",
     "schema-dts": "^1.1.2",
     "shiki": "^1.12.1"

diff --git a/packages/example-nextjs14/src/app/DemoPart.tsx b/packages/example-nextjs14/src/app/DemoPart.tsx
@@ -1,6 +1,7 @@
 'use client'
 import React from 'react';
 import { usePathname } from 'next/navigation';
+import { ErrorBoundary, type FallbackProps } from "react-error-boundary";
 
 import { GithubLink } from './components/GithubLink';
 import { UrlBox } from './components/UrlBox';
@@ -39,15 +40,31 @@ export function DemoPart({ searchParams }: { searchParams: object }) {
 
         <section className="form-components">
           <React.Suspense>
-            <Form className="form" searchParams={searchParams} ghLink={urls.form} />
-            <Status className="status" sp={searchParams} ghLink={urls.status} />
+            <ErrorBoundary fallbackRender={fallbackRender}>
+              <Form className="form" searchParams={searchParams} ghLink={urls.form} />
+            </ErrorBoundary>
+            <ErrorBoundary
+              fallbackRender={fallbackRender}>
+              <Status className="status" sp={searchParams} ghLink={urls.status} />
+            </ErrorBoundary>
+
           </React.Suspense>
         </section>
       </section>
     </>
   );
 }
 
+function fallbackRender({ error, resetErrorBoundary }: FallbackProps) {
+  return (
+    <div role="alert" className='max-w-[30%] flex flex-col items-center gap-4'>
+      <p>Something went wrong:</p>
+      <pre className='whitespace-break-spaces text-red-500 max-h-[350px]'>{error.message || error}</pre>
+      <button onClick={resetErrorBoundary} className='p-4 bg-gray-300 rounded-md'>Try again</button>
+    </div>
+  );
+}
+
 const sourceUrls = {
   next: {
     form: 'https://github.com/asmyshlyaev177/state-in-url/blob/master/packages/example-nextjs14/src/app/Form.tsx',