feat: implement global error handling and reporting system

- Added ErrorReportingChannels to IPC types for error reporting.
- Introduced ErrorHandler class for managing error reporting, including severity levels and context.
- Registered error reporting IPC handlers to capture and process errors from the renderer process.
- Integrated error handling into the application lifecycle, including a dialog for reporting issues.
- Added utility functions for retrying operations with configurable options.
- Enhanced existing utilities with a sleep function for delay handling.

Author: mienaiyami

src/common/types/ipc.ts

@@ -175,6 +175,18 @@ export type DialogChannels = {
     "dialog:showSaveDialog": ChannelDefinition<Electron.SaveDialogOptions, Electron.SaveDialogReturnValue>;
 };
 
+export type ErrorReportingChannels = {
+    "error:report": ChannelDefinition<
+        {
+            error: string;
+            stack?: string;
+            context?: Record<string, unknown>;
+            severity?: "low" | "medium" | "high" | "critical";
+        },
+        void
+    >;
+};
+
 export type MainSettingsChannels = {
     "mainSettings:get": ChannelDefinition<void, MainSettingsType>;
     "mainSettings:update": ChannelDefinition<Partial<MainSettingsType>, void>;
@@ -189,6 +201,7 @@ export type IPCChannels = DatabaseChannels &
     ExplorerMenuChannels &
     ReaderChannels &
     DialogChannels &
+    ErrorReportingChannels &
     MainSettingsChannels;
 
 export type MainToRendererChannels = {

src/electron/ipc/errorReporting.ts

@@ -0,0 +1,23 @@
+import { getErrorHandler } from "../util/errorHandler";
+import { ipc } from "./utils";
+
+/**
+ * Register error reporting IPC handlers
+ */
+export const registerErrorReportingHandlers = () => {
+    const errorHandler = getErrorHandler();
+
+    ipc.handle("error:report", (event, args) => {
+        args.severity ??= "medium";
+        errorHandler.handleError(
+            args.error,
+            args.severity,
+            {
+                source: "Renderer Process",
+                windowId: event.sender.id,
+                metadata: args.context,
+            },
+            ["high", "critical"].includes(args.severity),
+        );
+    });
+};

src/electron/main.ts

@@ -2,6 +2,7 @@ import fs from "node:fs";
 import * as remote from "@electron/remote/main";
 import { app, BrowserWindow, Menu, type MenuItemConstructorOptions, shell } from "electron";
 import { log } from "./util";
+import { getErrorHandler } from "./util/errorHandler";
 
 remote.initialize();
 
@@ -10,6 +11,7 @@ if (require("electron-squirrel-startup")) app.quit();
 import { DatabaseService } from "./db";
 import { setupDatabaseHandlers } from "./ipc/database";
 import { registerDialogHandlers } from "./ipc/dialog";
+import { registerErrorReportingHandlers } from "./ipc/errorReporting";
 import { registerExplorerHandlers } from "./ipc/explorer";
 import { registerFSHandlers } from "./ipc/fs";
 import { registerUpdateHandlers } from "./ipc/update";
@@ -22,6 +24,15 @@ if (handleSquirrelEvent()) {
     app.quit();
 }
 
+// initialize global error handler early
+const errorHandler = getErrorHandler({
+    showDialogs: true,
+    logToFile: true,
+    collectSystemInfo: true,
+    maxReports: 50,
+    enableCrashReporting: true,
+});
+
 const db = new DatabaseService();
 
 // when manga reader opened from context menu "open with manga reader"
@@ -59,69 +70,81 @@ if (app.isPackaged) {
 }
 
 app.on("ready", async () => {
-    // checkForJSONMigration depends on app ready to use dialog
-    checkForJSONMigration(db);
-    /**
-     * enables basic shortcut keys such as copy, paste, reload, etc.
-     */
-    const template: MenuItemConstructorOptions[] = [
-        {
-            label: "Edit",
-            submenu: [
-                { role: "undo" },
-                { role: "redo" },
-                { role: "cut" },
-                { role: "copy" },
-                { role: "paste" },
-                { role: "pasteAndMatchStyle" },
-                { role: "selectAll" },
-            ],
-        },
-        {
-            label: "View",
-            submenu: [
-                { role: "reload" },
-                { role: "forceReload" },
-                { role: "toggleDevTools" },
-                { type: "separator" },
-            ],
-        },
-        {
-            label: "Others",
-            submenu: [
-                {
-                    role: "help",
-                    accelerator: "F1",
-                    click: () => shell.openExternal("https://github.com/mienaiyami/yomikiru"),
-                },
-                {
-                    label: "New Window",
-                    accelerator: process.platform === "darwin" ? "Cmd+N" : "Ctrl+N",
-                    click: () => WindowManager.createWindow(),
-                },
-                {
-                    label: "Close",
-                    accelerator: process.platform === "darwin" ? "Cmd+W" : "Ctrl+W",
-                    click: (_, window) => window?.close(),
-                },
-            ],
-        },
-    ];
-    const menu = Menu.buildFromTemplate(template);
-    Menu.setApplicationMenu(menu);
+    try {
+        // checkForJSONMigration depends on app ready to use dialog
+        checkForJSONMigration(db);
+        /**
+         * enables basic shortcut keys such as copy, paste, reload, etc.
+         */
+        const template: MenuItemConstructorOptions[] = [
+            {
+                label: "Edit",
+                submenu: [
+                    { role: "undo" },
+                    { role: "redo" },
+                    { role: "cut" },
+                    { role: "copy" },
+                    { role: "paste" },
+                    { role: "pasteAndMatchStyle" },
+                    { role: "selectAll" },
+                ],
+            },
+            {
+                label: "View",
+                submenu: [
+                    { role: "reload" },
+                    { role: "forceReload" },
+                    { role: "toggleDevTools" },
+                    { type: "separator" },
+                ],
+            },
+            {
+                label: "Others",
+                submenu: [
+                    {
+                        role: "help",
+                        accelerator: "F1",
+                        click: () => shell.openExternal("https://github.com/mienaiyami/yomikiru"),
+                    },
+                    {
+                        label: "New Window",
+                        accelerator: process.platform === "darwin" ? "Cmd+N" : "Ctrl+N",
+                        click: () => WindowManager.createWindow(),
+                    },
+                    {
+                        label: "Close",
+                        accelerator: process.platform === "darwin" ? "Cmd+W" : "Ctrl+W",
+                        click: (_, window) => window?.close(),
+                    },
+                    {
+                        label: "Report Issue",
+                        click: () => errorHandler.showIssueReportDialog(),
+                    },
+                ],
+            },
+        ];
+        const menu = Menu.buildFromTemplate(template);
+        Menu.setApplicationMenu(menu);
 
-    await db.initialize();
-    setupDatabaseHandlers(db);
+        await db.initialize();
+        setupDatabaseHandlers(db);
 
-    WindowManager.registerListeners();
+        WindowManager.registerListeners();
 
-    registerExplorerHandlers();
-    registerFSHandlers();
-    registerDialogHandlers();
+        registerExplorerHandlers();
+        registerFSHandlers();
+        registerDialogHandlers();
+        registerErrorReportingHandlers();
 
-    WindowManager.createWindow(openFolderOnLaunch);
-    // need to be after window is created
-    registerUpdateHandlers();
+        WindowManager.createWindow(openFolderOnLaunch);
+        // need to be after window is created
+        registerUpdateHandlers();
+    } catch (error) {
+        errorHandler.handleError(error as Error, "critical", {
+            source: "App Ready Handler",
+            action: "Initialize application",
+        });
+    }
 });
 
 app.on("before-quit", () => {

src/electron/updater.ts

@@ -9,7 +9,7 @@ import * as electronDl from "electron-dl";
 import fetch from "electron-fetch";
 import logger from "electron-log";
 import * as semver from "semver";
-import { IS_PORTABLE } from "./util";
+import { IS_PORTABLE, sleep } from "./util";
 
 declare const DOWNLOAD_PROGRESS_WEBPACK_ENTRY: string;
 
@@ -26,7 +26,7 @@ const DOWNLOAD_LINK = `${RELEASES_PAGE}/download`;
 
 const checkForAnnouncements = async () => {
     try {
-        await new Promise((resolve) => setTimeout(resolve, 5000));
+        await sleep(5000);
         const raw = await fetch(ANNOUNCEMENTS_URL)
             .then((data) => data.text())
             .then((data) => data.split("\n").filter((e) => e !== ""));