Sentry基本配置和使用

上一篇已经介绍了如何将sentry部署到本地docker, 接下来介绍如何创建项目，并在代码中如何使用，配置SourceMap

环境

React项目

创建项目

1. 在上一篇文章中，部署的时候，我们会创建一个超级用户， 打开localhost:9000, 使用超级用户登录.
2. 在页面右上角点击Add new -- Project, 进入创建项目页面，可以配置项目名称和所属Team
   
   

   创建项目页面，我的是React项目
3. 新建项目后，进入项目设置页面，获取项目的DSN，复制DSN
   
   

   项目设置页面
4. 在项目入口文件index.tsx中添加如下代码：

import * as Sentry from '@sentry/browser'

Sentry.init({
  dsn: 'http://683dc36d4ffd4ac3b1f914baa136702b@localhost:9000/4',
})

5. 代码中的使用, 在axios的拦截器中captureException

import * as Sentry from '@sentry/browser'

instence.interceptors.response.use(response => {
  return response.data
}, error => {
  Sentry.captureException(error.response || error)
  return Promise.reject(error.response || error)
})

SourceMap配置

因为很多js代码都是被压缩过的，当报错的时候，我们很难找到具体的错误代码。我们希望在Sentry直接看到异常代码的源码时就需要上传对应的source和map.

官网有两种方式：sentry-cli 和 @sentry/webpack-plugin， 我使用的是后者webpack方式

1. 点击用户头像，点击下拉框中的API keys, 点击页面中的Create New Token, 记得勾选project:write选项，然后生成一个Token
   
   

   屏幕快照 2020-02-06 下午2.42.13.png
2. 到项目的根目录下新建一个文件.sentryclirc, 内容如下：

[defaults]
project=my-project
url=http://localhost:9000
org=watermirror


[auth]

token=wiiiqiqpqojd8128989288219wkwklqwk10iwq912jkq

3. 因为需要更改webpack配置，我使用了react-app-rewired方式来对webpack进行修改，config-override.js文件内容如下：

const SentryWebpackPlugin = require('@sentry/webpack-plugin')
const pjson = require('./package.json')

module.exports = function override(config, env) {
  config.plugins = [ ...config.plugins, new SentryWebpackPlugin({
    release: `iot-manage-web@${pjson.version}`,
    include: './build',
    ignoreFile: '.sentrycliignore',
    ignore: ['node_modules', 'config-overrides.js'],
    configFile: '.sentryclirc',
    urlPrefix: '~/static/js'
  })]
  return config;
}

配置完成后， 执行yarn build, 项目在build打包的时候，会将[email protected]的release包同步到sentry上。我们可在sentry上查看相关的map文件以及上传了

屏幕快照 2020-02-06 下午3.38.50.png

4. 查看错误
   所有配置弄好后，触发一个错误，通过original按钮查看报错代码，我这边是后台请求出错，所以是在axios的拦截器里报错
   
   

   截屏2020-03-17上午10.17.52.png