You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@skywalking.apache.org by wu...@apache.org on 2020/08/26 02:53:53 UTC
[skywalking-client-js] 33/48: feat: add performance data
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 <fi...@outlook.com>
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