Add error boundaries

r00tat · Sep 29, 2024 · a43bc3b · a43bc3b
1 parent 2a06e65
commit a43bc3b
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 1 deletion.
diff --git a/src/app/error.tsx b/src/app/error.tsx
@@ -0,0 +1,32 @@
+'use client'; // Error boundaries must be Client Components
+
+// see https://nextjs.org/docs/app/building-your-application/routing/error-handling#uncaught-exceptions
+
+import { useEffect } from 'react';
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    // Log the error to an error reporting service
+    console.error('Failed to render: ', error);
+  }, [error]);
+
+  return (
+    <div>
+      <h2>Something went wrong!</h2>
+      <button
+        onClick={
+          // Attempt to recover by trying to re-render the segment
+          () => reset()
+        }
+      >
+        Try again
+      </button>
+    </div>
+  );
+}
diff --git a/src/app/global-error.tsx b/src/app/global-error.tsx
@@ -0,0 +1,28 @@
+'use client';
+import { useEffect } from 'react';
+
+// Error boundaries must be Client Components
+// see https://nextjs.org/docs/app/building-your-application/routing/error-handling#uncaught-exceptions
+
+export default function GlobalError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    // Log the error to an error reporting service
+    console.error('Global Error: ', error);
+  }, [error]);
+
+  return (
+    // global-error must include html and body tags
+    <html>
+      <body>
+        <h2>Something went wrong!</h2>
+        <button onClick={() => reset()}>Try again</button>
+      </body>
+    </html>
+  );
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,8 +1,8 @@
+import 'leaflet/dist/leaflet.css';
 import type { Metadata, Viewport } from 'next';
 import React from 'react';
 import AppProviders from '../components/providers/AppProviders';
 import '../styles/globals.css';
-import 'leaflet/dist/leaflet.css';
 
 const APP_NAME = 'Einsatzkarte FFN';
 const APP_DEFAULT_TITLE = 'Einsatzkarte FFN';