【sls监控】前端sls日志监控

实际差不多就这样

//npm
npm i alife-logger



//cdn
<script>
!(function(c,b,d,a){c[a]||(c[a]={});c[a].config={pid:"站点唯一ID"};
with(b)with(body)with(insertBefore(createElement("script"),firstChild))setAttribute("crossorigin","",src=d)
})(window,document,"https://retcode.alicdn.com/retcode/bl.js","__bl");
</script>



//使用
const BrowerLogger = require('alife-logger');

//初始化
BrowerLogger.singleton({
    pid: "sls创建的应用id",
    appType: "web",
    imgUrl: "https://arms-retcode.aliyuncs.com/r.png?",
    sendResource: true,
    enableLinkTrace: true,
    behavior: true,
    ignore: {
        ignoreApis: [
            // 'api1','api2','api3', // 字符串
            // /^random/,  // 正则表达式
            function (str) { // 方法
                // console.log('str:',str)
                const conditions = ['amap.com', 'sockjs-node', 'hot-update.json'];
                if (str && conditions.some(condition => str.includes(condition))) {
                    return true; // 不上报
                }
                return false;   // 上报
            }]
    }
})


//全局监控方法
const windowMonitoring = ()=>{
    // 全局统一处理Promise
    window.addEventListener("unhandledrejection", function (e) {
        // console.log('捕获到异常：', e);
        // var props = {
        //     pid: 'sls创建的应用id', //新实例需要上报的站点
        //     region: 'cn',
        //     page: '',
        //     uid: '',
        // }
        // const bl2 = BrowerLogger.createExtraInstance(props); // 通过createExtraInstance 创建实例
        // bl2.custom({
        //     key: errorKey,
        //     msg: message,
        //     error: error,
        //     lineno: lineno,
        //     colno: colno,
        //     source: source,
        //     type: "PageFullyLoadedFailed",
        //     pageName: ''//页面路径
        // })
    });

    // 图片、script、css加载错误，都能被捕获 
    window.addEventListener('error', (error) => {
        // console.log('捕获到异常：', error);
             // console.log('捕获到异常：', e);
        // console.log('页面白屏处理逻辑');
        // var props = {
        //     pid: '', //新实例需要上报的站点
        //     region: 'cn',
        //     page: '',
        //     uid: '',
        // }
        // const bl2 = BrowerLogger.createExtraInstance(props); // 通过createExtraInstance 创建实例
        // bl2.custom({
        //     key: errorKey,
        //     msg: message,
        //     error: error,
        //     lineno: lineno,
        //     colno: colno,
        //     source: source,
        //     type: "PageFullyLoadedFailed",
        //     pageName: “”//页面路径
        // })
        // console.log('白屏了赶紧发个告警通知先')
    }, true)

    /**
    * @param {String}  message    错误信息  
    * @param {String}  source    出错文件
    * @param {Number}  lineno    行号
    * @param {Number}  colno    列号
    * @param {Object}  error  Error对象
    */
    // 常规运行时错误，可以捕获  异步错误，可以捕获
    window.onerror = function (message, source, lineno, colno, error) {
        if (onerrorMsg == message) {
            return
        }
        onerrorMsg = message
        
        console.log('捕获到异常：', { message, source, lineno, colno, error });

        var errorList = [
            "Uncaught ReferenceError",
            "Uncaught Syntaxerror",
            "Uncaught RangeError",
            'Uncaught Error',
            'Uncaught TypeError',
        ];

        let errorKey = message.split(' ')[1]
        console.log('页面白屏处理逻辑');
        // 检查错误类型或错误消息
        if (error instanceof Error && errorList.some((errorMsg) => message.includes(errorMsg))) {
            // 执行处理页面白屏的逻辑
            console.log('页面白屏处理逻辑');
            var props = {
                pid: 'sls创建的应用id', //新实例需要上报的站点
                region: 'cn',
                page: '',
                uid: '',
            }
            const bl2 = BrowerLogger.createExtraInstance(props); // 通过createExtraInstance 创建实例
            bl2.custom({
                key: errorKey,
                msg: message,
                error: error,
                lineno: lineno,
                colno: colno,
                source: source,
                type: "PageFullyLoadedFailed",
                pageName: “”//页面路径
            })
            console.log('白屏了赶紧发个告警通知先')

        }
    }

    // 使用 DOMContentLoaded 事件，仅在 DOM 结构加载完成后触发
    document.addEventListener('DOMContentLoaded', function () {
        console.log('DOM content loaded');
    });

    // 使用 load 事件，当页面上的所有资源（如图片、样式表等）都加载完成后触发
    window.addEventListener('load', function () {
        console.log('Page fully loaded:');
        console.log('页面加载完毕');
        var props = {
            pid: 'sls创建的应用id', //新实例需要上报的站点
            region: 'cn',
            page: '',
            uid: ''
        }
        const bl2 = BrowerLogger.createExtraInstance(props); // 通过createExtraInstance 创建实例
        bl2.custom({
            type: "PageFullyLoadedSuccess",
            pageName: “”,//页面路径
        })

    });
}


//上报用户action
export const customUserAction = (action)=>{
     var props = {
        pid: 'sls创建的应用id', //新实例需要上报的站点
        region: 'cn',
        page: '',
        uid: '',
    }
    const bl2 = BrowerLogger.createExtraInstance(props); // 通过createExtraInstance 创建实例
    bl2.custom({
        action: action,
    })
}
//使用上报
customUserAction('placeOrder')

全局监控在app.jsx里直接执行windowMonitoring()方法就好了。

如果使用了console.error(xxx)。则会被默认为需要上报的错误。如果有需要，可以手动添加。