前端错误监控了解

最新推荐文章于 2024-07-11 05:37:19 发布

scorpio_h

最新推荐文章于 2024-07-11 05:37:19 发布

阅读量187

点赞数

分类专栏：综合文章标签：前端错误监控前端错误分类前端错误捕获前端错误上报

本文链接：https://blog.csdn.net/scorpio_h/article/details/95241155

版权

综合专栏收录该内容

34 篇文章 0 订阅

订阅专栏

前端错误的分类

即时运行错误：代码错误
资源加载错误

错误的捕获方式

即时错误的捕获方式

try..catch
window.onerror

资源加载错误

1、object.onerror

2、performance.getEntries()

// 在浏览器Console输入如下代码，可查看加载的资源
performance.getEntries().forEach(item => { console.log(item.name) })

3、Error事件捕获

例子：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>错误监控</title>
</head>
<body>
  <script type="text/javascript">
    window.addEventListener('error', function(e) {
      console.log('捕获', e)
    }, true) // 此处必须为true，true为捕获，false为冒泡
  </script>
  <script src="//baidu.com/test.js" charset="utf-8"></script> // 模拟加载一个不存在的资源
</body>
</html>

由于加载的资源其实不存在，所以肯定会报错，此时可查看捕获结果

跨域的js运行错误的捕获

在script标签增加crossorigin属性
设置js资源响应头Access-Control-Allow-Origin:*（服务端）

上报错误的基本原理

1、采用Ajax通信的方式上报

2、利用Image对象上报

举例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>错误监控</title>
</head>
<body>
  <script type="text/javascript">
    (new Image()).src = 'http://baidu.com/testjk?r=test'
  </script>
</body>
</html>

结果，请求已经发出去了：