上一篇已经介绍了如何将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
<!-- 此处可以从你的项目全路径看出， http://localhost:9000/此处是你的org/此处是你的project/
如：我的路径是http://localhost:9000/watermirror/my-project -->
[auth]
<!--将刚刚生成的token拷贝到此处-->
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;
}
配置完成后， 执行yarn build, 项目在build打包的时候，会将iot-manage-web@0.0.1的release包同步到sentry上。我们可在sentry上查看相关的map文件以及上传了
屏幕快照 2020-02-06 下午3.38.50.png
- 查看错误
所有配置弄好后，触发一个错误，通过original按钮查看报错代码，我这边是后台请求出错，所以是在axios的拦截器里报错
截屏2020-03-17上午10.17.52.png
