给你的项目装个探头 — Sentry

栏目: 编程语言 · 发布时间: 4年前

内容简介:我们可以到Sentry 官网中去创建一个账号,然后我们在 Sentry 中根据我们项目类型创建一个项目,由于这里我们做演示是 React 应用,所以我们选择 React,当然了 Sentry 支持非常多的类型,大家可以按照自己项目进行添加。这时候,我们会看到这个界面,我们点击按钮。这时候会出现例子,我们先记住,然后开始创建我们的 React 应用。我们用

我们可以到Sentry 官网中去创建一个账号,然后我们在 Sentry 中根据我们项目类型创建一个项目,由于这里我们做演示是 React 应用,所以我们选择 React,当然了 Sentry 支持非常多的类型,大家可以按照自己项目进行添加。

给你的项目装个探头 — 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

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

给你的项目装个探头 — Sentry

等等,我们好像忘记了一个问题,如果别人也往这里发报错信息,我们会接收到所有的报错信息,但是我们只想收到我们应用的报错。

可以在这个地方设置我们接收的域名。

给你的项目装个探头 — Sentry

设置 releases

在我们项目进行版本迭代的过程中,我们在一个新版本修复了一个问题,但是由于用户使用的是老版本,所以同样的错误又暴露出来了,这时候我们就能够清楚的知道,这是因为用户使用了老版本代码造成的。

那么我们要如何在 Sentry 中设置项目的版本呢?很简单,就像下面这样:

Sentry.init({
  dsn: 'https://54ad7a14513e48bbb9b20698da401d1d@sentry.io/1491516',
  release: 'sentry_example@20190627121204'
});
复制代码

这样新版本上的错误就会被标记成 sentry_example@20190627121204

给你的项目装个探头 — Sentry

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 参数是你的静态文件访问的前缀,这个一定要写对,不然它对应不起来。

  1. 第三步,使用 http-server 启动一个服务,然后访问它,再点击抛错按钮。

通过上面几步,我们又在 Sentry 中收到了报警。

给你的项目装个探头 — Sentry

bingo,我们看到了更容易阅读的错误报告,同时,你还可以去设置邮件、钉钉、微信等接入报错提醒,关于 Sentry 接入更多信息,可以到官网查看文档。

最后,大家使用 Sentry 还有场景是需要自己在内网搭建部署,如果是配合 Docker,那么搭建 Sentry 服务就变得非常简单了。

经过迷茫后,博客将继续更新,欢迎 Star,敬请期待。

github.com/balancelove…


以上所述就是小编给大家介绍的《给你的项目装个探头 — Sentry》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

JUnit Recipes中文版

JUnit Recipes中文版

陈浩等译 / 电子工业 / 2006-9 / 69.00元

《JUnit Recipes中文版:程序员实用测试技巧》主要介绍了在Java开发中使用JUnit进行单元测试的各种方法、原则、技巧与实践。本书出自开发一线专家之手,本着实用的原则,涵盖各类Java开发中应用JUnit的实用技巧,内容丰富、全面深入;无论对于需要应用JUnit进行单元测试的一线Java开发人员,还是JUnit入门、进阶者,本书都是一本不可多得的实用指南。这本书介绍了大量的JUnit实......一起来看看 《JUnit Recipes中文版》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具