Fix theFMP metric (#154)

Author: Fine0830

src/performance/fmp.ts

@@ -115,8 +115,7 @@ class FMPTiming {
         return false;
       }
       const resultEls: ElementList = this.filterResult(tp.els);
-      const fmpTiming: number = this.getFmpTime(resultEls);
-      this.fmpTime = fmpTiming;
+      this.fmpTime = this.getFmpTime(resultEls);
     } else {
       setTimeout(() => {
         this.calculateFinalScore();
@@ -288,4 +287,4 @@ class FMPTiming {
   }
 }
 
-export default FMPTiming;
+export default new FMPTiming();

src/performance/index.ts

@@ -30,6 +30,9 @@ import {handleInteractionEntry, clearInteractions, getLongestInteraction, DEFAUL
 
 const handler = {
   set(target: {[key: string]: unknown}, prop: string, value: unknown) {
+    if (target[prop] !== undefined) {
+      return true
+    }
     target[prop] = value;
     const source: {[key: string]: unknown} = {
       ...target,
@@ -110,17 +113,18 @@ class TracePerf {
     }
     new Report('RESOURCES', this.options.collector).sendByBeacon(list);
   }
-  private async getCorePerf() {
-    if (this.options.useWebVitals) {
-      this.LCP();
-      this.INP();
-      this.CLS();
-      const {fmpTime} = await new FMP();
-      this.coreWebMetrics.fmpTime = Math.floor(fmpTime);
+  private getCorePerf() {
+    if (!this.options.useWebVitals) {
+      return;
     }
+    this.LCP();
+    this.INP();
+    this.CLS();
+    setTimeout(() => {
+      this.coreWebMetrics.fmpTime = Math.floor(FMP.fmpTime);
+    }, 5000);
   }
   private CLS() {
-    let clsTime = 0;
     let partValue = 0;
     let entryList: LayoutShift[] = [];
 
@@ -142,7 +146,7 @@ class TracePerf {
           entryList.push(entry);
         }
       });
-      if (partValue > clsTime) {
+      if (partValue > 0) {
         this.coreWebMetrics.clsTime = Math.floor(partValue);
       }
     };

test/docker/index.js

@@ -15,30 +15,33 @@
  * limitations under the License.
  */
 import ClientMonitor from 'skywalking-client-js';
-import Vue from 'vue';
 
 ClientMonitor.register({
   service: 'test-ui',
   pagePath: 'index.html',
   serviceVersion: 'v1.0.0',
-  vue: Vue,
   traceTimeInterval: 2000,
 });
 
-// vue error
-new Vue({
-  methods: {
-    test() {
-      throw {
-        msg: 'vue error',
-        status: 3000
-      }
-    }
-  },
-  created() {
-    this.test();
-  }
-})
+// promise error
+function foo() {
+  Promise.reject({
+    message: 'promise test',
+    stack: 'promise error'
+  });
+}
+foo();
+function timeout() {
+  return new Promise((resolve, reject) => {
+    setTimeout(() => Math.random() > 0.5 ?
+    resolve() :
+    reject({
+      message: 'timeout test',
+      stack: 2000
+    }), 500)
+  })
+}
+timeout();
 
 fetch('http://provider:9091/info', {
   method: 'POST',

test/expected/error-log.yml

@@ -23,8 +23,8 @@ logs:
   message: {{ notEmpty .message }}
   line: 0
   col: 0
-  stack: ""
-  errorurl: http://testui/
+  stack: {{ .stack }}
+  errorurl: {{ notEmpty .errorurl }}
   firstreportederror: {{ .firstreportederror }}
 {{- end }}
 total: {{ gt .total 0 }}