前端错误收集脚本

前端错误分为 JS 运行时错误、接口错误、资源加载错误三种。
对于前端的异常捕获，我们都会知道 onerror 事件(当然还有 try，catch)，但针对 window 的 error 事件的用法，其实是有区别的

window.onerror = handleOnError

1. 能捕获到 js 执行错误，不能捕获带有 src 的标签元素的加载错误。

2. 参数对应 5 个值（错误信息，所在文件，行，列，错误信息）

3. 函数体内用 return true 可以不让异常信息输出到控制台

window.addEventListener

1. 为捕获状态时（第三个参数为 true）能捕获到 js 执行错误，也能捕获带有 src 的标签元素的加载错误。

2. 为冒泡状态时（第三个参数为 false）能捕获到 js 执行错误，不能捕获带有 src 的标签元素的加载错误。

3. 参数对应 1 个值，异常事件，错误信息都在里面

4. 函数体内用 e.preventDefault() 可以不让异常信息输出到控制台

注：如果 script 的 src 是非同源的跨域引用则需在标签上加 crossorigin 参数，并且配置一下服务器设置静态资源 Javascript 的 Response 为Access-Control-Allow-Origin:\*才可以。

本次我们项目中使用的就是 window.addEventListener 来捕获错误

核心代码如下

监听前端异常事件，用于捕获错误
window.addEventListener('error', e => errorHandler(e), true);

api接口错误先行处理
const apiErrorHandler = error => {
    if (error.response.status !== 400) {
        let _err = {
            errType: '接口错误',
            errCode: error.response.data.errorCode,
            message: error.response.data.errMsg,
            APIURL: error.config.url,
            data: error.config.data,
            statusCode: error.response.status
        };
        errorHandler(_err);
    }
};

【code、api】异常收集处理函数
const errorHandler = (e, t) => {
    要收集的信息对象
    let basicInfo = {
        errType: e.errType || '代码错误',
        createDate: '',
        projectId: 10003,
        projectName: document.title,
        projectUrl: window.location.href,
        stack: '',
        fileName: '',
        message: '',
        cookies: JSON.stringify(document.cookie),
        localStorage: JSON.stringify(window.localStorage),
        sessionStorage: JSON.stringify(window.sessionStorage),
        设备信息
        ..._AgentInfo._init()
    };
    basicInfo.createDate = formatDate(new Date(), 'YYYY-MM-DD HH:mm:ss');
    收集【接口请求错误】
    if (e.errType) {
        basicInfo.message = e.message;
        basicInfo.errCode = e.errCode;
        basicInfo.APIURL = e.APIURL;
        basicInfo.data = e.data;
        basicInfo.statusCode = e.statusCode;
        delete basicInfo.fileName;
    } else {
        收集【非接口请求错误】
        if (t) {
            Vue 报错机制
            basicInfo.stack = e.stack;
            basicInfo.message = e.message;
        } else {
            Window 报错机制
            if (e.target.localName) {
                if (e.target.localName === 'img') {
                    img[src]：图片请求链接错误监控
                    basicInfo.message = 'Image Not Found: ' + e.target.src;
                    basicInfo.errType = '资源引入错误';
                }
            } else {
                收集【运行时js错误】
                let { message, filename, error } = e;
                if (error) basicInfo.stack = error.stack;
                basicInfo.message = message;
                basicInfo.fileName = filename;
            }
        }
    }

    发送请求，将错误数据保存到数据库
    _ajax({
        method: 'POST',
        url: 'https://t.finlean.top/frontLogApi/saveError',
        data: basicInfo
    });
};

完整错误收集脚本可在这里查看，欢迎查漏补缺