feat: beautify error messages

web-infra-dev · Jul 5, 2021 · 5e8a624 · 5e8a624
1 parent afc50c0
commit 5e8a624
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 11 deletions.
diff --git a/dev/subApp/public/remoteModule.js b/dev/subApp/public/remoteModule.js
@@ -27,5 +27,5 @@ module.exports = new Promise((resolve) => {
   console.log('loading other modules.');
   setTimeout(() => {
     resolve(components);
-  }, 1000);
+  }, 100);
 });
diff --git a/packages/runtime/remote-module/README.md b/packages/runtime/remote-module/README.md
@@ -61,7 +61,7 @@ loadModule({
   cache: true, // This will cache the module instance
   env: { React },
   url: 'https://xx.js',
-  error: (err) => {
+  error: (err, info, alias) => {
     console.error(err);
     return 'render error content';
   },

diff --git a/packages/runtime/remote-module/src/apis/loadModule.ts b/packages/runtime/remote-module/src/apis/loadModule.ts
@@ -5,6 +5,7 @@ import {
   cacheModules,
   fetchLoading,
   purifyOptions,
+  prettifyError,
 } from '../common';
 import { Actuator } from '../actuator';
 import { processAlias, getValueInObject } from './setModuleConfig';
@@ -49,10 +50,11 @@ export function loadModule(
         result = getValueInObject(exports, segments);
       }
     } catch (err) {
+      const alias = segments ? segments[0] : '';
       if (typeof error === 'function') {
-        result = error(err, info);
+        result = error(err, info, alias);
       } else {
-        throw err;
+        throw prettifyError(err, alias, url);
       }
     } finally {
       fetchLoading[urlWithVersion] = null;

diff --git a/packages/runtime/remote-module/src/apis/loadModuleSync.ts b/packages/runtime/remote-module/src/apis/loadModuleSync.ts
@@ -4,6 +4,7 @@ import {
   cacheModules,
   purifyOptions,
   getModuleCode,
+  prettifyError,
 } from '../common';
 import { Actuator } from '../actuator';
 import { processAlias, getValueInObject } from './setModuleConfig';
@@ -55,14 +56,15 @@ export function loadModuleSync(
       if (typeof adapter === 'function') {
         exports = adapter(exports);
       }
-      cacheModules[urlWithVersion] = exports;
       isPromise(exports) && throwWarn(url);
+      cacheModules[urlWithVersion] = exports;
       result = getValueInObject(exports, segments);
     } catch (err) {
+      const alias = segments ? segments[0] : '';
       if (typeof error === 'function') {
-        result = error(err, info);
+        result = error(err, info, alias);
       } else {
-        throw err;
+        throw prettifyError(err, alias, url);
       }
     }
   }

diff --git a/packages/runtime/remote-module/src/common.ts b/packages/runtime/remote-module/src/common.ts
@@ -11,7 +11,7 @@ export interface ModuleInfo {
   cache?: boolean;
   version?: string;
   env?: Record<string, any>;
-  error?: (err: Error, info: ModuleInfo) => any;
+  error?: (err: Error, info: ModuleInfo, alias: string) => any;
   adapter?: (cjsModule: Record<string, any>) => Record<string, any>;
 }
 
@@ -69,6 +69,11 @@ export const loader: Loader = (() => {
   return new Loader();
 })();
 
+export const getModuleCode = (url: string) => {
+  // It should be noted that if there is a redirect, `manager.url` is the url after the redirect
+  return resourcesStore.find((manager) => manager.url === url);
+};
+
 export const purifyOptions = (options: ModuleInfo | string) => {
   assert(options, 'Missing url for loading remote module');
   if (typeof options === 'string') {
@@ -77,7 +82,32 @@ export const purifyOptions = (options: ModuleInfo | string) => {
   return deepMerge(moduleConfig, options) as ModuleInfo;
 };
 
-export const getModuleCode = (url: string) => {
-  // It should be noted that if there is a redirect, `manager.url` is the url after the redirect
-  return resourcesStore.find((manager) => manager.url === url);
+export const prettifyError = (
+  error: Error | string,
+  alias: string,
+  url: string,
+) => {
+  const tipMarkers = [currentApp && currentApp.name, alias, url];
+  let prefix = tipMarkers.reduce((msg, val, i) => {
+    if (!val) return msg;
+    return i === tipMarkers.length - 1
+      ? msg + `"${val}"`
+      : msg + `"${val}" -> `;
+  }, 'remoteModule: ');
+  prefix = ` (${prefix})`;
+
+  if (typeof error === 'number') {
+    error = String(error);
+  }
+  if (typeof error === 'string') {
+    if (!error.endsWith(prefix)) {
+      return `${error}${prefix}`;
+    }
+  }
+  if (error instanceof Error) {
+    if (!error.message.endsWith(prefix)) {
+      error.message = `${error.message}${prefix}`;
+    }
+  }
+  return error;
 };