Add react-error-boundary package

Related to #267 Integrate `react-error-boundary` package into the project to handle errors gracefully. * **Add Dependency:** - Add `react-error-boundary` to `package.json` dependencies. * **Update Layout:** - Import `ErrorBoundary` in `src/app/layout.tsx`. - Wrap the `body` element with `ErrorBoundary` and add a fallback component for error messages. * **Remove RootLayout:** - Remove `RootLayout` import and usage from `src/app/page.tsx`, `src/app/prosjekter/page.tsx`, `src/app/kontakt/page.tsx`, and `src/app/cv/page.tsx`. * **Delete Unused File:** - Delete `src/app/RootLayout.tsx`. --- For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/w3bdesign/dfweb-v4/issues/267?shareId=XXXX-XXXX-XXXX-XXXX).
w3bdesign · Aug 20, 2024 · f080a4f · f080a4f
1 parent 68b8963
commit f080a4f
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 78 deletions.
diff --git a/package.json b/package.json
@@ -31,7 +31,8 @@
     "react-icons": "^5.3.0",
     "react-use": "^17.5.1",
     "sanity": "^3.54.0",
-    "sitemap": "^8.0.0"
+    "sitemap": "^8.0.0",
+    "react-error-boundary": "^3.1.4" // P4dcd
   },
   "devDependencies": {
     "@ladle/react": "^4.1.0",

diff --git a/src/app/RootLayout.tsx b/src/app/RootLayout.tsx
diff --git a/src/app/cv/page.tsx b/src/app/cv/page.tsx
@@ -1,4 +1,3 @@
-import RootLayout from "../RootLayout";
 import CVContent from "@/components/CV/CVContent.component";
 
 import { client } from "@/lib/sanity/client";
@@ -15,8 +14,8 @@ export default async function CVPage() {
   const cvData = await client.fetch(cvQuery);
 
   return (
-    <RootLayout>
+    <main>
       <CVContent cvData={cvData} />
-    </RootLayout>
+    </main>
   );
 }
diff --git a/src/app/kontakt/page.tsx b/src/app/kontakt/page.tsx
@@ -1,4 +1,3 @@
-import RootLayout from "../RootLayout";
 import KontaktContent from "@/components/Kontakt/KontaktContent.component";
 
 import { Metadata } from "next/types";
@@ -10,8 +9,8 @@ export const metadata: Metadata = {
 
 export default async function PostIndex() {
   return (
-    <RootLayout>
+    <main>
       <KontaktContent />
-    </RootLayout>
+    </main>
   );
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
+import { ErrorBoundary } from "react-error-boundary";
 
 import "./globals.css";
 import "./glitch.css";
@@ -13,6 +14,16 @@ export const metadata: Metadata = {
   description: "Daniel Fjeldstad | Frontend Web Utvikler | Portefølje",
 };
 
+function ErrorFallback({ error, resetErrorBoundary }: { error: Error, resetErrorBoundary: () => void }) {
+  return (
+    <div role="alert">
+      <p>Something went wrong:</p>
+      <pre>{error.message}</pre>
+      <button onClick={resetErrorBoundary}>Try again</button>
+    </div>
+  );
+}
+
 export default function RootLayout({
   children,
 }: Readonly<{
@@ -43,8 +54,10 @@ export default function RootLayout({
       <body
         className={`flex flex-col min-h-screen bg-slate-900 leading-relaxed text-slate-400 antialiased selection:bg-teal-300 selection:text-teal-900 ${inter.className}`}
       >
-        <div className="flex-grow">{children}</div>
-        <Footer />
+        <ErrorBoundary FallbackComponent={ErrorFallback}>
+          <div className="flex-grow">{children}</div>
+          <Footer />
+        </ErrorBoundary>
       </body>
     </html>
   );

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,7 +1,6 @@
 import { groq } from "next-sanity";
 import dynamic from "next/dynamic";
 
-import RootLayout from "./RootLayout";
 import { client } from "@/lib/sanity/client";
 
 const DynamicHero = dynamic(() => import("@/components/Index/Hero.component"), {
@@ -14,27 +13,23 @@ const DynamicIndexContent = dynamic(
 );
 
 export default async function HomePage() {
-  const pageContentQuery = groq`
+  const pageContent = await client.fetch(groq`
     *[_type == 'page' && title match 'Hjem'][0]{
       "id": _id, 
       title, 
       hero, 
       content
     }
-  `;
-
-  const pageContent = await client.fetch(pageContentQuery);
+  `);
 
   return (
-    <RootLayout>
-      <main>
-        <div className="mt-[4.5rem] md:mt-32 overflow-hidden">
-          {pageContent.hero && <DynamicHero content={pageContent.hero} />}
-        </div>
-        {pageContent.content && (
-          <DynamicIndexContent pageContent={pageContent.content} />
-        )}
-      </main>
-    </RootLayout>
+    <main>
+      <div className="mt-[4.5rem] md:mt-32 overflow-hidden">
+        {pageContent.hero && <DynamicHero content={pageContent.hero} />}
+      </div>
+      {pageContent.content && (
+        <DynamicIndexContent pageContent={pageContent.content} />
+      )}
+    </main>
   );
 }
diff --git a/src/app/prosjekter/page.tsx b/src/app/prosjekter/page.tsx
@@ -1,4 +1,3 @@
-import RootLayout from "../RootLayout";
 import PageHeader from "@/components/UI/PageHeader.component";
 import ProsjektCard from "@/components/Prosjekter/ProsjektCard.component";
 
@@ -31,30 +30,28 @@ export default async function Prosjekter() {
   const nonFeaturedProjects = posts.filter((project) => !project.featured);
 
   return (
-    <RootLayout>
-      <main
-        role="main"
-        aria-label="Innhold portefølje"
-        className="mt-32 bg-graybg"
-      >
-        <PageHeader>Prosjekter</PageHeader>
-        <div className="container mx-auto">
-          {featuredProjects.length > 0 && (
-            <div className="mb-12">
-              <div className="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-1 xl:grid-cols-2 gap-8">
-                {featuredProjects.map((project) => (
-                  <ProsjektCard key={project.id} {...project} />
-                ))}
-              </div>
+    <main
+      role="main"
+      aria-label="Innhold portefølje"
+      className="mt-32 bg-graybg"
+    >
+      <PageHeader>Prosjekter</PageHeader>
+      <div className="container mx-auto">
+        {featuredProjects.length > 0 && (
+          <div className="mb-12">
+            <div className="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-1 xl:grid-cols-2 gap-8">
+              {featuredProjects.map((project) => (
+                <ProsjektCard key={project.id} {...project} />
+              ))}
             </div>
-          )}
-          <div className="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-1 xl:grid-cols-2 gap-8">
-            {nonFeaturedProjects.map((project) => (
-              <ProsjektCard key={project.id} {...project} />
-            ))}
           </div>
+        )}
+        <div className="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-1 xl:grid-cols-2 gap-8">
+          {nonFeaturedProjects.map((project) => (
+            <ProsjektCard key={project.id} {...project} />
+          ))}
         </div>
-      </main>
-    </RootLayout>
+      </div>
+    </main>
   );
 }