Sentry 部署应用实践

Sentry提供自托管和基于云的错误监控，帮助所有软件团队实时发现、分类和优先处理错误。

Sentry搭建

推荐使用docker进行搭建，操作起来相对方便，我们把官方提供的项目下下来简单几步操作即可完成部署 https://github.com/getsentry/... 笔者目前的版本是 Sentry10.1.0 在后面的版本官方提供了@sentry/browser、@sentry/node 也就不再使用raven.js了

# clone docker项目
git clone https://github.com/getsentry/onpremise 
# 执行安装脚本，结束时会询问是否创建初始账号
bash install.sh
# 完成后启动容器
docker-compose up -d

查看容器状态，项目启动，访问9000端口

✨ 部署阶段完成

项目接入

创建一个新的项目，官方提供了多种语言的sdk，照着说明都可以顺利完成接入，前端部门我觉得稍微要麻烦点，这里以就以React为例，如何在umi等使用webpack打包工程中接入sentry。

1.安装sentry依赖

2.在入口文件中初始化Sentry

✨项目接入完成了，so easy是不是？@sentry/browser也提供了一些方法用来自定义标签，用户信息等，具体移步npm。

上传sourcemap对错误信息进行定位

前端因为要编译，所需需要把源码编译前后位置相关的sourcemap上传到sentry，上传sourcemap能获取到更多的错误信息，有利于和定位问题排查。

PS：但是要注意最后要将生成的map文件处理掉，不要留在生产环境，这样做是不安全的。

sentry/webpack-plugin

上传sourcemap的方法有很多，可以利用sentry-cli，webpack也有很多插件，例如@sentry/webpack-plugin

new SentryPlugin({
    include: './dist',
    release: process.env.RELEASE_VERSION,
    configFile: 'sentry.properties',
    urlPrefix: '~/'
  })

在umi中可以使用webpack的webpack-chain方式

// .umirc.js
export default {
  ...,
  chainWebpack(config, { webpack }) {
    if (process.env.NODE_ENV === 'production') {
      config.plugin("sentry").use(SentryPlugin, [{
        include: './dist',
        release: process.env.RELEASE_VERSION,
        ignore: ['node_modules'],
        urlPrefix:"~/static"
      }])
    }
  },
}

重要的url-prefix

urlPrefix是线上看js的完整路径，必须要设置正确,不然还是会看不到源码😼

release设置

release是本次构建发布的版本，取值可以是{项目名}@{构建的时间}，一般初始化的时候都会配置，这里有几个思路：

1.从package.json的version和name取值。
每次上线更换版本号，打tag，但是实践起来容易疏忽，可以配合[release](https://www.npmjs.com/package/release)使用。

2.设置成环境变量
在docker构建时设置环境变量传入

3.写入一个常量文件

设置@sentry/cli代理

@sentry/webpack-plugin会用到@sentry/cli这个库，经常会下不下来，可以设置下淘宝代理:
sentrycli_cdnurl=https://npm.taobao.org/mirror...

webpack-sentry-plugin

另外一个比较推荐的库：webpack-sentry-plugin 好处是比@sentry/webpack-plugin多一下自定义配置，比如构建完删除map文件，就比较实用，用@sentry/webpack-plugin可以在构建完成时写命令自己删除。配置基本类似，可以参照官网。

✨sourcemap上传完成，当项目发生错误时就会触发sentry告警，也能看到错误具体代码。