前端监控之JavaScript错误

一、意义：
  JavaScript报错严重影响业务逻辑，比如点击后js报错用户将操作不了，用户会觉得卡死，渲染JS报错将导致用户看到的页面异常，所以JS报错后果也是很严重的。为了应付用户线上环境各种异常，监控JavaScript报错也是很有必要

二、捕获方法：
首先要明确一点，所有错误都需要被window.onerror接收，因为该方法能解析出错误消息、错误文件、行、列、错误栈，通过这些信息为后面通过sourcemap还原源代码有重要作用。
1、通过window.onerror捕获JS事件队列错误

window.onerror = function (msg: string, file: string, line: number, column: number, err: Error) {
    const stack = getStackMsg(err);
    reportError({msg, file, line, column, stack});
    return false;
};

2、通过window.onunhandledrejection捕获Promise未捕获的报错，并抛出

window.onunhandledrejection = function(event: PromiseRejectionEvent) {
    if (event.reason instanceof Error) {
        throw event.reason;
    }
};

3、通过Vue.config.errorHandler捕获vue项目报错，并抛出

Vue.config.errorHandler = function (err: ErrorEvent) {
    setTimeout(() => {
        throw err;
    });
}

三、上报参数：
window.onerror上报以下参数：
  1、path: string // 页面url
  2、msg: string // 错误消息
  3、file: string // 错误文件
  4、line: number // 错误行
  5、column: number // 错误列
  6、stack?: undefined|string // 错误堆栈
后面根据错误文件、行、列还原源代码

更快捷更准确接入前端监控