web前端之错误监控类

雨点打透心脏的1/2处 2023-07-21 11:24 28阅读 0赞

### 错误监控类 ###

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

# 前端错误的分类 #

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

# 错误的捕获方式 #

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

这个是所有资源合集，那么未成功加载的资源就是所有的减去成功加载的  
![所有资源合集][2020040318302156.png]  
（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>

![在这里插入图片描述][20200403184828121.png]

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

# 上报错误的基本原理 #

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>

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

[2020040318284817.png]: /images/20230528/f09f19d2dd7e4049a54c11f81ad217a4.png
[2020040318302156.png]: /images/20230528/f9eb5e53ed6547afa2fa8b65ee0a153c.png
[20200403184828121.png]: /images/20230528/c23fe34482764d7393841a610fe9ce4c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA_size_16_color_FFFFFF_t_70]: /images/20230528/a20cb1a9098846449a65537ea051accc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA_size_16_color_FFFFFF_t_70 1]: /images/20230528/128beed11624477c80d192605e85c2fd.png