From 6a9745171ea4796d7961db8802cdcbbe4e62156e Mon Sep 17 00:00:00 2001
From: GyDi <zzzgydi@gmail.com>
Date: Thu, 8 Jun 2023 13:50:45 +0800
Subject: [PATCH] feat: add error boundary to the app root

---
 src/components/base/base-error-boundary.tsx | 14 ++++++++++----
 src/main.tsx                                |  9 ++++++---
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/components/base/base-error-boundary.tsx b/src/components/base/base-error-boundary.tsx
index 3c04508..2475a2f 100644
--- a/src/components/base/base-error-boundary.tsx
+++ b/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}
diff --git a/src/main.tsx b/src/main.tsx
index 0b0cf98..8588844 100644
--- a/src/main.tsx
+++ b/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>
 );