前端错误日志监控:Sentry 的介绍与使用
sentry1.背景在我们开发完成后,会有一系列上线之前的测试,比如,先测pre,再测beta,目的就是以确保项目能在生产环境上没有事故。但对于每一个项目,我们都没办法保证代码零 bug、零报错,即便是经历过几轮测试,也永远无法做到 100% 覆盖,用户也不会总是按照我们所预期的进行操作,在上线后也会出现一些预料不到的问题。当生产环境中产生了一个 bug 时,如何做到迅速报警,找到问题原因,修复后
·
sentry
1.背景
-
在我们开发完成后,会有一系列上线之前的测试,比如,先测pre,再测beta,目的就是以确保项目能在生产环境上没有事故。
-
但对于每一个项目,我们都没办法保证代码零 bug、零报错,即便是经历过几轮测试,也永远无法做到 100% 覆盖,用户也不会总是按照我们所预期的进行操作,在上线后也会出现一些预料不到的问题。当生产环境中产生了一个 bug 时,如何做到迅速报警,找到问题原因,修复后又如何在线上验证。因此就需要:前端错误日志监控。
-
跟踪运行时错误 如果在组件渲染时出现运行错误,错误将会被传递至全局 Vue.config.errorHandler 配置函数 (如果已设置)。利用这个钩子函数来配合错误跟踪服务是个不错的主意。比如 Sentry,它为 Vue 提供了官方集成。
2.什么是 sentry
- sentry官网
- sentry 是一个基于 Django 构建的现代化的实时事件日志监控、记录和聚合平台,主要用于如何快速的发现故障。支持几乎所有主流开发语言和平台,并提供了现代化 UI, 它专门用于监视错误和提取执行适当的事后操作所需的所有信息,而无需使用标准用户反馈循环的任何麻烦。
3.监控原理
- window.onerror
每当代码在 runtime 时发生错误时,JavaScript 引擎就会抛出一个 Error 对象,并且触发 window.onerror 函数。
window.onerror = (msg, url, line, col, err) => {
console.log(err)
}
- unhandledrejection
在我们使用 Promise 的时候,如果发生错误而我们没有去 catch 的话,window.onerror 是不能监控到这个错误的。但是这个时候,JavaScript 引擎会触发 unhandledrejection 事件,只要我们监听这个事件,那么就能够监控到 Promise 产生的错误。
window.addEventListener('unhandledrejection', function(err) {
console.log(err)
})
4.如何使用
- 注册 sentry,新建项目
- 引入SDK
- 初始化配置
Sentry.init({
dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
debug: true,
});
常用选项
- dsn:项目的地址,告诉SDK将事件发送到哪里
- debug:打开或关闭调试模式。开启就会把信息打印到控制台上面
- release:代码的版本号
- environment : 环境名称
- beforeSend:在事件发送到服务器之前调用,过滤错误事件。
常用功能
- 进行基本的配之后,sentry 会默认上报页面抛出的所有未被捕获的错误(包括 window.error 和 promise 异常)。
- 主动捕获并上报错误。 主动上报的方式有两种: 一种是直接上报文本信息,参数为一个字符串; 另一种是上报错误对象,参数为一个 error 对象或者类对象。
- captureException (exception) : 捕获一个 js - 异常,传入一个 exception 对象。
- captureMessage (message,level) : 捕获一条信息,传入信息内容。
- 丰富bug上下文数据。setContext、setUser、setTag…
- 上传 SourceMap。只要我们将 sourcemap 文件也上传到服务器,就可以在 sentry 平台看到源代码,从而快速定位错误。
5.简单封装
import * as Sentry from '@sentry/browser';
interface Sdk {
dsn: string;
environment?: string;
debug?: boolean; // 根据需要自行添加参数类型
}
export function initSdk(sdkConfig: Sdk) {
Sentry.init(sdkConfig);
}
export function setErrLog(errLevel: string, errMsg: string) {
Sentry.withScope((scope: any) => {
scope.setLevel(errLevel);
Sentry.captureException(errMsg);
});
}
更多推荐
已为社区贡献2条内容
所有评论(0)