feat: add log mechanism

Signed-off-by: LinHaiming <lhming23@outlook.com>

src/_locales/en/messages.json

@@ -8,6 +8,12 @@
   "manifest_iconTitle": {
     "message": "[loading……]"
   },
+  "global_error_message": {
+    "message": "Sorry，an error occurred while loading hypertrons-crx extention..."
+  },
+  "global_search": {
+    "message": "Search"
+  },
   "global_btn_ok": {
     "message": "ok"
   },
@@ -68,10 +74,10 @@
   "options_text_goGetUpdate": {
     "message": "get the update"
   },
-  "notification_title_newUpdate":{
+  "notification_title_newUpdate": {
     "message": "new update available"
   },
-  "notification_message_newUpdate":{
+  "notification_message_newUpdate": {
     "message": "version: %v"
   }
 }

src/_locales/zh_CN/messages.json

@@ -8,6 +8,12 @@
   "manifest_iconTitle": {
     "message": "[载入中……]"
   },
+  "global_error_message": {
+    "message": "抱歉，hypertrons 插件崩溃了，请刷新重试..."
+  },
+  "global_search": {
+    "message": "查找"
+  },
   "global_btn_ok": {
     "message": "确定"
   },

src/components/ExceptionPage/ErrorMessageBar.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Stack, MessageBar, Link, MessageBarType } from 'office-ui-fabric-react';
+import { getMessageI18n } from '../../utils/utils';
+
+interface ErrorMessageBarProps {
+  url?: string;
+}
+
+const ErrorMessageBar: React.FC<ErrorMessageBarProps> = ({
+  url = "https://github.com/hypertrons/hypertrons-crx/issues?q=is%3Aissue"
+}) => {
+  return (
+    <Stack >
+      <Stack.Item align="center">
+        <MessageBar
+          messageBarType={MessageBarType.error}
+          isMultiline={false}
+          dismissButtonAriaLabel="Close"
+        >
+          {getMessageI18n("global_error_message")}
+          <Link href={url} target="_blank" underline>
+            {getMessageI18n("global_search")} Issue.
+          </Link>
+        </MessageBar>
+      </Stack.Item>
+    </Stack>
+
+  )
+}
+
+export default ErrorMessageBar;

src/pages/Content/features/developer-network.tsx

@@ -63,27 +63,31 @@ const init = async (): Promise<void | false> => {
   DeveloperNetworkDiv.id = 'developer-network';
   DeveloperNetworkDiv.style.width = "100%";
   const developerLogin = $('.p-nickname.vcard-username.d-block').text().trim();
-  const developerGraphData = await getGraphData(`https://hypertrons.oss-cn-shanghai.aliyuncs.com/actor/${developerLogin}.json`);
+  try {
+    const developerGraphData = await getGraphData(`https://hypertrons.oss-cn-shanghai.aliyuncs.com/actor/${developerLogin}.json`);
+    developerGraphData.nodes.forEach((node: any) => {
+      if (node.name === developerLogin) {
+        node['itemStyle'] = {
+          color: '#fb8532'
+        };
+      }
+    });
 
-  developerGraphData.nodes.forEach((node: any) => {
-    if (node.name === developerLogin) {
-      node['itemStyle'] = {
-        color: '#fb8532'
-      };
-    }
-  });
-
-  render(
-    <div>
-      < DeveloperNetwork
-        id='developer'
-        data={developerGraphData}
-        title={getMessageI18n('component_developerCollabrationNetwork_title')}
-      />
-    </div>,
-    DeveloperNetworkDiv,
-  );
-  pinnedReposDiv.before(DeveloperNetworkDiv);
+    render(
+      <div>
+        < DeveloperNetwork
+          id='developer'
+          data={developerGraphData}
+          title={getMessageI18n('component_developerCollabrationNetwork_title')}
+        />
+      </div>,
+      DeveloperNetworkDiv,
+    );
+    pinnedReposDiv.before(DeveloperNetworkDiv);
+  } catch (error) {
+    features.error('developerNetwork', error);
+    return;
+  }
 }
 
 void features.add('developerNetwork', {

src/pages/Content/features/index.tsx

@@ -1,6 +1,29 @@
+import React from 'react';
+import { render } from 'react-dom';
+import $ from 'jquery';
 import elementReady from 'element-ready';
 import * as pageDetect from 'github-url-detection';
 import { chromeGet } from '../../../utils/utils'
+import ErrorMessageBar from '../../../components/ExceptionPage/ErrorMessageBar'
+
+const log = (name: string, message: Error | string | unknown, ...extras: unknown[]): void => {
+  if (process.env.NODE_ENV !== 'production') {
+    console.log(
+      `✅ Hypertrons-crx → ${name} →`,
+      message,
+      ...extras
+    );
+  }
+}
+
+const logError = (name: string, error: Error | string | unknown, ...extras: unknown[]): void => {
+  console.error(
+    `❌ Hypertrons-crx → ${name} →`,
+    error,
+    ...extras
+  );
+  render(<ErrorMessageBar />, document.getElementById('htpertrons-crx'))
+}
 
 const globalReady = async (): Promise<void> => {
 
@@ -10,7 +33,7 @@ const globalReady = async (): Promise<void> => {
     return;
   }
 }
-const defaultComponent = ['perceptorTab', 'perceptorLayout'];
+const defaultComponent = ['hypertrons-crx', 'perceptorTab', 'perceptorLayout'];
 const add = async (name: string, loader: any): Promise<void> => {
   await globalReady();
   const settings = await chromeGet("settings");
@@ -26,14 +49,22 @@ const add = async (name: string, loader: any): Promise<void> => {
     return;
   }
   try {
-    console.log('loading ', name);
     await init();
+    log(name, 'loaded.');
   } catch (error: unknown) {
-    console.error(error)
+    logError(name, error)
   }
 }
 
+void add('hypertrons-crx', {
+  init: async () => {
+    const hypertronsCrxDiv = document.createElement('div');
+    hypertronsCrxDiv.id = 'htpertrons-crx';
+    $('#js-repo-pjax-container').prepend(hypertronsCrxDiv);
+  }
+})
 const features = {
-  add
+  add,
+  error: logError
 };
 export default features;

src/pages/Content/features/project-network.tsx

@@ -82,7 +82,7 @@ const init = async (): Promise<void | false> => {
       ProjectNetworkDiv,
     );
   } catch (error) {
-    console.log(error);
+    features.error('projectNetwork', error);
     render(
       <ErrorPage />,
       ProjectNetworkDiv,