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 <[email protected]> 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
