前端错误监控——Sentry介绍

2021-06-04

什么是Sentry

一个基于Djongo的日志收集系统。具备收集日志(对于分布式环境下,日志分布在各台服务器上)、日志统计(统计次数最多的异常,往往这就是系统的隐患所在)、监控告警(出现异常或者异常积累到一定数量以短信或者邮件的形式告警)、以及以上功能的可视化界面。

官网地址:https://sentry.io/

sentry支持中文,这点很棒,可以后台的settings菜单里面找到Language设置选择简体中文就好。

相关术语:

DSN

DSN是连接客户端(项目)与sentry服务端,让两者能够通信的钥匙;每当我们在sentry服务端创建一个新的项目,都会得到一个独一无二的DSN,也就是密钥。在客户端初始化时会用到这个密钥,这样客户端报错,服务端就能抓到你对应项目的错误了。

event

每当项目产生一个错误,sentry服务端日志就会产生一个event,记录此次报错的具体信息。一个错误,对应一个event。

issue

同一类event的集合,一个错误可能会重复产生多次,sentry服务端会将这些错误聚集在一起,那么这个集合就是一个issue。

Raven

我们在项目中初始化,让项目链接sentry的前提,都得保证已经引入了Ravenjs,以及我们手动提交错误的各类方法,都由Raven提供,这是很重要的。

注册账号

在官网的Get started的按钮开始注册账号:

image

创建项目

点击左上角的添加功能,选择添加project,页面会跳转到语言选择界面,选择项目放在哪个分组里,点击创建。

项目project,组team,成员member的关系,你可以在不同的组创建不同的项目,只有加入了该组的成员才能看到组内已拥有的项目错误采集信息。

image

接入

下面以next.js为例子介绍如何接入

第一步 安装依赖:

1
yarn add @sentry/node @sentry/browser

第二步 修改next.config.js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
const withSourceMaps = require('@zeit/next-source-maps')

module.exports = withSourceMaps({
env: {
SENTRY_DSN: 'http://e69fa8afd38e43e59fc3baf48ec0c681@localhost:9000/11'
},
webpack: (config, options) => {
if (!options.isServer) {
config.resolve.alias['@sentry/node'] = '@sentry/browser'
}
return config
},
})

上面这么配置是因为 Next.js 的特殊性,服务端渲染框架,既存在服务端也存在客户端场景,项目里引入的只能是一种,通用引入@sentry/node,所以当客户端的时候,要替换成@sentry/browser。

第三步 修改_app.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import React, {Component} from 'react';
import * as Sentry from '@sentry/node'
Sentry.init({
dsn:process.env.SENTRY_DSN
})
export default class App extends Component {
static async getInitialProps({Component,ctx}) {
let pageProps = {};
try {
if (Component.getInitialProps) {
pageProps = await Component.getInitialProps({ctx})
}
return {pageProps}
} catch (err) {
// This will work on both client and server sides.
console.log('The Error happened in: ', typeof window === 'undefined' ? 'Server' : 'Client');
Sentry.captureException(err)
return {pageProps};
}

}
render(){
const {Component} = this.props;
return <Component/>
}
}

在 _app.js 里对 Sentry 进行初始化配置,这里简单只配置了 dsn 参数。另外,在 getInitialProps 函数里进行了操作,如果发生错误,使用 Sentry.captureException()进行上报。

注意,此处主要负责页面渲染,路由跳转时的错误拦截,可以拦截到客户端和服务端两种场景的错误。具体为什么可以去查看我之前写的 Next.js 相关文章。

完成上面之后我们来测试下,在index.js抛出异常:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import React, {Component} from 'react';

class Index extends Component {

static async getInitialProps() {
throw new Error('测试错误')
}

render() {
return (
<div>
Hello world
</div>
);
}
}

export default Index;

访问首页,接下来我们去Sentry后台看下,如下图所示:

image

以上只是简单的例子;Sentry功能很强大,还可以配置邮件告警、日志级别、sourceMap等等,有时间好好研究下。

使用支付宝打赏
使用微信打赏

若你觉得我的文章对你有帮助,欢迎点击上方按钮对我打赏

扫描二维码,分享此文章