vue项目sentry配置 – —————————

前言

默认已经拥有 sentry 后台

系统地址： xxx

以及对应的账号的前提下，首先在后台的账号管理中添加对应的权限:

api – Auth Token – create new Token，
勾选 project:releases 和 project:write
然后点击 create Token
复制生成后的 Auth Token

接着新建一个项目，选择 Vue 模板，填写项目名称，注意项目名称不能带有 _ 下划线。

然后在项目设置中在到 Client Keys(DSN) 的一栏，记录一下 DSN 值，下面会用到。

需要安装的一些依赖包

@sentry/webpack-plugin 负责自动将源码上传到sentry后台
raven-js sentry的vue版本，自带监控Vue组件的错误

另外，要进行详细配置需要查看详细的文档 sentry

下面讲到的步骤都是基于webpack4

安装配置依赖

首先安装上述提到的依赖包，在项目根目录执行以下命令

npm i -D @sentry/webpack-plugin raven-js

编写 .sentryclirc

这份东西一定要有，并且只能是这个名字，并且只能在你项目的根目录，编写的格式如下：

token 在 sentry 后台账号设置里面能找到，而且必须是已经设置了文章开头的权限
url sentry后台链接
org 账号对应的组织
project 项目名称

[auth]
token=your_token
 [defaults]
url = your_sentryUrl
org = your_org
project = your_project_name

假如我不想起这个名字，并且不想放在根目录，那就要起另外一个文件 sentry.properties，这个文件的格式如下：

defaults.url=
defaults.org=
defaults.project=

auth.token=

@sentry/webpack-plugin

这个插件的作用是负责将编译打包出来的sourcemap 上传到 sentry 后台，所以要检查一下编辑打包中是否都把 sourcemap 开启

基本配置下面这些就够用了

new SentryCliPlugin({
    include: './dist',
    // ignoreFile: '.sentrycliignore',
    ignore: ['node_modules'],
    // 版本
    release:  '',
    deleteAfterCompile: true,
    // 指定配置文件的位置
    configFile: '',
    urlPrefix: `~/`,
})

几个特别需要注意的配置：

release 这个是版本号，这个可以用于将错误区分项目的版本和环境，比如 project-1.0.0-testing 将错误归纳到项目1.0.0版本测试环境
configFile 注意，@sentry/webpack-plugin 的 configFile 如果要指定配置文件，一定只能是 sentry.properties 这种格式的文件，不然会出错
urlPrefix 为了精确定位源码位置，假如项目其中一个js链接 http://www.a.com/b/1.js，那么 ~ 代表 http://www.a.com，所以这是的 urlPrefix 就应该是 ~/b，这个东西一定要设置好，不然后台看到的错误代码只会是压缩成一行的，设置对的话才会源码显示

详细配置信息

release [optional] -版本的唯一名称，必须为string，应唯一标识您的版本，默认为sentry-cli releases propose-versioncommand，该命令应始终返回正确的版本
include [required] – string或array，Sentry CLI应该递归扫描源的一个或多个路径。它将上传所有.map文件并匹配关联.js文件
ignoreFile [optional] – string，指向包含要忽略的文件/目录列表的文件的路径。可以指向.gitignore或具有相同格式的任何内容
ignore [optional]– string或array，在上传过程中要忽略的一个或多个路径。覆盖ignoreFile文件中的条目。如果既没有ignoreFile或ignore存在时，默认为[‘node_modules’]
configFile [optional] – string，Sentry CLI配置属性的路径，如 https://docs.sentry.io/learn/cli/configuration/#properties-files中所述。默认情况下，从当前路径向上查找配置文件，~/.sentryclirc并且始终从加载默认文件
ext [optional] – string，添加要考虑的其他文件扩展名。默认情况下，将处理以下文件扩展名：js，map，jsbundle和bundle。
urlPrefix [optional] – string，这会在所有文件前面设置一个URL前缀。默认为，~/ 但是您可能希望将其设置为完整URL。如果您的文件存储在子文件夹中，这也很有用。例如：url-prefix ‘~/static/js’
validate [optional] – boolean，如果未启用重写功能，则会在上传之前尝试进行源地图验证。它将发现源地图的各种问题，如果发现任何问题，将取消上载。这不是默认设置，因为这可能导致误报。
stripPrefix [optional] – array，与rewrite此配对将从上传的文件中截取前缀。例如，您可以使用它来删除特定于构建计算机的路径。
stripCommonPrefix [optional] – boolean，与rewrite此配对将添加~到stripPrefix数组中。
sourceMapReference [optional] – boolean，这会阻止自动检测源映射引用。
rewrite [optional] – boolean，允许重写匹配的源映射，以便尽可能平整索引的映射并内联丢失的源。默认为true
dryRun [optional] – boolean，尝试空运行（适用于开发环境）

Raven-js 注册

在你的全局Vue实例化之前，对 Raven-js进行注册：

import Vue from 'vue'
import Raven from 'raven-js'
import RavenVue from 'raven-js/plugins/vue'

// 这里的DSN就是在后台项目设置中拿到的DSN
Raven.config([DSN], {
        // 这里的release要和@sentry/webpack-plugin配置的release一样
        release: ``,
        // 环境
        environment: ‘’,
        // 这里对一些错误进行了级别的定义
        dataCallback(data) {
            if(/Only secure origins are allowed/.test(data.message)) data.level = 'warning'
            return data
        },
        // 白名单 以下链接下的报错才上报
        // 通常这里填写项目的线上链接，防止被刷
        whitelistUrls: [
            ``
        ],
        // 忽略一些错误不上报
        ignoreErrors: [
            /SecurityError\: DOM Exception 18$/
        ]
}).addPlugin(RavenVue, Vue).install()

另外自己写的模块也可能出现出错的情况，这是还需要使用 window.onerror 监听一下

window.onerror = (msg, url, line, col, error) => {
            //没有URL不上报！上报也不知道错误
    if ((msg == "Script error." && !url) || !error) {
        return
    }
    this.log({
        error,
        type: 'script handle'
    })
}

对静态访问资源失败做监听：

window.addEventListener(
    'error',
    (event):boolean => {
        console.log(event)
        // 过滤 js error
        const target = event.target || event.srcElement;
        const isElementTarget =
            target instanceof HTMLScriptElement ||
            target instanceof HTMLLinkElement ||
            target instanceof HTMLImageElement;
        if (!isElementTarget) {

            return false;
        }
        // 上报资源地址
        const url =
            target.src ||
            target.href;

        this.log({
            error: new Error(`ResourceLoadError: ${url}`),
            type: 'resource load'
        });
        return true
    },
    true
);

上报信息优化

合并类似的错误

相同的报错，例如 Cannot find variable 'id'，在不同浏览器显示的错误信息不一样，但其实都是相同的报错，这时可以通过正则对这些错误进行合并；

对无用的上报信息进行过滤

有时候错误信息只有undefined，或者是空的，这时可以通过SDK的过滤器进行过滤
对白名单域名的js出现的错误才进行上报
在后台设置合适的过滤条件，如 浏览器限制等

提供更清晰的上报信息

提供 设备、执行环境 、用户信息 等上下文，
为接口请求报错提供 error - requestUrl的标题，并提供整个请求的上下文信息

为错误设置合适的等级

错误的等级意味着影响项目正常运行的严重程度，需要更优先地进行处理

fatal 已经影响到整个项目的运行
error 只影响到单独功能的运行
warning 有错误，但不影响项目功能运行

前言