fix: catch errors for http requests (#62)

Fine0830 · web-flow · commit 39dd1359d78f · 2021-07-06T16:49:06.000+08:00
diff --git a/README.md b/README.md
@@ -101,7 +101,7 @@ app.on('routeChange', function (next) {
 
 ## Tracing range of data requests in the browser
 
-Support tracking these([XMLHttpRequest](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) and [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)) two modes of data requests. At the same time, Support tracking libraries and tools that base on XMLHttpRequest and fetch, such as [Axios](https://github.com/axios/axios), [SuperAgent](https://github.com/visionmedia/superagent), [OpenApi](https://www.openapis.org/) and so on.
+Support tracking these([XMLHttpRequest](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) and [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)) two modes of data requests. At the same time, Support tracking libraries and tools that base on XMLHttpRequest and fetch, such as [Axios](https://github.com/axios/axios), [SuperAgent](https://github.com/visionmedia/superagent), [OpenApi](https://www.openapis.org/) and so on.
 
 ## Catching errors in frames, including React, Angular, Vue.
 
diff --git a/src/errors/ajax.ts b/src/errors/ajax.ts
@@ -22,53 +22,40 @@ import { GradeTypeEnum, ErrorsCategory, ReportTypes } from '../services/constant
 class AjaxErrors extends Base {
   // get http error info
   public handleError(options: { service: string; serviceVersion: string; pagePath: string; collector: string }) {
+    // XMLHttpRequest Object
     if (!window.XMLHttpRequest) {
       return;
     }
-    const xhrSend = XMLHttpRequest.prototype.send;
-    const xhrEvent = (event: any) => {
-      try {
-        if (event && event.currentTarget && (event.currentTarget.status >= 400 || event.currentTarget.status === 0)) {
-          const response = 'net::ERR_EMPTY_RESPONSE';
+    window.addEventListener(
+      'xhrReadyStateChange',
+      (event: CustomEvent<XMLHttpRequest & { getRequestConfig: any[] }>) => {
+        const detail = event.detail;
 
-          if (event.target && event.target.getRequestConfig[1] === options.collector + ReportTypes.ERRORS) {
-            return;
-          }
-          this.logInfo = {
-            uniqueId: uuid(),
-            service: options.service,
-            serviceVersion: options.serviceVersion,
-            pagePath: options.pagePath,
-            category: ErrorsCategory.AJAX_ERROR,
-            grade: GradeTypeEnum.ERROR,
-            errorUrl: event.target.getRequestConfig[1],
-            message: event.target.response || response,
-            collector: options.collector,
-            stack: event.type + ': ' + (event.target.response || response),
-          };
-          this.traceInfo();
+        if (detail.readyState !== 4) {
+          return;
+        }
+        if (detail.getRequestConfig[1] === options.collector + ReportTypes.ERRORS) {
+          return;
+        }
+        if (detail.status !== 0 && detail.status < 400) {
+          return;
         }
-      } catch (error) {
-        console.log(error);
-      }
-    };
 
-    XMLHttpRequest.prototype.send = function () {
-      if (this.addEventListener) {
-        this.addEventListener('error', xhrEvent);
-        this.addEventListener('abort', xhrEvent);
-        this.addEventListener('timeout', xhrEvent);
-      } else {
-        const stateChange = this.onreadystatechange;
-        this.onreadystatechange = function (event: any) {
-          stateChange.apply(this, arguments);
-          if (this.readyState === 4) {
-            xhrEvent(event);
-          }
+        this.logInfo = {
+          uniqueId: uuid(),
+          service: options.service,
+          serviceVersion: options.serviceVersion,
+          pagePath: options.pagePath,
+          category: ErrorsCategory.AJAX_ERROR,
+          grade: GradeTypeEnum.ERROR,
+          errorUrl: detail.getRequestConfig[1],
+          message: `status: ${detail.status}; statusText: ${detail.statusText};`,
+          collector: options.collector,
+          stack: detail.responseText,
         };
-      }
-      return xhrSend.apply(this, arguments);
-    };
+        this.traceInfo();
+      },
+    );
   }
 }
 
diff --git a/src/services/base.ts b/src/services/base.ts
@@ -35,7 +35,8 @@ export default class Base {
     collector: '',
   };
 
-  public traceInfo() {
+  public traceInfo(logInfo?: ErrorInfoFields & ReportFields & { collector: string }) {
+    this.logInfo = logInfo || this.logInfo;
     // mark js error pv
     if (!jsErrorPv && this.logInfo.category === ErrorsCategory.JS_ERROR) {
       jsErrorPv = true;
diff --git a/src/trace/interceptors/fetch.ts b/src/trace/interceptors/fetch.ts
@@ -18,109 +18,134 @@ import { encode } from 'js-base64';
 import uuid from '../../services/uuid';
 import { SegmentFields, SpanFields } from '../type';
 import { CustomOptionsType } from '../../types';
-import { ComponentId, ReportTypes, ServiceTag, SpanLayer, SpanType } from '../../services/constant';
+import Base from '../../services/base';
+import {
+  ComponentId,
+  ReportTypes,
+  ServiceTag,
+  SpanLayer,
+  SpanType,
+  ErrorsCategory,
+  GradeTypeEnum,
+} from '../../services/constant';
 
 export default function windowFetch(options: CustomOptionsType, segments: SegmentFields[]) {
-  const fetch: any = window.fetch;
-  let segment = {
-    traceId: '',
-    service: options.service + ServiceTag,
-    spans: [],
-    serviceInstance: options.serviceVersion,
-    traceSegmentId: '',
-  } as SegmentFields;
-  let url = {} as URL;
+  const origFetch: any = window.fetch;
 
-  window.fetch = (...args) =>
-    (async (args: any) => {
-      const startTime = new Date().getTime();
-      const traceId = uuid();
-      const traceSegmentId = uuid();
+  window.fetch = async (...args: any) => {
+    const startTime = new Date().getTime();
+    const traceId = uuid();
+    const traceSegmentId = uuid();
+    let segment = {
+      traceId: '',
+      service: options.service + ServiceTag,
+      spans: [],
+      serviceInstance: options.serviceVersion,
+      traceSegmentId: '',
+    } as SegmentFields;
+    let url = {} as URL;
 
-      if (args[0].startsWith('http://') || args[0].startsWith('https://')) {
-        url = new URL(args[0]);
-      } else if (args[0].startsWith('//')) {
-        url = new URL(`${window.location.protocol}${args[0]}`);
-      } else {
-        url = new URL(window.location.href);
-        url.pathname = args[0];
-      }
-
-      const noTrace = options.noTraceOrigins.some((rule: string | RegExp) => {
-        if (typeof rule === 'string') {
-          if (rule === url.origin) {
-            return true;
-          }
-        } else if (rule instanceof RegExp) {
-          if (rule.test(url.origin)) {
-            return true;
-          }
-        }
-      });
-      const hasTrace = !(
-        noTrace ||
-        (([ReportTypes.ERROR, ReportTypes.ERRORS, ReportTypes.PERF, ReportTypes.SEGMENTS] as string[]).includes(
-          url.pathname,
-        ) &&
-          !options.traceSDKInternal)
-      );
+    if (args[0].startsWith('http://') || args[0].startsWith('https://')) {
+      url = new URL(args[0]);
+    } else if (args[0].startsWith('//')) {
+      url = new URL(`${window.location.protocol}${args[0]}`);
+    } else {
+      url = new URL(window.location.href);
+      url.pathname = args[0];
+    }
 
-      if (hasTrace) {
-        const traceIdStr = String(encode(traceId));
-        const segmentId = String(encode(traceSegmentId));
-        const service = String(encode(segment.service));
-        const instance = String(encode(segment.serviceInstance));
-        const endpoint = String(encode(options.pagePath));
-        const peer = String(encode(url.host));
-        const index = segment.spans.length;
-        const values = `${1}-${traceIdStr}-${segmentId}-${index}-${service}-${instance}-${endpoint}-${peer}`;
-
-        if (!args[1]) {
-          args[1] = {};
+    const noTrace = options.noTraceOrigins.some((rule: string | RegExp) => {
+      if (typeof rule === 'string') {
+        if (rule === url.origin) {
+          return true;
         }
-        if (!args[1].headers) {
-          args[1].headers = {};
+      } else if (rule instanceof RegExp) {
+        if (rule.test(url.origin)) {
+          return true;
         }
-        args[1].headers['sw8'] = values;
       }
+    });
+    const hasTrace = !(
+      noTrace ||
+      (([ReportTypes.ERROR, ReportTypes.ERRORS, ReportTypes.PERF, ReportTypes.SEGMENTS] as string[]).includes(
+        url.pathname,
+      ) &&
+        !options.traceSDKInternal)
+    );
 
-      const result = await fetch(...args);
+    if (hasTrace) {
+      const traceIdStr = String(encode(traceId));
+      const segmentId = String(encode(traceSegmentId));
+      const service = String(encode(segment.service));
+      const instance = String(encode(segment.serviceInstance));
+      const endpoint = String(encode(options.pagePath));
+      const peer = String(encode(url.host));
+      const index = segment.spans.length;
+      const values = `${1}-${traceIdStr}-${segmentId}-${index}-${service}-${instance}-${endpoint}-${peer}`;
 
-      if (hasTrace) {
-        const endTime = new Date().getTime();
-        const exitSpan: SpanFields = {
-          operationName: options.pagePath,
-          startTime: startTime,
-          endTime,
-          spanId: segment.spans.length,
-          spanLayer: SpanLayer,
-          spanType: SpanType,
-          isError: result.status === 0 || result.status >= 400, // when requests failed, the status is 0
-          parentSpanId: segment.spans.length - 1,
-          componentId: ComponentId,
-          peer: url.host,
-          tags: options.detailMode
-            ? [
-                {
-                  key: 'http.method',
-                  value: args[1].method,
-                },
-                {
-                  key: 'url',
-                  value: result.url,
-                },
-              ]
-            : undefined,
-        };
-        segment = {
-          ...segment,
-          traceId: traceId,
-          traceSegmentId: traceSegmentId,
-        };
-        segment.spans.push(exitSpan);
-        segments.push(segment);
+      if (!args[1]) {
+        args[1] = {};
+      }
+      if (!args[1].headers) {
+        args[1].headers = {};
       }
+      args[1].headers['sw8'] = values;
+    }
+
+    const response = await origFetch(...args);
+    const result = response
+      .clone()
+      .json()
+      .then((body: any) => body)
+      .catch((err: any) => err);
+    const logInfo = {
+      uniqueId: uuid(),
+      service: options.service,
+      serviceVersion: options.serviceVersion,
+      pagePath: options.pagePath,
+      category: ErrorsCategory.AJAX_ERROR,
+      grade: GradeTypeEnum.ERROR,
+      errorUrl: response.url || location.href,
+      message: `status: ${response.status}; statusText: ${response.statusText};`,
+      collector: options.collector,
+      stack: 'Fetch: ' + response.statusText,
+    };
+    new Base().traceInfo(logInfo);
+    if (hasTrace) {
+      const endTime = new Date().getTime();
+      const exitSpan: SpanFields = {
+        operationName: options.pagePath,
+        startTime: startTime,
+        endTime,
+        spanId: segment.spans.length,
+        spanLayer: SpanLayer,
+        spanType: SpanType,
+        isError: response.status === 0 || response.status >= 400, // when requests failed, the status is 0
+        parentSpanId: segment.spans.length - 1,
+        componentId: ComponentId,
+        peer: url.host,
+        tags: options.detailMode
+          ? [
+              {
+                key: 'http.method',
+                value: args[1].method || 'GET',
+              },
+              {
+                key: 'url',
+                value: response.url,
+              },
+            ]
+          : undefined,
+      };
+      segment = {
+        ...segment,
+        traceId: traceId,
+        traceSegmentId: traceSegmentId,
+      };
+      segment.spans.push(exitSpan);
+      segments.push(segment);
+    }
 
-      return result;
-    })(args);
+    return result;
+  };
 }
