feat: add error handling and notifications for plugin settings and registration

Author: GoodbyeNJN

src/i18n/en.tsx

@@ -10,8 +10,13 @@ export const EN = {
             time: "",
         },
     },
+    "notice:load-settings-error": "Error loading plugin settings, please check the console logs.",
+    "notice:register-plugin-error": "Error registering plugin, please check the console logs.",
     "command:format-content-name": "Format all content",
     "command:format-selection-name": "Format selected content",
+    "setting:error-boundary-title": "Settings panel failed to load",
+    "setting:error-boundary-description":
+        "Error loading settings panel, please check the error message below.",
     "setting:format-on-save-name": "Format on save",
     "setting:format-on-save-description": "Format the current content when saving the file.",
     "setting:format-on-file-change-name": "Format on file change",

src/i18n/types.ts

@@ -2,8 +2,12 @@ import type { JSX } from "jsx/jsx-runtime";
 
 export type LangKey =
     | "notice:format-too-slow"
+    | "notice:load-settings-error"
+    | "notice:register-plugin-error"
     | "command:format-content-name"
     | "command:format-selection-name"
+    | "setting:error-boundary-title"
+    | "setting:error-boundary-description"
     | "setting:format-on-save-name"
     | "setting:format-on-save-description"
     | "setting:format-on-file-change-name"

src/i18n/zh-cn.tsx

@@ -9,8 +9,12 @@ export const ZH_CN = {
             time: "",
         },
     },
+    "notice:load-settings-error": "加载插件设置时出错，请检查控制台日志。",
+    "notice:register-plugin-error": "注册插件时出错，请检查控制台日志。",
     "command:format-content-name": "格式化全部内容",
     "command:format-selection-name": "格式化选定内容",
+    "setting:error-boundary-title": "设置面板加载失败",
+    "setting:error-boundary-description": "加载设置面板时出错，请检查下方的错误信息。",
     "setting:format-on-save-name": "保存时格式化",
     "setting:format-on-save-description": "保存文件时是否格式化当前内容。",
     "setting:format-on-file-change-name": "文件更改时格式化",

src/main.ts

@@ -4,7 +4,7 @@ import { Formatter } from "./formatter";
 import { fmt } from "./i18n";
 import { getCurrentVersion, getDefaultSettings, migrate } from "./model";
 import { SettingsTab } from "./setting";
-import { withPerfNotice } from "./utils/common";
+import { logger, showNotice, withPerfNotice } from "./utils/common";
 
 import type { Data } from "./model";
 import type { Command, EventRef, TFile } from "obsidian";
@@ -19,16 +19,45 @@ export default class PrettierPlugin extends Plugin {
     private originalSaveCallback: Command["checkCallback"];
 
     override async onload() {
-        await this.loadSettings();
+        logger("Loading plugin...");
+
+        try {
+            await this.loadSettings();
+        } catch (error) {
+            logger("Error loading plugin settings:", error);
+            showNotice(fmt("notice:load-settings-error"));
+        }
 
         this.formatter = new Formatter(this);
 
-        this.registerCommands();
-        this.registerEvents();
-        this.hookSaveCommands();
+        try {
+            try {
+                const { formatContentCommand, formatSelectionCommand } = this.registerCommands();
+                if (!formatContentCommand || !formatSelectionCommand) {
+                    const missing = [];
+                    if (!formatContentCommand) missing.push("format-content");
+                    if (!formatSelectionCommand) missing.push("format-selection");
+
+                    throw new Error(`Failed to register commands: ${missing.join(", ")}`);
+                }
+            } catch (error) {
+                logger("Error registering commands:", error);
+            }
 
+            try {
+                this.hookSaveCommands();
+            } catch (error) {
+                logger("Error hooking save commands:", error);
+            }
+        } catch {
+            showNotice(fmt("notice:register-plugin-error"));
+        }
+
+        this.registerEvents();
         this.registerMenu();
 
+        logger("Plugin loaded.");
+
         this.addSettingTab(new SettingsTab(this));
     }
 
@@ -54,15 +83,15 @@ export default class PrettierPlugin extends Plugin {
     }
 
     private registerCommands() {
-        this.addCommand({
+        const formatContentCommand = this.addCommand({
             id: "format-content",
             name: fmt("command:format-content-name"),
             editorCallback: async (editor, view) => {
                 await withPerfNotice(() => this.formatter.formatContent(editor, view.file));
             },
         });
 
-        this.addCommand({
+        const formatSelectionCommand = this.addCommand({
             id: "format-selection",
             name: fmt("command:format-selection-name"),
             editorCheckCallback: (checking, editor, view) => {
@@ -73,6 +102,8 @@ export default class PrettierPlugin extends Plugin {
                 return editor.somethingSelected();
             },
         });
+
+        return { formatContentCommand, formatSelectionCommand };
     }
 
     private registerEvents() {

src/setting.ts

@@ -9,6 +9,7 @@ import {
 
 import { fmt } from "./i18n";
 import { getDefaultFormatOptions, getDefaultIgnorePatterns } from "./model";
+import { logger } from "./utils/common";
 
 import type PrettierPlugin from "./main";
 import type { Settings } from "./model";
@@ -39,14 +40,55 @@ export class SettingsTab extends PluginSettingTab {
     display() {
         this.containerEl.empty();
 
-        this.addFormatOnSave();
-        this.addFormatOnFileChange();
-        this.addFormatCodeBlock();
-        // this.addRemoveExtraSpaces();
-        this.addAddTrailingSpaces();
-        this.addLanguageMappings();
-        this.addFormatOptions();
-        this.addIgnorePatterns();
+        try {
+            this.addFormatOnSave();
+            this.addFormatOnFileChange();
+            this.addFormatCodeBlock();
+            // this.addRemoveExtraSpaces();
+            this.addAddTrailingSpaces();
+            this.addLanguageMappings();
+            this.addFormatOptions();
+            this.addIgnorePatterns();
+        } catch (error) {
+            logger("Error displaying settings tab:", error);
+            this.containerEl.empty();
+            this.showErrorBoundary(error);
+        }
+    }
+
+    private showErrorBoundary(error: unknown) {
+        const errorBoundary = this.containerEl.createDiv("prettier-settings__error-boundary");
+        errorBoundary.createSpan({
+            text: fmt("setting:error-boundary-title"),
+            cls: "prettier-settings__error-boundary-title",
+        });
+        errorBoundary.createSpan({
+            text: fmt("setting:error-boundary-description"),
+            cls: "prettier-settings__error-boundary-description",
+        });
+
+        let message = "";
+        if (error instanceof Error) {
+            message = error.message;
+
+            if (error.stack) {
+                message += `\n\n${error.stack}`;
+            }
+        } else if (typeof error === "string") {
+            message = error;
+        } else {
+            try {
+                message = JSON.stringify(error, null, 2);
+            } catch {
+                message = String(error);
+            }
+        }
+
+        errorBoundary
+            .createEl("pre", "prettier-settings__error-boundary-message")
+            .createEl("code", {
+                text: message,
+            });
     }
 
     private addFormatOnSave() {

src/styles.css

@@ -1,3 +1,35 @@
+.prettier-settings__error-boundary-title {
+    display: block;
+    font-size: 1.4em;
+}
+
+.prettier-settings__error-boundary-description {
+    display: block;
+    font-size: 1em;
+    margin-top: 1.2em;
+}
+
+.prettier-settings__error-boundary-message {
+    display: block;
+    overflow: auto;
+    margin-top: 2.4em;
+    padding: 1em;
+    max-height: 20em;
+    color: var(--text-muted);
+    font-family: var(--font-monospace);
+    font-size: 0.85em;
+    line-height: 1.4em;
+    white-space: pre-wrap;
+    word-break: break-all;
+    border: 1px solid var(--background-modifier-border);
+    border-radius: 0.25em;
+    background: var(--background-secondary);
+}
+
+.prettier-settings__error-boundary-message > code {
+    display: block;
+}
+
 .setting-item-extra {
     display: flex;
     flex-direction: column;