给你的项目装个探头 — Sentry

时间 2019-11-30

标签项目探头 sentry 繁體版

原文原文链接

在线上环境中，由于应用跑在用户浏览器中，发生错误时咱们若是要对其进行调试就会显得比较困难。因此咱们接入了 Sentry 服务对远程错误进行记录，接下来咱们将会一步一步接入 Sentry 服务。react

初始化 Sentry

咱们能够到 Sentry 官网中去建立一个帐号，而后咱们在 Sentry 中根据咱们项目类型建立一个项目，因为这里咱们作演示是 React 应用，因此咱们选择 React，固然了 Sentry 支持很是多的类型，你们能够按照本身项目进行添加。webpack

这时候，咱们会看到这个界面，咱们点击按钮。这时候会出现例子，咱们先记住，而后开始建立咱们的 React 应用。git

初始化 React 应用

咱们用 create-react-app 建立好咱们的应用，而且安装好 @sentry/browser。github

接着咱们在 index.js 里初始化 Sentry。web

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 中看到错误了。bash

咱们点击进去以后能够看到很是多的信息，包括错误堆栈，以及浏览器的事件等等，这些都可以帮助咱们快速定位问题，而且在邮箱中咱们收到了来自 Sentry 的报警邮件。微信

等等，咱们好像忘记了一个问题，若是别人也往这里发报错信息，咱们会接收到全部的报错信息，可是咱们只想收到咱们应用的报错。app

能够在这个地方设置咱们接收的域名。工具

设置 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，敬请期待。

github.com/balancelove…