sentry-reporter-js

$3

sentry 监控平台 前端 js sdk

- 监控 xhr 错误 httpError (同一状态码与同一请求方法视为一类 httpError)
- 监控资源加载错误 resourceError （同一标签视为一类 ResourceError)
- 监控运行时错误
- 监控 promise 错误
- 监控客户端上下线状态

接入

``js
import SentryReporter from "sentry-reporter-js";
import Vue from 'vue'

SentryReporter.init({
dsn: "" // sentry js dsn,
enable:true, // 是否启用上报插件
debug:false, // 控制台展示发送给sentry的数据，不会发送请求，（！该选项会强制SentryReporter enable状态为true）
environment:'pre', // 上报环境
release:'', // 发布版本 一般为commit号
ignoreErrors:[ // 忽略的错误 正则数组
'WeixinJSBridge',
/null is not an object.+evaluating.+(a\.childNodes).+/,
/open\.weixin\.qq\.com/,
/up\.qbox\.me/
],
resourceError:{
level:'warning' // 默认日志级别
captureTagName:['img','audio','video','link'] // 抓取资源错误的标签 不设置标签的资源不上报 但是会自动进入breadcrumb，以供运行时错误时显示
},
httpError:{
level:'warning' // 默认日志级别
responseHeaderTags: ['x-request-id'] // 自定义响应头字段为标签，默认为空
},
framework:{
Vue:Vue // 集成的框架构造函数
}
});
`

SentryReporter's api

`js
SentryReporter.setFramework({
Vue: window.Vue
})

// 设置全局 tag上下文
SentryReporter.setTagsContext({
tag1: 1,
tag2: 2
})

// 设置全局用户上下文
SentryReporter.setUserContext({
name: 'lee'
})

// 设置全局 额外错误信息
SentryReporter.setExtraContext({
extra1: 1,
extra2: 2
})
`

$3

`js
const err = new Error('错误信息')
SentryReporter.captureException(err) // 监控端显示 Error 错误信息

// 设置自定义错误类型
const err = new Error('错误信息2')
err.name = 'WxSdkError'
SentryReporter.captureException(err) // 监控端显示 WxSdkError 错误信息2

// 发送额外信息
SentryReporter.captureException(err,{ // 监控端详情页会追加 tag1,tag2 标签，添加额外信息
// 自定义tag 请只使用英文作为键名
tags:{
tag1:1,
tag2:2
},
// 自定义extra
extra:{
a:1,
b:2
},
level:'error' // 错误日志级别 可选：error|warning|info
})

``

注意

- Promise 错误只能抓取 Error 对象实例或字符和数字，无法抓取 plainObject,
如是无须上报的错误对象,请给与 noReport 属性
- ResourceError 和 httpError 默认日志级别为 warning
- ResourceError 中未声明的标签如发生资源错误，不会上报，但是会在 breadcrumb 中以供参考