sentry-reporter-js

sentry-reporter-js

sentry 监控平台 前端 js sdk

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

接入

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

SentryReporter.setFramework({
  Vue: window.Vue
})
 
// 设置全局 tag上下文
SentryReporter.setTagsContext({
  tag1: 1,
  tag2: 2
})
 
// 设置全局用户上下文
SentryReporter.setUserContext({
  name: 'lee'
})
 
// 设置全局 额外错误信息
SentryReporter.setExtraContext({
  extra1: 1,
  extra2: 2
})

自定义上报错误

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 中以供参考