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

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>