bmfe-monitor/src/debug.js

前端监测平台

import xhr from './xhr'
import Report from './report';

let report = new Report()
// 这里只处理资源错误
window.addEventListener('error',function(e, scriptURI, lineNumber, columnNumber, errorObj){
    debugger
    var typeName = e.target.localName;
    var sourceUrl = "";
    if (typeName === "link") {
        sourceUrl = e.target.href;
    } else if (typeName === "script" || typeName === "img") {
        sourceUrl = e.target.src;
    } else {
        // 说明不是资源错误
        return
    }
    let path = e.path || (e.composedPath && e.composedPath());

    let obj = {
        type: 'resourceError',
        tagName: e.target.tagName,
        outerHTML: e.target.outerHTML,
        sourceUrl,
        // XPath: path
    }
    var o = new XMLHttpRequest;
    o.open("HEAD", sourceUrl)
    o.send()
    o.onload = function (e) {
        if(200 !== e.target.status) {
            obj.status = e.target.status,
            obj.statusText = e.target.statusText
            report.send(obj)
        }
    }
}, true);

// 监听promise错误，但是兼容性不好，Firefox和IE旧版本不支持
window.addEventListener("unhandledrejection", function(e){
    debugger
    let reason = e.reason;
    // 如果错误信息中包含msg和resCode字段，可以认为是接口错误，不处理
    if(reason.msg || reason.resCode) return
    report.send({
        type: e.type || 'unhandledrejection',
        reason
    })
});

window.onerror = function(e) {
    debugger
}

let formatError = (errObj) => {
    let col = errObj.column || errObj.columnNumber; // Safari Firefox
    let row = errObj.line || errObj.lineNumber; // Safari Firefox
    let message = errObj.message;
    let stackCol = null;
    let stackRow = null;

    let { stack } = errObj;
    if (stack) {
        let matchUrl = stack.match(/https?:\/\/[^\n]+/);
        let urlFirstStack = matchUrl ? matchUrl[0] : '';
        let posStack = urlFirstStack.match(/:(\d+):(\d+)/);
        if (posStack && posStack.length >= 3) {
            [, stackRow, stackCol] = posStack;
        }
    }
    // TODO formatStack
    return {
        type: 'caught',
        col: Number(col || stackCol),
        row: Number(row || stackRow),
        message: message
    }
};

const init = (vue,config) => {
    report.init(config)
    vue.config.errorHandler = function (err, vm, info) {
        let errObj = formatError(err)
        report.send(errObj)
    }
    // 请求都被promise包裹，怎么区分，学习fundebug的做法
    xhr.init((xhrInfo) => {
        report.send(xhrInfo)
    });
}

export default {
    init
}