feat: add isolation resource error test

cypress/integration/2-isolation-monitoring/isolation-resource-error.spec.js

@@ -0,0 +1,68 @@
+/// <reference types="cypress" />
+import { findMultiAndMatch } from '../common';
+
+describe('monitoring the isolation', () => {
+  beforeEach(() => {
+    Cypress.env({
+      garfishRunConfig: {
+        basename: '/garfish-app',
+      },
+    });
+    cy.on('uncaught:exception', () => {
+      return false;
+    });
+    cy.visit('http://localhost:2333/garfish-app/react/monitoring');
+    cy.intercept('POST', '/monitor_browser/collect/batch/', {}).as('post');
+  });
+
+  const MonitoringTitle = 'React sub App Monitoring';
+
+  const resourceRequest = (msg) => {
+    return {
+      payload: {
+        url: msg,
+      },
+    };
+  };
+
+  const resourcePatch = {
+    ev_type: 'resource_error',
+  };
+
+  const resourceMessageMap = {
+    mainJsResource: 'http://localhost:1111/monitoring/xxxxx.js',
+    subAppJsResource: 'http://localhost:0000/monitoring/xxxxx.js',
+  };
+
+  it('subApp resource error isolation', () => {
+    cy.window().then((win) => {
+      cy.contains('[data-test=title]', MonitoringTitle);
+      cy.get('[data-test=click-resource-error]').click();
+
+      findMultiAndMatch(
+        1,
+        resourcePatch,
+        resourceRequest(resourceMessageMap.subAppJsResource),
+        {
+          'payload.url': resourceMessageMap.subAppJsResource,
+        },
+      );
+    });
+  });
+
+  it('mainApp resource error  isolation', () => {
+    cy.window().then((win) => {
+      cy.contains('[data-test=title]', MonitoringTitle);
+      cy.get('[data-test=main-click-resource-error]').click();
+
+      findMultiAndMatch(
+        1,
+        resourcePatch,
+        resourceRequest(resourceMessageMap.mainJsResource),
+        {
+          'payload.url': resourceMessageMap.mainJsResource,
+        },
+      );
+    });
+  });
+});

dev/main/index.html

@@ -63,6 +63,7 @@ <h3> main App content</h3>
         <a data-test="main-click-fetch" onclick="window.fetchM()">fetch</a>、
         <a data-test="main-click-normal-error" onclick="window.normalError()">error</a>、
         <a data-test="main-click-unhandledrejection-error" onclick="window.unhandledrejectionError()">unhandledrejectionError</a>、
+        <a data-test="main-click-resource-error" onclick="window.resourceError()">resourceError</a>、
         <a data-test="main-click-dynamic-resource" onclick="window.DynamicResource()">DynamicResource</a>
       </div>
       <h2 align="center">

dev/main/src/monitoring.ts

@@ -7,6 +7,7 @@ declare global {
     unhandledrejectionError: Function;
     normalError: Function;
     DynamicResource: Function;
+    resourceError: Function;
   }
 }
 
@@ -47,3 +48,10 @@ window.DynamicResource = function DynamicResource() {
   link.href = `http://localhost:${ConfigCommon.mainPort}/monitoring/dynamicLink.css`;
   document.body.appendChild(link);
 };
+
+window.resourceError = function resourceError() {
+  // resource error
+  const sc = document.createElement('script');
+  sc.src = `http://localhost:1111/monitoring/xxxxx.js`;
+  document.body.appendChild(sc);
+};

dev/react/src/components/monitoring.js

@@ -29,6 +29,13 @@ export default function () {
     throw Error('subApp: normal error');
   }
 
+  function resourceError() {
+    // resource error
+    const sc = document.createElement('script');
+    sc.src = `http://localhost:0000/monitoring/xxxxx.js`;
+    document.body.appendChild(sc);
+  }
+
   function DynamicResource() {
     const sc = document.createElement('script');
     sc.src = `http://localhost:${reactPort}/monitoring/dynamicScript.js`;
@@ -80,6 +87,16 @@ export default function () {
         unhandledrejection error
       </Button>
       <br />
+      <Button
+        data-test="click-resource-error"
+        type="primary"
+        danger
+        onClick={() => resourceError()}
+        style={{ marginBottom: '30px' }}
+      >
+        resource error
+      </Button>
+      <br />
     </div>
   );
 }

packages/runtime/browser-vm/src/dynamicNode/processor.ts

@@ -73,6 +73,7 @@ export class DynamicNodeProcessor {
       event.garfish = true;
       Object.defineProperty(event, 'target', { value: this.el });
       this.el.dispatchEvent(event);
+      type === 'error' && window.dispatchEvent(event);
     });
   }