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>
);
--
GitLab