feat: appinstance add sourcelist

web-infra-dev · May 20, 2021 · f51f729 · f51f729
1 parent c2547dd
commit f51f729
Show file tree

Hide file tree

Showing 11 changed files with 73 additions and 36 deletions.
diff --git a/dev/main/index.html b/dev/main/index.html
@@ -7,6 +7,18 @@
     b { cursor: pointer; }
   </style>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/mobx/5.15.7/mobx.umd.js"></script>
+  <script>
+      // window.addEventListener('unhandledrejection', event => {
+      //   event.promise.catch((e)=>{
+      //     if (e instanceof Error) {
+      //       console.log('main app get error:', event); // 捕获后自定义处理
+      //     }
+      //   })
+      // }, true);
+      // window.addEventListener('error', event => {
+      //   console.log('main app get error:', event); // 捕获后自定义处理
+      // }, true);
+  </script>
 </head>
 <body>
   <div id="MainApp">

diff --git a/dev/main/index.ts b/dev/main/index.ts
@@ -56,6 +56,6 @@ document.getElementById('reactBtn').onclick = async () => {
   // }
 };
 
-setTimeout(() => {
-  throw new Error('main error');
-}, 3000);
+// setTimeout(() => {
+//   throw new Error('main error');
+// }, 3000);
diff --git a/dev/vue/public/index.html b/dev/vue/public/index.html
@@ -16,10 +16,12 @@
       window.addEventListener('unhandledrejection', event => {
         event.promise.catch((e)=>{
         if (e instanceof Error) {
+          console.log('vue app get error:', event); // 捕获后自定义处理
+        }else {
           console.log(e);
         }
       })
-        console.log('unhandledrejection:', event); // 捕获后自定义处理
+        console.log('vue app get error:', event);
       }, true);
       window.addEventListener('error', event => {
         console.log('vue app get error:', event); // 捕获后自定义处理

diff --git a/packages/runtime/browser-vm/src/index.ts b/packages/runtime/browser-vm/src/index.ts
@@ -3,6 +3,7 @@ import {
   assert,
   findProp,
   sourceListTags,
+  sourceNode,
   transformUrl,
   warn,
 } from '@garfish/utils';
@@ -24,24 +25,22 @@ declare module '@garfish/core' {
 
 export default function BrowserVm() {
   return function (Garfish: Garfish): interfaces.Plugin {
-    const appSourceList = new Map();
-
     return {
       name: 'browser-vm',
       version: __VERSION__,
       // Get all the application resources of static address, used to distinguish whether the error is derived from the application
-      processResource(appInfo, manager, _resource) {
-        const sourceList = [];
-        sourceListTags.forEach((tag) => {
-          manager.getVNodesByTagName(tag).forEach((node) => {
-            const url = findProp(node, 'href') || findProp(node, 'src');
-            if (url && url.value) {
-              sourceList.push(transformUrl(manager.opts.url, url.value));
-            }
-          });
-        });
-        appSourceList.set(appInfo.name, sourceList);
-      },
+      // processResource(appInfo, manager, _resource) {
+      //   const sourceList = [];
+      //   sourceListTags.forEach((tag) => {
+      //     manager.getVNodesByTagName(tag).forEach((node) => {
+      //       const url = findProp(node, 'href') || findProp(node, 'src');
+      //       if (url && url.value) {
+      //         sourceList.push(transformUrl(manager.opts.url, url.value));
+      //       }
+      //     });
+      //   });
+      //   appSourceList.set(appInfo.name, sourceList);
+      // },
       afterLoad(appInfo, appInstance) {
         if (appInstance) {
           // existing
@@ -64,7 +63,6 @@ export default function BrowserVm() {
             openSandbox: true,
             strictIsolation: appInstance.strictIsolation,
             protectVariable: () => Garfish.options.protectVariable || [],
-            sourceList: appSourceList.get(appInfo.name),
             insulationVariable: () =>
               webpackAttrs.concat(Garfish.options?.insulationVariable || []),
             modules: {
@@ -76,6 +74,14 @@ export default function BrowserVm() {
                 };
               },
             },
+            hooks: {
+              onAppendNode(sandbox, rootEl, el, tag, oldEl) {
+                if (sourceNode(tag)) {
+                  const url = (oldEl as any)?.src || (oldEl as any)?.href;
+                  url && appInstance.sourceList.push(url);
+                }
+              },
+            },
           });
 
           appInstance.vmSandbox = sandbox;
@@ -89,3 +95,5 @@ export default function BrowserVm() {
     };
   };
 }
+
+export { Sandbox } from './sandbox';
diff --git a/packages/runtime/browser-vm/src/modules/eventListener.ts b/packages/runtime/browser-vm/src/modules/eventListener.ts
@@ -4,21 +4,21 @@ import { Sandbox } from '../sandbox';
 type Opts = boolean | AddEventListenerOptions;
 type Listener = EventListenerOrEventListenerObject;
 
-export function listenerOverride(sandbox: Sandbox) {
+export function listenerOverride(_sandbox: Sandbox) {
   const listeners = new Map<string, Listener[]>();
   const rawAddEventListener = window.addEventListener;
   const rawRemoveEventListener = window.removeEventListener;
 
   function addListener(type: string, listener: Listener, options?: Opts) {
     const curListeners = listeners.get(type) || [];
     listeners.set(type, [...curListeners, listener]);
-    const sourceList = sandbox.options.sourceList;
 
     // This has been revised
     rawAddEventListener.call(
       this,
       type,
-      filterAndWrapEventListener(type, listener, sourceList),
+      // filterAndWrapEventListener(type, listener, sourceList),
+      listener,
       options,
     );
   }

diff --git a/packages/runtime/browser-vm/src/sandbox.ts b/packages/runtime/browser-vm/src/sandbox.ts
@@ -80,7 +80,6 @@ export class Sandbox {
     if (!('openSandbox' in opts)) opts.openSandbox = true;
     if (!('requestConfig' in opts)) opts.requestConfig = {};
     if (!('strictIsolation' in opts)) opts.strictIsolation = true;
-    if (!('sourceList' in opts)) opts.sourceList = null;
 
     initHooks(opts);
     initContainer(opts);

diff --git a/packages/runtime/browser-vm/src/types.ts b/packages/runtime/browser-vm/src/types.ts
@@ -17,7 +17,6 @@ export interface SandboxOptions {
   namespace: string;
   strictIsolation?: boolean;
   useStrict?: boolean;
-  sourceList?: Array<string> | null; // Used to identify the source of the error from the current application, ensure that monitoring can effectively distinguish the source of the current application
   openSandbox?: boolean;
   modules?: Record<string, Module>;
   disabled?: Record<string, boolean>;
@@ -49,8 +48,9 @@ type onInvokeBefore = (sandbox: Sandbox, refs: InvokeBeforeRefs) => void;
 type onAppendNode = (
   sandbox: Sandbox,
   rootEl: Element,
-  el: Element,
+  newEl: Element,
   tag: string,
+  oldEl: Element,
 ) => void;
 
 export interface Hooks {

diff --git a/packages/runtime/browser-vm/src/utils/handleNode.ts b/packages/runtime/browser-vm/src/utils/handleNode.ts
@@ -115,14 +115,6 @@ function addDynamicScript(
     if (src) {
       const requestConfig = filterRequestConfig(src, config);
 
-      // Save all the application resources required for the address
-      if (
-        sandbox.options.sourceList &&
-        !sandbox.options.sourceList.find((item) => src === item)
-      ) {
-        sandbox.options.sourceList.push(src);
-      }
-
       fetch(src, requestConfig)
         .then(processResponse)
         .then((code) => {
@@ -212,7 +204,7 @@ const makeElInjector = (current: Function, method: string) => {
           }
         }
 
-        sandbox.callHook('onAppendNode', [sandbox, rootEl, newNode, tag]);
+        sandbox.callHook('onAppendNode', [sandbox, rootEl, newNode, tag, el]);
 
         if (newNode) {
           // 如果是 insertBefore、insertAdjacentElement 方法

diff --git a/packages/runtime/core/src/interface/index.ts b/packages/runtime/core/src/interface/index.ts
@@ -192,6 +192,7 @@ export namespace interfaces {
     htmlNode: HTMLElement | ShadowRoot;
     isHtmlMode: boolean;
     strictIsolation: boolean;
+    sourceList: Array<string>;
     mount(): Promise<boolean>;
     unmount(): boolean;
     getExecScriptEnv(noEntry: boolean): Record<string, any>;

diff --git a/packages/runtime/core/src/module/app.ts b/packages/runtime/core/src/module/app.ts
@@ -23,6 +23,7 @@ import {
   warn,
   createAppContainer,
   getRenderNode,
+  sourceListTags,
 } from '@garfish/utils';
 import { Garfish } from '../garfish';
 import { interfaces } from '../interface';
@@ -69,6 +70,7 @@ export class App {
   public strictIsolation = false;
   public customLoader: CustomerLoader;
   public global: any = window;
+  public sourceList: Array<string> = [];
 
   constructor(
     context: Garfish,
@@ -94,6 +96,17 @@ export class App {
       require: (_key: string) => null,
     };
     this.customLoader = customLoader;
+
+    sourceListTags.forEach((tag) => {
+      entryResManager.getVNodesByTagName(tag).forEach((node) => {
+        const url = findProp(node, 'href') || findProp(node, 'src');
+        if (url && url.value) {
+          this.sourceList.push(
+            transformUrl(entryResManager.opts.url, url.value),
+          );
+        }
+      });
+    });
   }
 
   get rootElement() {

diff --git a/packages/runtime/utils/src/sentry.ts b/packages/runtime/utils/src/sentry.ts
@@ -139,7 +139,14 @@ export function computeStackTraceFromStackProp(ex: any): StackTrace | null {
   };
 }
 
-export const sourceListTags = ['link', 'img', 'script', 'video', 'audio'];
+export const sourceListTags = [
+  'link',
+  'img',
+  'script',
+  'video',
+  'audio',
+  'style',
+];
 export const sourceNode = makeMap(sourceListTags);
 
 // Calculate the error object file within the address
@@ -176,7 +183,10 @@ export function filterAndWrapEventListener(
         const res = sourceList.find((item) => {
           return item.indexOf(computeErrorUrl(e)) !== -1;
         });
-        res && listener(e);
+        if (res) {
+          e.stopPropagation();
+          listener(e);
+        }
       } else {
         listener(e);
       }