fix: 配置出错时白屏的问题

package-lock.json

@@ -45,6 +45,7 @@
         "react": "^18.3.1",
         "react-colorful": "^5.6.1",
         "react-dom": "^18.3.1",
+        "react-error-boundary": "^5.0.0",
         "react-i18next": "^12.3.1",
         "react-router-dom": "^6.23.1",
         "react-toastify": "^9.1.3",
@@ -14409,6 +14410,18 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-error-boundary": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/react-error-boundary/-/react-error-boundary-5.0.0.tgz",
+      "integrity": "sha512-tnjAxG+IkpLephNcePNA7v6F/QpWLH8He65+DmedchDwg162JZqx4NmbXj0mlAYVVEd81OW7aFhmbsScYfiAFQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5"
+      },
+      "peerDependencies": {
+        "react": ">=16.13.1"
+      }
+    },
     "node_modules/react-i18next": {
       "version": "12.3.1",
       "resolved": "https://registry.npmmirror.com/react-i18next/-/react-i18next-12.3.1.tgz",

package.json

@@ -105,6 +105,7 @@
     "react": "^18.3.1",
     "react-colorful": "^5.6.1",
     "react-dom": "^18.3.1",
+    "react-error-boundary": "^5.0.0",
     "react-i18next": "^12.3.1",
     "react-router-dom": "^6.23.1",
     "react-toastify": "^9.1.3",

src/renderer/document/fallback.tsx

@@ -0,0 +1,26 @@
+
+interface IProps {
+    error: Error,
+    resetErrorBoundary: (...args: any[]) => void,
+}
+
+export default function Fallback(props: IProps) {
+    const {error, resetErrorBoundary} = props;
+
+    return <div role='alert' style={{
+        margin: 24
+    }}>
+        <div>出现问题啦...</div>
+        <div>请点击右下角【重置配置项】按钮尝试修复，如果还有问题请将错误信息反馈到github或发送到公众号【一只猫头猫】</div>
+        <pre style={{color: "red"}}>{error.message}</pre>
+        <pre style={{color: "red"}}>{error.stack}</pre>
+        <div role='button' style={{
+            position: "fixed",
+            right: 48,
+            bottom: 48,
+            background: "red",
+            color: "white",
+            padding: 16,
+        }} onClick={resetErrorBoundary}>重置配置项</div>
+    </div>
+}

src/renderer/document/index.tsx

@@ -15,11 +15,18 @@ import "./index.scss";
 import {toastDuration} from "@/common/constant";
 import useBootstrap from "./useBootstrap";
 import logger from "@shared/logger/renderer";
+import {ErrorBoundary} from "react-error-boundary";
+import Fallback from "@renderer/document/fallback";
+import AppConfig from "@shared/app-config/renderer";
 
 logger.logPerf("Create Bundle");
 bootstrap().then(() => {
     logger.logPerf("Bundle Bootstrap Ready");
-    ReactDOM.createRoot(document.getElementById("root")).render(<Root></Root>);
+    ReactDOM.createRoot(document.getElementById("root")).render(<ErrorBoundary
+        FallbackComponent={Fallback} onReset={() => {
+            // 删除软件配置
+            AppConfig.reset();
+    }}><Root></Root></ErrorBoundary>);
 });
 
 function Root() {

src/shared/app-config/main.ts

@@ -70,6 +70,10 @@ class AppConfig {
              */
             this._setConfig(data, "renderer");
         })
+
+        ipcMain.on("@shared/app-config/reset", () => {
+            this.reset();
+        })
     }
 
     public onConfigUpdated(callback: (patch: IAppConfig, config: IAppConfig, from: "main" | "renderer") => void) {
@@ -191,6 +195,11 @@ class AppConfig {
         return this.config;
     }
 
+    public reset() {
+        this.config = {};
+        this.setConfig({});
+    }
+
     public getConfig<T extends keyof IAppConfig>(key: T): IAppConfig[T] {
         return this.config[key];
     }

src/shared/app-config/preload.ts

@@ -9,6 +9,10 @@ function setConfig(config: any) {
     return ipcRenderer.send("@shared/app-config/set-app-config", config);
 }
 
+function reset() {
+    return ipcRenderer.send("@shared/app-config/reset");
+}
+
 function onConfigUpdate(callback: (patch: any) => void) {
     ipcRenderer.on("@shared/app-config/update-app-config", (_event, patch) => {
         callback(patch);
@@ -19,7 +23,8 @@ function onConfigUpdate(callback: (patch: any) => void) {
 const mod = {
     syncConfig,
     setConfig,
-    onConfigUpdate
+    onConfigUpdate,
+    reset,
 }
 
 contextBridge.exposeInMainWorld("@shared/app-config", mod);

src/shared/app-config/renderer.ts

@@ -1,5 +1,6 @@
 import {IAppConfig} from "@/types/app-config";
 import _defaultAppConfig from "@shared/app-config/default-app-config";
+import defaultAppConfig from "@shared/app-config/default-app-config";
 
 
 interface IMod {
@@ -8,6 +9,8 @@ interface IMod {
     setConfig(config: IAppConfig): void;
 
     onConfigUpdate(callback: (config: IAppConfig) => void): void;
+
+    reset(): void;
 }
 
 const mod = window["@shared/app-config" as any] as unknown as IMod
@@ -56,6 +59,12 @@ class AppConfig {
         mod.setConfig(data);
     }
 
+    public reset() {
+        mod.reset();
+        this.config = defaultAppConfig;
+        this.notifyCallbacks(this.config);
+    }
+
 }
 
 export default new AppConfig();