我所了解的 js 错误收集

收集了一些 js 错误监控的资料,大体上可以了解这是个什么东西。

什么?

简单来说,就是代码报错了,我想要知道这个报错信息。

为什么?

以前发过关于这个话题的内容:

JavaScript 代码不像运行在服务器端的PHP、Java等,运行环境单一,代码调试通了没有出错就不会有什么错误,而 JavaScript 不同,需要运行在各种不同的浏览器上,为了保证自己写的代码足够健壮,所以必须做一下错误脚本监控。

这个文章介绍了错误脚本监控上报的原理:

https://github.com/joeyguo/blog/issues/13

也有创业公司免费提供错误脚本监控的服务,今天试了一下,挺简单好用的:

https://fundebug.com/about

Sentry provides open source error tracking that shows you every crash in your stack as it happens, with the details needed to prioritize, identify, reproduce, and fix each issue. It also gives you information your support team can use to reach out to and help those affected and tools that let users send you feedback for peace of mind.

使用 sentry 做错误脚本监控是个不错的选择。

https://sentry.io/about

js 报错了会怎样?

See the Pen JavaScript 出错了会怎么样? by zeng (@zengxiaoluan) on CodePen.

 

收集错误的几种方式

收集 Promise 的报错

See the Pen unhandledrejection by zeng (@zengxiaoluan) on CodePen.

window.error

See the Pen 监听 window.error by zeng (@zengxiaoluan) on CodePen.

alloyteam 郭林烁的分享

Script Error

收集了很多 JavaScript 错误的类型是 “Script Error” ,为什么呢?可以查看這個鏈接:https://blog.sentry.io/2016/05/17/what-is-script-error

模拟一个 Script Error

<script>
    window.addEventListener('error', function (e) {
        console.log(e)
    }, true)
</script>
<script src="https://s.591.com.tw/build/widget/plugin/stat.js?v=5888e7f9c4"></script>

 

常見的錯誤是什麼

1,未確定值是否存在,就對該值進行了操作。

var localData = JSON.parse(localStorage.getItem(localStorageName)) || []
// error
if (localData.length) {
...
}

2,更多查看这里

其它相关

  1. sourcemap
  2. rust 语言

参考链接

在线追踪压缩后的JS出错代码

使用 Rust 加速前端监控

JavaScript Source Map 详解

https://developer.mozilla.org/en-US/docs/Web/Events/unhandledrejection

前端代码异常监控

小胡子哥写的错误脚本文章

作者: 曾小乱

喜欢写点有意思的东西

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据