前端错误监控捕获和上报

最新推荐文章于 2023-11-23 17:23:24 发布

Ashley的成长之路

最新推荐文章于 2023-11-23 17:23:24 发布

阅读量746

点赞数

分类专栏：前端前端性能优化文章标签： javascript

本文链接：https://blog.csdn.net/weixin_40297452/article/details/105670243

版权

前端同时被 2 个专栏收录

43 篇文章 1 订阅

订阅专栏

前端性能优化

5 篇文章 1 订阅

订阅专栏

1、前端错误分为两大类：

a、即时运行错误:代码错误；
b、资源加载错误；

2、错误的捕获方式

a、即时运行错误： 1) try..catch 2) window.onerror 捕获； 3）window.addEventListener("error",function(){},false);

b、资源加载错误： 1) object.onerror 2) performance.getEntries() 3) Error事件捕获

ps: 以上的方法无法捕获跨域的js运行错误，而要捕获跨域的js运行错误，需要配置以下内容：
客户端：在script标签增加 crossorigin属性；
服务器端：设置js资源响应头：Access-Control-Allow-Origin:* ;

3、上报错误的方式
上报错误可以通过 AJAX通信的方式上报，也可以采用Image 对象上报，国内常用的使用Image对象上报错误到服务器
通过Image 对象上报的话，将错误信息拼接在 image标签的src中，例如：

(new Image()).src = report_url+需拼接的错误信息;

4、捕获上报小demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>错误捕获上报demo</title>
</head>

<body>
    <script type="text/javascript">
        var catchError = function (e) {
            e.stopImmediatePropagation();
            const srcElement = e.srcElement;
            if (srcElement === window) {
                console.log('全局错误', e);
                let { message, lineno, colno } = e;
                (new Image()).src = "http://106.15.57.244/book/test?msg=" + message + '&&lineno=' + lineno + '&&colno=' + colno;

            } else {
                console.log('资源报错', e);
                (new Image()).src = "http://106.15.57.244/book/test?src=" + srcElement.src + '&&tagName=' + srcElement.tagName;
            }
        }

        window.addEventListener(
            "error",
            catchError,
            true //网络错误，在捕获阶段获取，第三个参数为true
        );
    </script>
     <!-- error2.js 不存在 -->
    <script type="text/javascript" src="error2.js" ></script>
    <!-- error.js 中只有一句 throw new Error("出错了！"); -->
    <script type="text/javascript" src="error.js" ></script>
</body>
</html>

ps：学习过程的简单记录，须有不恰当之处，欢迎指正！
最近比较忙，捕获和上报后面会补上完整代码demo！

//2020/05/07 添加demo

Ashley的成长之路

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端错误监控捕获和上报

1、前端错误分为两大类： a、即时运行错误:代码错误； b、资源加载错误；2、错误的捕获方式 a、即时运行错误： 1)try..catch 2)window.onerror 捕获； b、资源加载错误： 1) object.onerror 2) performance.getEntries() 3) Error事件...
复制链接

扫一扫