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告警，也能看到错误具体代码。