前端异常监控与异常上报

最新推荐文章于 2024-04-18 15:19:54 发布

一条咸鱼l

最新推荐文章于 2024-04-18 15:19:54 发布

阅读量320

点赞数

分类专栏：前端工程化文章标签：前端

本文链接：https://blog.csdn.net/sinat_39598192/article/details/129421047

版权

前端工程化专栏收录该内容

23 篇文章 0 订阅

订阅专栏

异常监控

监控是软件质量最后的防线，帮助我们发现真实场景中才会出现的问题，是提高软件质量的有效手段，在后端世界中异常监控已经是不可或缺的模块。

异常监控的核心问题

异常捕获：如何高效、准确和全面的捕获异常?
数据上报：如何选择上报时机?如何在性能和信息全面性之间做出取舍?
数据分析：我们能够根据上报信息得出更深层的有价值结论吗?
告警：什么时候告警?什么方式告警?

异常监控主要流程

异常捕获 -> 数据上报 -> 数据分析 -> 告警

异常捕获 - 同步

//浏览器
window.onerror                                   // 全局异常捕获
window.addEventListener('error')                 // js错误、资源加载错误
window.addEventListener( ' unhandledrejection')  // 没有catch的Promise错误

//node
process.on( 'uncaughtException')                 // 全局异常捕获
process.on(unhandledRejection' )                 // 没有catch的Promise错误

异常捕获 - 异步

异步异常通常采用重写原生，第三方库相关方法实现：

setTimeout setlnterval
fetch
XMLHttpRequest
...

const originalSetTimeout = window.setTimeout;
window.setTimeout = (fn, time) => {
    const wrap = () => {
        try {
            fn()
        } catch (e) {
            // do something
        }
    }
    return originalSetTimeout(wrap, time);
})