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
}

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

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

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

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