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 85b1865b40e27cbc57915e23c6146cf01f06288d Author: Qiuxia Fan <[email protected]> AuthorDate: Sun Feb 9 18:52:16 2020 +0800 feat: add performance data --- src/errors/vue.ts | 1 - src/monitor.ts | 13 +++++++++++- src/performance/index.ts | 55 ++++++++++++++++++++++++++++++++++++++++++++++++ src/performance/perf.ts | 55 ++++++++++++++++++++++++++++++++++++++++++++++++ src/services/constant.ts | 4 ---- src/types.d.ts | 5 +++++ 6 files changed, 127 insertions(+), 6 deletions(-) diff --git a/src/errors/vue.ts b/src/errors/vue.ts index 76be92c..e1f55ab 100644 --- a/src/errors/vue.ts +++ b/src/errors/vue.ts @@ -21,7 +21,6 @@ import { GradeTypeEnum, ErrorsCategory } from '../services/constant'; class VueErrors extends Base { public handleErrors(options: {reportUrl: string; serviceName: string}, Vue: any) { Vue.config.errorHandler = (error: Error, vm: any, info: string) => { - console.log(error); try { this.reportUrl = options.reportUrl; this.serviceName = options.serviceName; diff --git a/src/monitor.ts b/src/monitor.ts index f912ee8..bf0d567 100644 --- a/src/monitor.ts +++ b/src/monitor.ts @@ -15,8 +15,9 @@ * limitations under the License. */ -import { CustomOptionsType } from './types'; +import { CustomOptionsType, CustomPerfOptionsType } from './types'; import { JSErrors, PromiseErrors, AjaxErrors, ResourceErrors, VueErrors } from './errors/index'; +import Performance from './performance/index'; const ClientMonitor = { customOptions: { @@ -28,6 +29,12 @@ const ClientMonitor = { resourceErrors: true, } as CustomOptionsType, + customPerfOptions: { + pageId: '', + serviceName: '', + reportUrl: '', + } as CustomPerfOptionsType, + register(options: CustomOptionsType) { const { serviceName, reportUrl } = options; @@ -52,6 +59,10 @@ const ClientMonitor = { VueErrors.handleErrors({reportUrl, serviceName}, this.customOptions.vue); } }, + + tracePerfDetail(options: any) { + Performance.recordPerf(options); + }, }; export default ClientMonitor; diff --git a/src/performance/index.ts b/src/performance/index.ts new file mode 100644 index 0000000..a331236 --- /dev/null +++ b/src/performance/index.ts @@ -0,0 +1,55 @@ + +/** + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { CustomPerfOptionsType } from '../types'; +import Report from '../services/report'; +import pagePerf from './perf'; + +class TracePerf { + private isPerf: boolean = true; + private perfConfig = { + resources: [], + perfDetail: {}, + } as any; + + public recordPerf(options: CustomPerfOptionsType) { + if (this.isPerf) { + this.perfConfig.performance = pagePerf.getPerfTiming(); + } + const perfInfo = { + perfDetail: this.perfConfig.perfDetail, + resources: this.perfConfig.resources, + ...options, + }; + new Report(options.reportUrl).sendByXhr(perfInfo); + this.clearPerf(); + } + + private clearPerf() { + if (!(window.performance && window.performance.clearResourceTimings)) { + return; + } + window.performance.clearResourceTimings(); + this.perfConfig = { + resources: [], + perfDetail: {}, + }; + } +} + +export default new TracePerf(); diff --git a/src/performance/perf.ts b/src/performance/perf.ts new file mode 100644 index 0000000..0a2f73e --- /dev/null +++ b/src/performance/perf.ts @@ -0,0 +1,55 @@ + +/** + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +class PagePerf { + + public getPerfTiming() { + try { + if (!window.performance || !window.performance.timing) { + console.log('your browser do not support performance'); + return; + } + const { timing } = window.performance; + const loadTime = timing.loadEventEnd - timing.loadEventStart; + if (loadTime < 0) { + setTimeout(() => { + this.getPerfTiming(); + }, 300); + return; + } + const perfTime = { + redirectTime: timing.redirectEnd - timing.redirectStart, + dnsTime: timing.domainLookupEnd - timing.domainLookupStart, + ttfbTime: timing.responseStart - timing.navigationStart, + appcacheTime: timing.domainLookupStart - timing.fetchStart, + unloadTime: timing.unloadEventEnd - timing.unloadEventStart, + tcpTime: timing.connectEnd - timing.connectStart, + reqTime: timing.responseEnd - timing.responseStart, + analysisTime: timing.domComplete - timing.domInteractive, + blankTime: timing.domLoading - timing.navigationStart, + domReadyTime: timing.domContentLoadedEventEnd - timing.navigationStart, + loadPage: timing.loadEventEnd - timing.navigationStart, + }; + return perfTime; + } catch (e) { + throw e; + } + } +} + +export default new PagePerf(); diff --git a/src/services/constant.ts b/src/services/constant.ts index 8a1b711..51c2b4b 100644 --- a/src/services/constant.ts +++ b/src/services/constant.ts @@ -20,10 +20,6 @@ export enum ErrorsCategory { VUE_ERROR = 'vueError', PROMISE_ERROR = 'promiseError', JS_ERROR = 'jsError', - CONSOLE_INFO = 'consoleInfo', - CONSOLE_WARN = 'consoleWarn', - CONSOLE_ERROR = 'consoleError', - CROSS_SCRIPT_ERROR = 'crossSrciptError', UNKNOW_ERROR = 'unknowError', } export enum GradeTypeEnum { diff --git a/src/types.d.ts b/src/types.d.ts index 096bfe4..61dc7c8 100644 --- a/src/types.d.ts +++ b/src/types.d.ts @@ -25,3 +25,8 @@ export interface CustomOptionsType { ajaxErrors: boolean; resourceErrors: boolean; } +export type CustomPerfOptionsType = { + pageId: string; + reportUrl: string; + serviceName: string; +} \ No newline at end of file
