Sentry介绍与使用

1.什么是sentry?
sentry是一个基于Django构建的现代化的实时事件日志监控、记录和聚合平台,主要用于如何快速的发现故障。

sentry支持自动收集和手动收集两种错误收集方法;我们能成功监控到vue中的错误、异常,但是还不能捕捉到异步操作、接口请求中的错误,比如接口返回404、500等信息,此时我们可以通过Sentry.caputureException()进行主动上报。

2. 监控原理

1.传统的前端监控原理分为异常捕获和异常上报。一般使用onerror捕获前端错误:

window.onerror = (msg, url, line, col, error) => {
console.log(‘onerror’)
// TODO
}

  1. 但是onerror事件无法捕获到网络异常的错误(资源加载失败、图片显示异常等),例如img标签下图片url 404 网络请求异常的时候,onerror无法捕获到异常,此时需要监听unhandledrejection。

window.addEventListener(‘unhandledrejection’, function(err) {
console.log(err)
})

  1. 捕获的异常如何上报?常用的发送形式主要有两种: 通过 ajax 发送数据(xhr、jquery…) 动态创建 img 标签的形式

function report(error) {
var reportUrl = ‘http://xxxx/report’
new Image().src = reportUrl + ‘?error=’ + error
}

Logo

前往低代码交流专区

更多推荐