perf: 增加插件加载失败的提醒

shared/i18n/langs/en-US/translation.json

@@ -8,6 +8,7 @@
   "k1704ea49": "Install",
   "k17777797": "The panel is provided by the plugin",
   "k18580d81": "Create a link and send it to external friends",
+  "k186fec4": "Plugin failed to load",
   "k1885734a": "Effective after refreshing the page",
   "k18c716ce": "Password cannot be less than 6 digits",
   "k19885be1": "Panel name is too long",
@@ -119,6 +120,7 @@
   "k8b501189": "Service Status",
   "k8caee957": "Invite friends to converse",
   "k8dc86b13": "Pin",
+  "k8e7fb0d7": "MiniStar App initialization failed",
   "k8f6dfd40": "Current members",
   "k9179206d": "Reconnecting",
   "k92a84117": "Claim account",

shared/i18n/langs/zh-CN/translation.json

@@ -8,6 +8,7 @@
   "k1704ea49": "安装",
   "k17777797": "该面板由插件提供",
   "k18580d81": "创建链接并发送给外部好友",
+  "k186fec4": "插件加载失败",
   "k1885734a": "刷新页面后生效",
   "k18c716ce": "密码不能低于6位",
   "k19885be1": "面板名过长",
@@ -119,6 +120,7 @@
   "k8b501189": "服务状态",
   "k8caee957": "邀请好友加入会话",
   "k8dc86b13": "Pin",
+  "k8e7fb0d7": "MiniStar 应用初始化失败",
   "k8f6dfd40": "当前成员数",
   "k9179206d": "正在重新链接",
   "k92a84117": "认领账号",

web/src/index.tsx

@@ -4,17 +4,22 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { App } from './App';
 import { initPlugins } from './plugin/loader';
-import './styles';
 import { installServiceWorker } from './utils/sw-helper';
+import { showErrorToasts, t } from 'tailchat-shared';
+import './styles';
 
 installServiceWorker();
 
 // 先加载插件再开启应用
-initPlugins().then(() => {
+initPlugins()
-  ReactDOM.render(
+  .then(() => {
-    <React.StrictMode>
+    ReactDOM.render(
-      <App />
+      <React.StrictMode>
-    </React.StrictMode>,
+        <App />
-    document.querySelector('#app')
+      </React.StrictMode>,
-  );
+      document.querySelector('#app')
-});
+    );
+  })
+  .catch(() => {
+    showErrorToasts(t('MiniStar 应用初始化失败'));
+  });

web/src/plugin/loader.ts

@@ -4,11 +4,11 @@ import { pluginManager } from './manager';
 /**
  * 初始化插件
  */
-export function initPlugins(): Promise<void> {
+export async function initPlugins(): Promise<void> {
   registerDependencies();
   registerModules();
 
-  return pluginManager.initPlugins();
+  await pluginManager.initPlugins();
 }
 
 function registerDependencies() {

web/src/plugin/manager.ts

@@ -2,10 +2,12 @@ import {
   getCachedRegistryPlugins,
   getStorage,
   PluginManifest,
+  t,
 } from 'tailchat-shared';
 import { initMiniStar, loadSinglePlugin } from 'mini-star';
 import _once from 'lodash/once';
 import { builtinPlugins } from './builtin';
+import { showPluginLoadError } from './showPluginLoadError';
 
 class PluginManager {
   /**
@@ -27,9 +29,17 @@ class PluginManager {
       url,
     }));
 
-    return initMiniStar({
+    const loadErrorPlugins = new Set<string>();
+    await initMiniStar({
       plugins,
+      onPluginLoadError: (err) => {
+        loadErrorPlugins.add(err.pluginName);
+      },
     });
+
+    if (loadErrorPlugins.size > 0) {
+      showPluginLoadError(Array.from(loadErrorPlugins));
+    }
   });
 
   /**

web/src/plugin/showPluginLoadError.tsx

@@ -0,0 +1,18 @@
+import { notification } from 'antd';
+import React from 'react';
+import { t } from 'tailchat-shared';
+
+export function showPluginLoadError(loadErrorPluginNames: string[]) {
+  notification.warn({
+    message: (
+      <div>
+        <p>{t('插件加载失败')}:</p>
+
+        {loadErrorPluginNames.map((name) => (
+          <p key={name}>- {name}</p>
+        ))}
+      </div>
+    ),
+    duration: 2,
+  });
+}