feat: update routing, add error boundary

Updates the routing to use React Router's createBrowserRouter. Adds a custom ErrorBoundary component to catch and display errors that occur while navigating or rendering the application.
digidem · Sep 6, 2024 · ae6a80d · ae6a80d
1 parent 14d84f6
commit ae6a80d
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 10 deletions.
diff --git a/index.html b/index.html
@@ -6,10 +6,10 @@
     <title>Awana Digital | Encontro 2024</title>
     <meta name="description" content="Awana Digital Brasil" />
     <meta name="author" content="Luandro" />
-    <link rel="icon" type="image/png" href="%BASE_URL%favicon.png" />
+    <link rel="icon" type="image/png" href="/favicon.png" />
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="%BASE_URL%src/main.jsx"></script>
+    <script type="module" src="/src/main.jsx"></script>
   </body>
 </html>
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,22 +1,33 @@
 import { Toaster } from "@/components/ui/sonner";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import { navItems } from "./nav-items";
 
 const queryClient = new QueryClient();
 
+// Create a custom ErrorBoundary component
+const ErrorBoundary = ({ error }) => (
+  <div className="error-boundary">
+    <h1>Oops! Something went wrong.</h1>
+    <p>{error?.message || 'An unexpected error occurred.'}</p>
+  </div>
+);
+
+const router = createBrowserRouter(
+  navItems.map(({ to, page }) => ({
+    path: to,
+    element: page,
+    errorElement: <ErrorBoundary />, // Add errorElement prop to each route
+  })),
+  { basename: import.meta.env.BASE_URL }
+);
+
 const App = () => (
   <QueryClientProvider client={queryClient}>
     <TooltipProvider>
       <Toaster />
-      <BrowserRouter>
-        <Routes>
-          {navItems.map(({ to, page }) => (
-            <Route key={to} path={to} element={page} />
-          ))}
-        </Routes>
-      </BrowserRouter>
+      <RouterProvider router={router} />
     </TooltipProvider>
   </QueryClientProvider>
 );