feat: add error boundary to the app root

src/components/base/base-error-boundary.tsx

@@ -3,18 +3,24 @@ import { ErrorBoundary, FallbackProps } from "react-error-boundary";
 
 function ErrorFallback({ error }: FallbackProps) {
   return (
-    <div role="alert">
-      <p>Something went wrong:(</p>
+    <div role="alert" style={{ padding: 16 }}>
+      <h4>Something went wrong:(</h4>
+
       <pre>{error.message}</pre>
+
+      <details title="Error Stack">
+        <summary>Error Stack</summary>
+        <pre>{error.stack}</pre>
+      </details>
     </div>
   );
 }
 
-interface BaseErrorBoundaryProps {
+interface Props {
   children?: ReactNode;
 }
 
-export const BaseErrorBoundary: React.FC<BaseErrorBoundaryProps> = (props) => {
+export const BaseErrorBoundary = (props: Props) => {
   return (
     <ErrorBoundary FallbackComponent={ErrorFallback}>
       {props.children}

src/main.tsx

@@ -11,6 +11,7 @@ import React from "react";
 import { createRoot } from "react-dom/client";
 import { RecoilRoot } from "recoil";
 import { BrowserRouter } from "react-router-dom";
+import { BaseErrorBoundary } from "./components/base";
 import Layout from "./pages/_layout";
 import "./services/i18n";
 
@@ -26,9 +27,11 @@ if (!container) {
 createRoot(container).render(
   <React.StrictMode>
     <RecoilRoot>
-      <BrowserRouter>
-        <Layout />
-      </BrowserRouter>
+      <BaseErrorBoundary>
+        <BrowserRouter>
+          <Layout />
+        </BrowserRouter>
+      </BaseErrorBoundary>
     </RecoilRoot>
   </React.StrictMode>
 );