[skywalking-client-js] 45/48: refactor: update type and notes

[wu...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

wusheng pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/skywalking-client-js.git

commit e95bbb77cf325de73de41d7258c1017a9bac3635
Author: Qiuxia Fan <fi...@outlook.com>
AuthorDate: Fri Aug 7 18:31:55 2020 +0800

    refactor: update type and notes
---
 src/monitor.ts           |  2 --
 src/performance/fmp.ts   | 20 ++++++++++++++------
 src/performance/index.ts |  3 ++-
 src/types.d.ts           | 12 +-----------
 4 files changed, 17 insertions(+), 20 deletions(-)

diff --git a/src/monitor.ts b/src/monitor.ts
index 1563a92..9c2d762 100644
--- a/src/monitor.ts
+++ b/src/monitor.ts
@@ -22,8 +22,6 @@ import Performance from './performance/index';
 const ClientMonitor = {
   customOptions: {
     jsErrors: true,
-    promiseErrors: true,
-    vueErrors: false,
     apiErrors: true, // ajax promise
     resourceErrors: true,
     autoTracePerf: true,
diff --git a/src/performance/fmp.ts b/src/performance/fmp.ts
index ae5f1ac..9146a50 100644
--- a/src/performance/fmp.ts
+++ b/src/performance/fmp.ts
@@ -23,7 +23,7 @@ const getStyle = (element: Element | any, attr: any) => {
     return element.currentStyle[attr];
   }
 };
-
+// element weight for calculate score
 enum ELE_WEIGHT {
   SVG = 2,
   IMG = 2,
@@ -38,20 +38,24 @@ const IGNORE_TAG_SET: string[] = ['SCRIPT', 'STYLE', 'META', 'HEAD', 'LINK'];
 const LIMIT: number = 3000;
 const WW: number = window.innerWidth;
 const WH: number = window.innerHeight;
-const DELAY: number = 500;
+const DELAY: number = 500; // fmp retry interval
 
 class FMPTiming {
   public fmpTime: number = 0;
-  private statusCollector: Array<{time: number}> = [];
+  private statusCollector: Array<{time: number}> = []; // nodes change time
   private flag: boolean = true;
   private observer: MutationObserver = null;
   private callbackCount: number = 0;
   private entries: any = {};
 
   constructor() {
+    if (!performance || !performance.getEntries) {
+      console.log('your browser do not support performance.getEntries');
+      return;
+    }
     this.initObserver();
   }
-  private getFirstSnapShot(): void {
+  private getFirstSnapShot() {
     const time: number = performance.now();
     const $body: HTMLElement = document.body;
     if ($body) {
@@ -74,10 +78,12 @@ class FMPTiming {
         time,
       });
     });
+    // observe all child nodes
     this.observer.observe(document, {
       childList: true,
       subtree: true,
     });
+    // calculate score when page loaded
     if (document.readyState === 'complete') {
       this.calculateFinalScore();
     } else {
@@ -89,11 +95,12 @@ class FMPTiming {
   private calculateFinalScore() {
     if (MutationEvent && this.flag) {
       if (this.checkNeedCancel(START_TIME)) {
+        // cancel observer for dom change
         this.observer.disconnect();
         this.flag = false;
         const res = this.getTreeScore(document.body);
         let tp: ICalScore = null;
-        res.dpss.forEach((item: any) => {
+        for (const item of res.dpss) {
           if (tp && tp.st) {
             if (tp.st < item.st) {
               tp = item;
@@ -101,7 +108,7 @@ class FMPTiming {
           } else {
             tp = item;
           }
-        });
+        }
         performance.getEntries().forEach((item: PerformanceResourceTiming) => {
           this.entries[item.name] = item.responseEnd;
         });
@@ -261,6 +268,7 @@ class FMPTiming {
     }
     return (overlapX * overlapY) / (width * height);
   }
+  // Depth first traversal to mark nodes
   private setTag(target: Element, callbackCount: number): void {
     const tagName: string = target.tagName;
     if (IGNORE_TAG_SET.indexOf(tagName) === -1) {
diff --git a/src/performance/index.ts b/src/performance/index.ts
index 68b548f..db2ebd4 100644
--- a/src/performance/index.ts
+++ b/src/performance/index.ts
@@ -35,7 +35,7 @@ class TracePerf {
         fmp = await new FMP();
       }
     }
-
+    // auto report pv and perf data
     setTimeout(() => {
       const perfInfo = {
         perfDetail: options.autoTracePerf ? {
@@ -48,6 +48,7 @@ class TracePerf {
         serviceId: options.serviceId,
       };
       new Report(options.reportUrl).sendByXhr(perfInfo);
+      // clear perf data
       this.clearPerf();
     }, 5000);
   }
diff --git a/src/types.d.ts b/src/types.d.ts
index c8edcae..d4083b2 100644
--- a/src/types.d.ts
+++ b/src/types.d.ts
@@ -18,23 +18,13 @@
 export interface CustomOptionsType {
   reportUrl: string;
   serviceName?: string;
-  pageId: '',
+  pageId: string,
   versionId: string;
   serviceId: string;
   jsErrors: boolean;
-  promiseErrors: boolean;
-  consoleErrors: boolean;
-  vueErrors: boolean;
   apiErrors: boolean;
   resourceErrors: boolean;
   autoTracePerf: boolean;
   traceResource: boolean;
   useFmp: boolean;
 }
-export type CustomPerfOptionsType = {
-  pageId: string;
-  reportUrl: string;
-  serviceName: string;
-  serviceId: string;
-  versionId: string;
-}
\ No newline at end of file