Sentry 部署应用实践

Yunfly
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端口
docker.jpeg

✨ 部署阶段完成

项目接入

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

image.png

1.安装sentry依赖

安装sentry依赖

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

codeimg-twitter-instream-image (6).jpeg
✨项目接入完成了,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...
codeimg-twitter-instream-image (8).jpeg
codeimg-twitter-instream-image (9).jpeg

webpack-sentry-plugin

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

✨sourcemap上传完成,当项目发生错误时就会触发sentry告警,也能看到错误具体代码。
A screenshot of the Sentry crash reporting dashboard
image.png

image.png

阅读 8.1k
28 声望
0 粉丝
0 条评论
28 声望
0 粉丝
文章目录
宣传栏