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/01/09 12:57:13 UTC
[skywalking-client-js] 31/32: feat: trace vue error
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 3bed48f085f033da92c31c68dbc0d49941617b12
Author: Qiuxia Fan <fi...@outlook.com>
AuthorDate: Thu Jan 9 17:49:39 2020 +0800
feat: trace vue error
---
src/errors/index.ts | 4 +++-
src/errors/resource.ts | 40 ++++++++++++++++++----------------
src/errors/{resource.ts => vue.ts} | 44 +++++++++++++++++---------------------
src/monitor.ts | 16 ++++++++------
src/services/base.ts | 18 ++++++++--------
src/types.d.ts | 1 -
6 files changed, 63 insertions(+), 60 deletions(-)
diff --git a/src/errors/index.ts b/src/errors/index.ts
index 8a10f4c..180a7ba 100644
--- a/src/errors/index.ts
+++ b/src/errors/index.ts
@@ -14,11 +14,13 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
+
import JSErrors from './js';
import PromiseErrors from './promise';
import AjaxErrors from './ajax';
import ResourceErrors from './resource';
+import VueErrors from './vue';
export {
- JSErrors, PromiseErrors, AjaxErrors, ResourceErrors,
+ JSErrors, PromiseErrors, AjaxErrors, ResourceErrors, VueErrors,
};
diff --git a/src/errors/resource.ts b/src/errors/resource.ts
index c861357..0db5364 100644
--- a/src/errors/resource.ts
+++ b/src/errors/resource.ts
@@ -21,26 +21,30 @@ import { GradeTypeEnum, ErrorsCategory } from '../services/constant';
class ResourceErrors extends Base {
public handleErrors(options: {reportUrl: string; serviceName: string}) {
window.addEventListener('error', (event) => {
- if (!event) {
- return;
- }
- this.reportUrl = options.reportUrl;
- this.serviceName = options.serviceName;
- const target: any = event.target || event.srcElement;
- const isElementTarget = target instanceof HTMLScriptElement
- || target instanceof HTMLLinkElement || target instanceof HTMLImageElement;
-
- if (!isElementTarget) { // return js error
+ try {
+ if (!event) {
return;
+ }
+ this.reportUrl = options.reportUrl;
+ this.serviceName = options.serviceName;
+ const target: any = event.target || event.srcElement;
+ const isElementTarget = target instanceof HTMLScriptElement
+ || target instanceof HTMLLinkElement || target instanceof HTMLImageElement;
+
+ if (!isElementTarget) { // return js error
+ return;
+ }
+ this.logInfo = {
+ category: ErrorsCategory.RESOURCE_ERROR,
+ grade: target.tagName === 'IMG' ? GradeTypeEnum.WARNING : GradeTypeEnum.ERROR,
+ errorUrl: target.src || target.href,
+ errorInfo: target,
+ message: `load ${target.tagName} resource error`,
+ };
+ this.traceInfo();
+ } catch (error) {
+ throw error;
}
- this.logInfo = {
- category: ErrorsCategory.RESOURCE_ERROR,
- grade: target.tagName === 'IMG' ? GradeTypeEnum.WARNING : GradeTypeEnum.ERROR,
- errorUrl: target.src || target.href,
- errorInfo: target,
- message: `load ${target.tagName} resource error`,
- };
- this.traceInfo();
});
}
}
diff --git a/src/errors/resource.ts b/src/errors/vue.ts
similarity index 53%
copy from src/errors/resource.ts
copy to src/errors/vue.ts
index c861357..76be92c 100644
--- a/src/errors/resource.ts
+++ b/src/errors/vue.ts
@@ -18,30 +18,26 @@
import Base from '../services/base';
import { GradeTypeEnum, ErrorsCategory } from '../services/constant';
-class ResourceErrors extends Base {
- public handleErrors(options: {reportUrl: string; serviceName: string}) {
- window.addEventListener('error', (event) => {
- if (!event) {
- return;
+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;
+ this.logInfo = {
+ category: ErrorsCategory.VUE_ERROR,
+ grade: GradeTypeEnum.ERROR,
+ errorUrl: '',
+ errorInfo: error,
+ message: info,
+ };
+ this.traceInfo();
+ } catch (error) {
+ throw error;
}
- this.reportUrl = options.reportUrl;
- this.serviceName = options.serviceName;
- const target: any = event.target || event.srcElement;
- const isElementTarget = target instanceof HTMLScriptElement
- || target instanceof HTMLLinkElement || target instanceof HTMLImageElement;
-
- if (!isElementTarget) { // return js error
- return;
- }
- this.logInfo = {
- category: ErrorsCategory.RESOURCE_ERROR,
- grade: target.tagName === 'IMG' ? GradeTypeEnum.WARNING : GradeTypeEnum.ERROR,
- errorUrl: target.src || target.href,
- errorInfo: target,
- message: `load ${target.tagName} resource error`,
- };
- this.traceInfo();
- });
+ };
}
}
-export default new ResourceErrors();
+
+export default new VueErrors();
diff --git a/src/monitor.ts b/src/monitor.ts
index 934b711..f912ee8 100644
--- a/src/monitor.ts
+++ b/src/monitor.ts
@@ -16,7 +16,7 @@
*/
import { CustomOptionsType } from './types';
-import { JSErrors, PromiseErrors, AjaxErrors, ResourceErrors } from './errors/index';
+import { JSErrors, PromiseErrors, AjaxErrors, ResourceErrors, VueErrors } from './errors/index';
const ClientMonitor = {
customOptions: {
@@ -24,7 +24,6 @@ const ClientMonitor = {
promiseErrors: true,
consoleErrors: false,
vueErrors: false,
- reactErrors: false,
ajaxErrors: true,
resourceErrors: true,
} as CustomOptionsType,
@@ -32,23 +31,26 @@ const ClientMonitor = {
register(options: CustomOptionsType) {
const { serviceName, reportUrl } = options;
- this.customOptions = options;
+ this.customOptions = {
+ ...this.customOptions,
+ ...options,
+ };
+
if (this.customOptions.jsErrors) {
- this.customOptions.jsErrors = options.jsErrors;
JSErrors.handleErrors({reportUrl, serviceName});
}
if (this.customOptions.promiseErrors) {
- this.customOptions.promiseErrors = options.promiseErrors || this.customOptions.promiseErrors;
PromiseErrors.handleErrors({reportUrl, serviceName});
}
if (this.customOptions.resourceErrors) {
- this.customOptions.resourceErrors = options.resourceErrors;
ResourceErrors.handleErrors({reportUrl, serviceName});
}
if (this.customOptions.ajaxErrors) {
- this.customOptions.ajaxErrors = options.ajaxErrors || this.customOptions.ajaxErrors;
AjaxErrors.handleError({reportUrl, serviceName});
}
+ if (this.customOptions.vueErrors && this.customOptions.vue) {
+ VueErrors.handleErrors({reportUrl, serviceName}, this.customOptions.vue);
+ }
},
};
diff --git a/src/services/base.ts b/src/services/base.ts
index 08fa270..d7f3cea 100644
--- a/src/services/base.ts
+++ b/src/services/base.ts
@@ -62,15 +62,15 @@ export default class Base {
let message = `error category:${this.logInfo.category}\r\n log info:${this.logInfo.message}\r\n
error url: ${this.logInfo.errorUrl}\r\n `;
switch (this.logInfo.category) {
- case ErrorsCategory.JS_ERROR:
- message += `error line number: ${this.logInfo.line}\r\n error col number:${this.logInfo.col}\r\n`;
- if (this.logInfo.errorInfo && this.logInfo.errorInfo.stack) {
- message += `error stack: ${this.logInfo.errorInfo.stack}\r\n`;
- }
- break;
- default:
- message += `other error: ${this.logInfo.errorInfo}\r\n`;
- break;
+ case ErrorsCategory.JS_ERROR:
+ message += `error line number: ${this.logInfo.line}\r\n error col number:${this.logInfo.col}\r\n`;
+ if (this.logInfo.errorInfo && this.logInfo.errorInfo.stack) {
+ message += `error stack: ${this.logInfo.errorInfo.stack}\r\n`;
+ }
+ break;
+ default:
+ message += `other error: ${this.logInfo.errorInfo}\r\n`;
+ break;
}
const recordInfo = {
...this.logInfo,
diff --git a/src/types.d.ts b/src/types.d.ts
index e916ee6..096bfe4 100644
--- a/src/types.d.ts
+++ b/src/types.d.ts
@@ -22,7 +22,6 @@ export interface CustomOptionsType {
promiseErrors: boolean;
consoleErrors: boolean;
vueErrors: boolean;
- reactErrors: boolean;
ajaxErrors: boolean;
resourceErrors: boolean;
}