Sentry基本配置和使用 Sentry基本配置和使用

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

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

文章图片
创建项目页面，我的是React项目
新建项目后，进入项目设置页面，获取项目的DSN，复制DSN

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

import * as Sentry from '@sentry/browser'Sentry.init({ dsn: 'http://683dc36d4ffd4ac3b1f914baa136702b@localhost:9000/4', })

代码中的使用, 在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方式

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

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

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

因为需要更改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; }

【Sentry基本配置和使用】配置完成后，执行yarn build, 项目在build打包的时候，会将iot-manage-web@0.0.1的release包同步到sentry上。我们可在sentry上查看相关的map文件以及上传了