diff --git a/package.json b/package.json index c9e7080..4302b7f 100644 --- a/package.json +++ b/package.json @@ -58,6 +58,7 @@ "pubsub-js": "^1.9.4", "react": "^18.3.1", "react-dom": "^18.3.1", + "react-error-boundary": "^4.0.13", "react-icons": "^5.2.1", "react-monaco-editor": "^0.56.0", "react-router-dom": "^6.26.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 45f78e0..a6f7405 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -120,6 +120,9 @@ importers: react-dom: specifier: ^18.3.1 version: 18.3.1(react@18.3.1) + react-error-boundary: + specifier: ^4.0.13 + version: 4.0.13(react@18.3.1) react-icons: specifier: ^5.2.1 version: 5.2.1(react@18.3.1) @@ -3706,6 +3709,11 @@ packages: peerDependencies: react: ^18.3.1 + react-error-boundary@4.0.13: + resolution: {integrity: sha512-b6PwbdSv8XeOSYvjt8LpgpKrZ0yGdtZokYwkwV2wlcZbxgopHX/hgPl5VgpnoVOWd868n1hktM8Qm4b+02MiLQ==} + peerDependencies: + react: '>=16.13.1' + react-icons@5.2.1: resolution: {integrity: sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw==} peerDependencies: @@ -9188,6 +9196,11 @@ snapshots: react: 18.3.1 scheduler: 0.23.2 + react-error-boundary@4.0.13(react@18.3.1): + dependencies: + '@babel/runtime': 7.25.0 + react: 18.3.1 + react-icons@5.2.1(react@18.3.1): dependencies: react: 18.3.1 diff --git a/src/renderer/src/components/base/base-error-boundary.tsx b/src/renderer/src/components/base/base-error-boundary.tsx new file mode 100644 index 0000000..c6e1255 --- /dev/null +++ b/src/renderer/src/components/base/base-error-boundary.tsx @@ -0,0 +1,59 @@ +import { Button } from '@nextui-org/react' +import { ReactNode } from 'react' +import { ErrorBoundary, FallbackProps } from 'react-error-boundary' + +const ErrorFallback = ({ error }: FallbackProps): JSX.Element => { + return ( +
+

+ {'应用崩溃了 :( 请将以下信息提交给开发者以排查错误'} +

+ + + + + + +

{error.message}

+ +
+ Error Stack +
{error.stack}
+
+
+ ) +} + +interface Props { + children?: ReactNode +} + +const BaseErrorBoundary = (props: Props): JSX.Element => { + return {props.children} +} + +export default BaseErrorBoundary diff --git a/src/renderer/src/main.tsx b/src/renderer/src/main.tsx index 21da369..0b3a63c 100644 --- a/src/renderer/src/main.tsx +++ b/src/renderer/src/main.tsx @@ -6,6 +6,7 @@ import { NextUIProvider } from '@nextui-org/react' import { init } from '@renderer/utils/init' import '@renderer/assets/main.css' import App from '@renderer/App' +import BaseErrorBoundary from './components/base/base-error-boundary' init().then(() => { ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( @@ -17,9 +18,11 @@ init().then(() => { enableSystem defaultTheme="dark" > - - - + + + + +