web前端之错误监控类

最新推荐文章于 2021-09-06 10:20:36 发布

a小毛同学

最新推荐文章于 2021-09-06 10:20:36 发布

阅读量155

点赞数

文章标签： js

本文链接：https://blog.csdn.net/mao871863224/article/details/105298807

版权

错误监控类

前端错误的分类
错误的捕获方式
上报错误的基本原理

前端错误的分类

1、即时运行错误（代码错误）
2、资源加载错误

错误的捕获方式

（1）即时运行错误捕获方式
try…catch
window.error，只能捕获即时错误
（2）资源加载错误
（1）object.onerror
（2）performance.getEntries()（下面打印出来的是成功加载的资源）
在这里插入图片描述

这个是所有资源合集，那么未成功加载的资源就是所有的减去成功加载的

（3）Error事件捕获
不是冒泡，不阻止冒泡，可以在捕获阶段拿

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>捕获错误</title>
        <script type="text/javascript">
        //true代表捕获，false代表冒泡，捕获阶段可以捕获错误，冒泡阶段捕获不到错误
            window.addEventListener('error',function(e){
                console.log('捕获',e)
            }，true)
        </script>
    </head>
    <body>
        <script type="text/javascript" src="//baidu.com/test.js">
           
        </script>
       
    </body> 
</html>

在这里插入图片描述

延伸：跨域的js运行错误可以捕获么？错误提示是什么，应该怎么处理
在这里插入图片描述

上报错误的基本原理

1、采用Ajax通信的方式上报（不怎么常用）
2、利用Image对象上报（很常用）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>上报错误</title>
    </head>
    <body>
        <script>
            (new Image()).src = 'http://baidu.com/test?t=test';
        </script>
       
    </body> 
</html>

下图可以看到已经错误已经上报了
在这里插入图片描述

a小毛同学

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端之错误监控类

错误监控类前端错误的分类错误的捕获方式上报错误的基本原理前端错误的分类1、即时运行错误（代码错误）2、资源加载错误错误的捕获方式（1）即时运行错误捕获方式try…catchwindow.error，只能捕获即时错误（2）资源加载错误（1）object.onerror（2）performance.getEntries()（下面打印出来的是成功加载的资源）这个是所有资源合集，那...
复制链接

扫一扫