js错误监控

监控错误的几种方式

1、运行时的错误就是代码错误

  • try...catch
  • window.onerror

2、资源加载的错误

  • object.onerror(例如img.onerror事件)
  • performance.getEntries(页面已经加载成功的资源,返回的是一个数组,加载失败的不在这个数组里面)
  • error事件捕获,代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.addEventListener('error', function (ev) {
            console.log('捕获', ev)
        },true) //true为捕获,false为冒泡
    </script>
    <script src="//a.js"></script> //文件加载失败不会冒泡,所以只能在window.error事件捕获阶段监听
</head>
<body>
</body>
</html>

结果如下:没有找到a.js文件,所以捕获到资源加载错误,所以打印出来了

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端监控系统可以帮助我们监控网站的运行情况,及时发现异常,并给出相应的报警。其中,JS错误监控是其中的一个重要组成部分。本文将介绍如何搭建JS错误监控系统。 ## 1. 捕获JS错误 我们可以通过`window.onerror`事件来捕获JS错误。这个事件会在页面中任何一个未被`try-catch`捕获的JS错误发生时触发。我们可以在这个事件中获取到错误信息,并将其发送到后台进行处理。 ```javascript window.onerror = function (message, source, lineno, colno, error) { // message:错误信息 // source:错误文件的URL // lineno:错误所在行号 // colno:错误所在列号 // error:Error对象 // 将错误信息发送到后台进行处理 // ... } ``` ## 2. 错误信息格式化 在捕获JS错误后,我们需要将错误信息进行格式化,以便后台能够更好地理解和处理。一般来说,我们可以将错误信息转换成JSON格式,并附带上一些额外的信息,如用户ID、设备信息等。 ```javascript function formatError(error) { return { message: error.message, // 错误信息 stack: error.stack, // 错误堆栈 url: window.location.href, // 页面URL user_agent: navigator.userAgent, // 用户设备信息 user_id: 'xxx' // 用户ID } } ``` ## 3. 发送错误信息 格式化完错误信息后,我们需要将其发送到后台进行处理。我们可以使用`XMLHttpRequest`或`fetch`来发送请求。 ```javascript function sendError(error) { var xhr = new XMLHttpRequest() xhr.open('POST', '/api/error', true) xhr.setRequestHeader('Content-Type', 'application/json') xhr.send(JSON.stringify(error)) } ``` ## 4. 完整代码 ```javascript window.onerror = function (message, source, lineno, colno, error) { var formattedError = formatError(error) sendError(formattedError) } function formatError(error) { return { message: error.message, stack: error.stack, url: window.location.href, user_agent: navigator.userAgent, user_id: 'xxx' } } function sendError(error) { var xhr = new XMLHttpRequest() xhr.open('POST', '/api/error', true) xhr.setRequestHeader('Content-Type', 'application/json') xhr.send(JSON.stringify(error)) } ``` 以上就是JS错误监控的基本实现方式。当然,我们可以根据具体需求对错误信息进行更加详细的处理和定制化的配置。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值