Sentry 是一个开源的错误追踪工具，可以帮助开发人员实时监控和修复系统中的错误。其专注于错误监控以及提取一切事后处理所需的信息;支持几乎所有主流开发语言(JS/Java/Python/php)和平台, 并提供了 web 来展示输出错误。sentry 官网：https://sentry.io
sentry 的特性

  • 支持多种语言和框架
  • 相同错误合并
  • 定制规则进行邮件通知
  • 支持导入 sourcemap 自动解析和还原代码
  • 友好的可视化 Web 界面

    注册账号，新建项目。

    新建项目后，您将获得一个我们称之为 DSN 或数据源名称的值.它看起来很像一个标准的 URL，但它实际上只是 Sentry SDK 所需的配置的标识。它由以下几个部分组成。
  1. 使用的协议: http 或 https;
  2. 验证 sdk 的公钥和密钥;
  3. 目标 sentry 服务器;
  4. 验证用户绑定的项目 id.

    安装依赖，引入脚本

    1. import Raven from 'raven-js'
    2. import RavenVue from 'raven-js/plugins/vue'
    3. Raven.config('https://a60af910fe4449e98fcf7fbb0c714f1a@sentry.io/1516655')
    4. .addPlugin(RavenVue, Vue)
    5. .install()

    常用参数

  • DSN ：项目的地址，用于收集错误信息的 sentry 分配的地址
  • debug ：是否开启 debug 模式，开启 debug，就会把信息打印到控制台上面
  • release ： 代码的版本号，可以确定当前的错误/异常属于哪一个发布的版本
  • environment : 环境名称
  • attachStacktrace ： 是否开启堆栈跟踪，开启后跟着消息一起收集

  • beforeSend : 发送前操作

    基本使用

    最简单的方式是主动触发：

    1. try {
    2. doSomething(a[0])
    3. } catch (e) {
    4. Raven.captureException(e)
    5. }

    window.onerror 捕捉异常

    1. window.onerror = function(e) {
    2. Raven.captureException(e)
    3. }

    在 vue 里可以使用 Vue.config.errorHandler 钩子来捕捉

    1. Vue.config.errorHandler = (err, vm, info) => {
    2. Raven.captureException(err)
    3. }

    对于接口报错，可以在全局拦截里实现

    1. request.interceptors.response.use(null, error => {
    2. console.error(error)
    3. Raven.captureException(error)
    4. return Promise.reject(error)
    5. })

    source-map 配置

  • 创建新的 token

  • 安装@sentry/webpack-plugin 插件, 一般会同时安装@sentry/cli
  • npm i @sentry/webpack-plugin —dev

  • 根目录创建.sentryclirc 文件

    1. [defaults]
    2. url = https://sentry.io/
    3. org = your org
    4. project = your project
    5. [auth]
    6. token = your token

    在 config/prod.env.js 创建环境变量

    1. const release = 'demo-test001' // 可以根据package.json的版本号或者Git的tag命名
    2. process.env.RELEASE_VERSION = release
    3. module.exports = {
    4. NODE_ENV: '"production"',
    5. RELEASE_VERSION: `"${release}"`
    6. }

    在 webpack.prod.conf 配置

    1. const SentryPlugin = require('@sentry/webpack-plugin')
    2. new SentryPlugin({
    3. release: process.env.RELEASE_VERSION, //发布的版本
    4. include: path.join(__dirname, '../dist/static/js/'), //需要上传到sentry服务器的资源目录
    5. ignore: ['node_modules', 'webpack.config.js'], //  忽略文件目录
    6. configFile: `.sentryclirc`, //  面包含了 -o组织 -p项目 以及authtoken
    7. urlPrefix: '~/static/js' //  线上对应的url资源的相对路径
    8. })

    报警邮件发送规则
    Sentry 默认会将所有采集到的异常发送警报邮件，有时我们可能希望只收到某个版本下某些规则下的警报邮件，这时候就需要删除默认的警报规则，然后新建自定义规则。 在项目设置中找到 Alerts，左上角 “New Alert Rule”即可添加设置报警规则。

    信息收集

  • 错误类型及具体错误信息

  • 丰富的上下文周围的错误
  • 用户信息(ip, 机型, 操作系统, 浏览器版本, 时间)
  • 错误代码的定位(具体文件，具体行数)
  • 同一个错误发生的次数和用户数
  • 区分错误的环境及版本