commit 7eb62941455d60b4f59561e4d1a78d8611cf910c
author Fine0830 <fine0830@outlook.com> Mon Jul 26 13:49:40 2021 +0800
committer GitHub <noreply@github.com> Mon Jul 26 13:49:40 2021 +0800
tree 990f32936c35c03a2b974e2434d7447d54769fc1
parent c04f993248659050b2b8829fa1e442eb028b3086

feat: Use Navigation Timing Level 2 to catch perf data (#69)

* feat: use nt2Timing to catch perf data

src/performance/perf.ts

diff --git a/src/performance/perf.ts b/src/performance/perf.ts
index a3ccd85..4b10d3e 100644
--- a/src/performance/perf.ts
+++ b/src/performance/perf.ts
@@ -18,11 +18,14 @@
 class PagePerf {
   public getPerfTiming(): IPerfDetail {
     try {
-      if (!window.performance || !window.performance.timing) {
-        console.log('your browser do not support performance');
-        return;
+      let { timing } = window.performance as PerformanceNavigationTiming | any; // PerformanceTiming
+      if (typeof window.PerformanceNavigationTiming === 'function') {
+        const nt2Timing = performance.getEntriesByType('navigation')[0];
+
+        if (nt2Timing) {
+          timing = nt2Timing;
+        }
       }
-      const { timing } = window.performance;
       let redirectTime = 0;
 
       if (timing.navigationStart !== undefined) {

src/trace/interceptors/fetch.ts

diff --git a/src/trace/interceptors/fetch.ts b/src/trace/interceptors/fetch.ts
index 47d4a39..802a232 100644
--- a/src/trace/interceptors/fetch.ts
+++ b/src/trace/interceptors/fetch.ts
@@ -30,7 +30,7 @@
 } from '../../services/constant';
 
 export default function windowFetch(options: CustomOptionsType, segments: SegmentFields[]) {
-  const origFetch: any = window.fetch;
+  const originFetch: any = window.fetch;
 
   window.fetch = async (...args: any) => {
     const startTime = new Date().getTime();
@@ -65,8 +65,8 @@
         }
       }
     });
-    
-    const collectorURL = new URL(options.collector)
+
+    const collectorURL = new URL(options.collector);
     const hasTrace = !(
       noTrace ||
       (([ReportTypes.ERROR, ReportTypes.ERRORS, ReportTypes.PERF, ReportTypes.SEGMENTS] as string[]).includes(
@@ -96,7 +96,7 @@
 
     let response;
     try {
-      response = await origFetch(...args);
+      response = await originFetch(...args);
 
       return response
         .clone()
@@ -106,7 +106,7 @@
     } catch (e) {
       throw e;
     } finally {
-      if (!response || response.status === 0 || response.status >= 400) {
+      if (response && (response.status === 0 || response.status >= 400)) {
         const logInfo = {
           uniqueId: uuid(),
           service: options.service,
@@ -114,10 +114,10 @@
           pagePath: options.pagePath,
           category: ErrorsCategory.AJAX_ERROR,
           grade: GradeTypeEnum.ERROR,
-          errorUrl: response?.url || `${url.protocol}//${url.host}${url.pathname}`,
-          message: `status: ${response?.status}; statusText: ${response?.statusText};`,
+          errorUrl: (response && response.url) || `${url.protocol}//${url.host}${url.pathname}`,
+          message: `status: ${response ? response.status : 0}; statusText: ${response && response.statusText};`,
           collector: options.collector,
-          stack: 'Fetch: ' + response?.statusText,
+          stack: 'Fetch: ' + response && response.statusText,
         };
         new Base().traceInfo(logInfo);
       }
@@ -130,21 +130,21 @@
           spanId: segment.spans.length,
           spanLayer: SpanLayer,
           spanType: SpanType,
-          isError: !response || response.status === 0 || response.status >= 400, // when requests failed, the status is 0
+          isError: response && (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 || `${url.protocol}//${url.host}${url.pathname}`,
-              },
-            ]
+                {
+                  key: 'http.method',
+                  value: args[1].method || 'GET',
+                },
+                {
+                  key: 'url',
+                  value: (response && response.url) || `${url.protocol}//${url.host}${url.pathname}`,
+                },
+              ]
             : undefined,
         };
         segment = {

src/trace/segment.ts

diff --git a/src/trace/segment.ts b/src/trace/segment.ts
index 19aaaa7..836ef7b 100644
--- a/src/trace/segment.ts
+++ b/src/trace/segment.ts
@@ -33,7 +33,7 @@
     }
     new Report('SEGMENTS', options.collector).sendByXhr(segments);
   };
-  //report per 5min
+  //report per options.traceTimeInterval min
   setInterval(() => {
     if (!segments.length) {
       return;