在线上环境中,因为应用跑在用户浏览器中,发生错误时我们如果要对其进行调试就会显得比较困难。所以我们接入了 Sentry 服务对远程错误进行记录,接下来我们将会一步一步接入 Sentry 服务。
初始化 Sentry
我们可以到 Sentry 官网中去创建一个账号,然后我们在 Sentry 中根据我们项目类型创建一个项目,由于这里我们做演示是 React 应用,所以我们选择 React,当然了 Sentry 支持非常多的类型,大家可以按照自己项目进行添加。
这时候,我们会看到这个界面,我们点击按钮。这时候会出现例子,我们先记住,然后开始创建我们的 React 应用。
初始化 React 应用
我们用 create-react-app
创建好我们的应用,并且安装好 @sentry/browser
。
接着我们在 index.js
里初始化 Sentry
。
import * as Sentry from '@sentry/browser';
Sentry.init({
dsn: 'https://54ad7a14513e48bbb9b20698da401d1d@sentry.io/1491516'
});
然后,在 App.js
里写一段抛出错误的代码。
<button
onClick={() => {
throw new Error('抛出错误');
}}
>
throw error
</button>
点击按钮,我们就能够在 Sentry
中看到错误了。
我们点击进去之后可以看到非常多的信息,包括错误堆栈,以及浏览器的事件等等,这些都能够帮助我们快速定位问题,并且在邮箱中我们收到了来自 Sentry
的报警邮件。
等等,我们好像忘记了一个问题,如果别人也往这里发报错信息,我们会接收到所有的报错信息,但是我们只想收到我们应用的报错。
可以在这个地方设置我们接收的域名。
设置 releases
在我们项目进行版本迭代的过程中,我们在一个新版本修复了一个问题,但是由于用户使用的是老版本,所以同样的错误又暴露出来了,这时候我们就能够清楚的知道,这是因为用户使用了老版本代码造成的。
那么我们要如何在 Sentry
中设置项目的版本呢?很简单,就像下面这样:
Sentry.init({
dsn: 'https://54ad7a14513e48bbb9b20698da401d1d@sentry.io/1491516',
release: 'sentry_example@20190627121204'
});
这样新版本上的错误就会被标记成 sentry_example@20190627121204
。
sourceMap
上面说的这些,我们能够简单的对项目进行错误预警,但是有个问题就是当我们将项目进行打包之后代码变得极其难阅读,这样的报错信息对于我们来说是不友好的,那么我们要怎么解决这个问题呢?
答案当然就是给 webpack
的配置加上 source-map
了,我们将 webpack
的配置打开,这时候我们再进行编译就会出现 map 文件了。
那么 Sentry
是如何知道我们的 map 文件的呢?答案就是我们需要将 map 文件上传到 Sentry
中去,也就是说,我们在 build
之后需要将文件上传一份到 Sentry
中去,同时,我们将版本和 map 文件结合起来,也就是说我们需要先建立一个版本,然后将对应版本的文件上传上去,那么我们该如何操作呢?
- 第一步,先安装
@sentry/cli
工具 - 第二步,在编译之后进行版本确定以及文件上传工作
# 我们确定版本号的格式为 sentry_example@20190627220147
# 这时候我们使用 sentry-cli 工具创建对应的版本
$ sentry-cli releases new sentry_example@20190627220147
# 再使用 sentry-cli 上传文件
$ sentry-cli releases files sentry_example@20190627220147 upload-sourcemaps --url-prefix http://localhost:8080 ./build
# 圆满成功
上面的操作中有个需要注意的点,就是 --url-prefix
参数是你的静态文件访问的前缀,这个一定要写对,不然它对应不起来。
- 第三步,使用
http-server
启动一个服务,然后访问它,再点击抛错按钮。
通过上面几步,我们又在 Sentry
中收到了报警。
bingo,我们看到了更容易阅读的错误报告,同时,你还可以去设置邮件、钉钉、微信等接入报错提醒,关于 Sentry
接入更多信息,可以到官网查看文档。
最后,大家使用 Sentry
还有场景是需要自己在内网搭建部署,如果是配合 Docker,那么搭建 Sentry
服务就变得非常简单了。
经过迷茫后,博客将继续更新,欢迎 Star,敬请期待。