Sentry项目监控工具教程
二：介绍
- Sentry 是一个开源的实时错误报告工具，支持 web 前后端、移动应用以及游戏，支持 Python、OC、Java、Go、Node、Django、RoR 等主流编程语言和框架 ，还提供了 GitHub、Slack、Trello 等常见开发工具的集成。可以多团队、多开发一起管理。
- 由 Django 编写，底层是pathyon
三：使用安装
- 注册账号
- 更改时区和语言
- a 语言全是英文，如果你是英文大神可不修改；（修改后部分会变成中文，但还是会有英文）
- b 时区：要修改成你现在工作国家时区，不然报错时间和现在国家的时间对应不上
- 配置项目
- a、进入系统,创建项目会让你自动选语言和框架
- c、安装Sentry工具 按照指引在vue代码里引入 sentry
- 引入的时候需要给 init 函数传递一个 dsn 参数。这个参数唯一指定了我们刚才创建的项目，在创建项目的时候系统会自动生成。如果不传这个参数， sentry 不会发送错误
npm install @sentry/browser
// main.js
import * as Sentry from '@sentry/browser';
import * as Integrations from '@sentry/integrations';
// 在生产环境中让sentry报错
process.env.NODE_ENV === "production" && Sentry.init({
dsn: 'https://1111a5bc59b54778b75f4e3a92f2e462@sentry.io/1447145',
integrations: [
new Integrations.Vue({
Vue,
attachProps: true,
}),
],
});
- 在项目跟目录下增加.sentryclirc文件，其中的token可以在左上角头像里的api keys里面获取。
[auth]
token="your token"
[defaults]
url = https://sentry.io
org = "your org"
project = test
- 然后我们在代码里制造一个错误，就可以让 sentry 捕获了。本地如何模拟线上环境访问dist下的文件呢？需要装一个 http-server ，在dist文件夹下启动一个http服务就可以了。
npm i http-server
cd dist
http-server -p 8888
- 在network中可以看到， sentry 发送了一个错误请求
- 我们就可以在后台看到刚才上传的错误信息，同时 sentry 也会给你的邮箱发送一封错误邮件
- 错误信息查看
- 在后台找到我们的test项目，点击进去就能看到多了一条错误信息。
- 点击信息可以进入信息详情进行查看。
- 但是这个错误信息是压缩后的，不能定位到代码的实际位置。使用意义不大，因此需要上传 source-map
- 上传source-map
- 上传的方式有多种。可以通过 sentry-cli 通过命令行的方式来上传 source-map ，但是需要手动上传。也可以采用 webpack-plugin 这个插件，可以在 build 的同时自动上传 source-map 。本文采用自动上传策略。
我用的是vue-cli 在vue.config.js 插件中进行设置
configureWebpack: config => {
config.devtool = 'source-map'
config.plugins.push(...[
new CompressionPlugin({
test: /\.(js|css|html|svg)$/,
threshold: 10240,
deleteOriginalAssets: false
}),
new SentryCliPlugin({
include: fileName, // 需要上传的文件
suppressErrors: true, // 上传失败时不阻碍webpack继续执行
release: version, // 对应的版本号
configFile: 'sentry.properties', // 暂时写死
// ignore: ['node_modules'], // 好像没啥用
urlPrefix: 'http://192.168.1.24:8080/', // 前缀（很重要） 本地启动的服务
}),
])
},
main.js 中要加上版本号
Sentry.init({
dsn: 'https://0abb2a61053341dcb8235fca1e428746@o418997.ingest.sentry.io/5333253',
integrations: [new VueIntegration({
Vue,
attachProps: true
})],
release: Version,
});
- 需要保证 plugins 和 Sentry.init 两个配置中的 release 版本号相同，这样的话 sentry 才能将 source-map 文件一一对应上。
- 这时我们重新触发一次错误，就可以看到具体的出错位置了。
- 关联github
- 在设置->集成里面可以设置 sentry 关联各种服务，如 github、jira 等。关联上 github 后，可以直接为该异常创建issue。
- 这样在该异常的详情页就可以创建issue到 sentry 这个仓库了。
- 创建时可以选择仓库，名称，详情及指定给谁
- 打开 github ，在 sentry 这个仓库下，发现多了一个issue，就是刚才我们创建的。
三：搭建sentry私服
