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 <fine0...@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; }