add error boundary

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",

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

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 (
+    <div className="p-4">
+      <h2 className="my-2 text-lg font-bold">
+        {'应用崩溃了 :( 请将以下信息提交给开发者以排查错误'}
+      </h2>
+
+      <Button
+        size="sm"
+        color="primary"
+        variant="flat"
+        onPress={() => open('https://github.com/pompurin404/mihomo-party/issues/new/choose')}
+      >
+        GitHub
+      </Button>
+      <Button
+        size="sm"
+        color="primary"
+        variant="flat"
+        className="ml-2"
+        onPress={() => open('https://t.me/mihomo_party')}
+      >
+        Telegram
+      </Button>
+
+      <Button
+        size="sm"
+        variant="flat"
+        className="ml-2"
+        onPress={() =>
+          navigator.clipboard.writeText('```\n' + error.message + '\n' + error.stack + '\n```')
+        }
+      >
+        复制报错信息
+      </Button>
+
+      <p className="my-2">{error.message}</p>
+
+      <details title="Error Stack">
+        <summary>Error Stack</summary>
+        <pre>{error.stack}</pre>
+      </details>
+    </div>
+  )
+}
+
+interface Props {
+  children?: ReactNode
+}
+
+const BaseErrorBoundary = (props: Props): JSX.Element => {
+  return <ErrorBoundary FallbackComponent={ErrorFallback}>{props.children}</ErrorBoundary>
+}
+
+export default BaseErrorBoundary

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"
         >
-          <HashRouter>
-            <App />
-          </HashRouter>
+          <BaseErrorBoundary>
+            <HashRouter>
+              <App />
+            </HashRouter>
+          </BaseErrorBoundary>
         </NextThemesProvider>
       </NextUIProvider>
     </React.StrictMode>