feat: add isolation error http request and resource monitoring

cypress/integration/1-the-whole-process/isolation-monitoring.spec.js → cypress/integration/2-isolation-monitoring/isolation-error.spec.js

@@ -1,13 +1,11 @@
 /// <reference types="cypress" />
 import { findMultiAndMatch } from '../common';
 
-const basename = '/garfish-app';
-
 describe('monitoring the isolation', () => {
   beforeEach(() => {
     Cypress.env({
       garfishRunConfig: {
-        basename: basename,
+        basename: '/garfish-app',
       },
     });
     cy.visit('http://localhost:2333/garfish-app/react/monitoring');

cypress/integration/2-isolation-monitoring/isolation-http-request.spec.js

@@ -0,0 +1,100 @@
+/// <reference types="cypress" />
+import { findMultiAndMatch } from '../common';
+
+describe('monitoring the isolation', () => {
+  beforeEach(() => {
+    Cypress.env({
+      garfishRunConfig: {
+        basename: '/garfish-app',
+      },
+    });
+    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 httpRequest = (msg) => {
+    return {
+      payload: {
+        request: {
+          url: msg,
+        },
+      },
+    };
+  };
+
+  const httpPatch = {
+    ev_type: 'http',
+  };
+  const httpMessageMap = {
+    mainAppXhrRequest: 'http://localhost:2333/mainApp',
+    mainAppFetchRequest: 'http://localhost:2333/fetch/mainApp',
+    subAppXhrRequest: 'http://localhost:2444/subApp',
+    subAppFetchRequest: 'http://localhost:2444/fetch/subApp',
+  };
+
+  it('subApp xhr http request isolation', () => {
+    cy.window().then((win) => {
+      cy.contains('[data-test=title]', MonitoringTitle);
+      cy.get('[data-test=click-fetch]').click();
+
+      findMultiAndMatch(
+        1,
+        httpPatch,
+        httpRequest(httpMessageMap.subAppXhrRequest),
+        {
+          'payload.request.url': httpMessageMap.subAppXhrRequest,
+        },
+      );
+    });
+  });
+
+  it('subApp fetch http request isolation', () => {
+    cy.window().then((win) => {
+      cy.contains('[data-test=title]', MonitoringTitle);
+      cy.get('[data-test=click-fetch]').click();
+
+      findMultiAndMatch(
+        1,
+        httpPatch,
+        httpRequest(httpMessageMap.subAppFetchRequest),
+        {
+          'payload.request.url': httpMessageMap.subAppFetchRequest,
+        },
+      );
+    });
+  });
+
+  it('mainApp xhr http request isolation', () => {
+    cy.window().then((win) => {
+      cy.contains('[data-test=title]', MonitoringTitle);
+      cy.get('[data-test=main-click-fetch]').click();
+
+      findMultiAndMatch(
+        0,
+        httpPatch,
+        httpRequest(httpMessageMap.mainAppXhrRequest),
+        {
+          'payload.request.url': httpMessageMap.mainAppXhrRequest,
+        },
+      );
+    });
+  });
+
+  it('mainApp fetch http request isolation', () => {
+    cy.window().then((win) => {
+      cy.contains('[data-test=title]', MonitoringTitle);
+      cy.get('[data-test=main-click-fetch]').click();
+
+      findMultiAndMatch(
+        0,
+        httpPatch,
+        httpRequest(httpMessageMap.mainAppFetchRequest),
+        {
+          'payload.request.url': httpMessageMap.mainAppFetchRequest,
+        },
+      );
+    });
+  });
+});

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

@@ -0,0 +1,67 @@
+/// <reference types="cypress" />
+import { findMultiAndMatch } from '../common';
+
+describe('monitoring the isolation', () => {
+  beforeEach(() => {
+    Cypress.env({
+      garfishRunConfig: {
+        basename: '/garfish-app',
+      },
+    });
+    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: {
+        name: msg,
+      },
+    };
+  };
+
+  const resourcePatch = {
+    ev_type: 'resource',
+  };
+
+  const resourceMessageMap = {
+    mainJsResource: 'http://localhost:2333/monitoring/dynamicScript.js',
+    mainAppFetchRequest: 'http://localhost:2333/fetch/mainApp',
+    subAppJsResource: 'http://localhost:2444/monitoring/dynamicScript.js',
+    subAppFetchRequest: 'http://localhost:2444/fetch/subApp',
+  };
+
+  it('subApp resource isolation', () => {
+    cy.window().then((win) => {
+      cy.contains('[data-test=title]', MonitoringTitle);
+      cy.get('[data-test=click-dynamic-resource]').click();
+
+      findMultiAndMatch(
+        1,
+        resourcePatch,
+        resourceRequest(resourceMessageMap.subAppJsResource),
+        {
+          'payload.name': resourceMessageMap.subAppJsResource,
+        },
+      );
+    });
+  });
+
+  it('mainApp resource isolation', () => {
+    cy.window().then((win) => {
+      cy.contains('[data-test=title]', MonitoringTitle);
+      cy.get('[data-test=main-click-dynamic-resource]').click();
+
+      findMultiAndMatch(
+        0,
+        resourcePatch,
+        resourceRequest(resourceMessageMap.mainJsResource),
+        {
+          'payload.name': resourceMessageMap.mainJsResource,
+        },
+      );
+    });
+  });
+});