vue sentry codes

129 阅读1分钟
//babel
npm i babel-plugin-transform-class-properties 
    "babel-plugin-transform-class-properties": "^6.24.1",
    
    
"babel": {
    "presets": [
      "@vue/app",
      [
        "@babel/preset-env",
        {
          "useBuiltIns": "entry"
        }
      ]
    ],
    "plugins":["transform-class-properties"]
  },
  
```js
//https://sentry.io
//main.js
import Report from '@/utils/sentry'
let sentry = Report.getInstance(Vue, {
  env: process.env.ENV,
  sys: process.env.VUE_APP_NAME
})
Vue.prototype.$log = sentry // 设置全局变量
Vue.prototype.$info = sentry.info.bind(sentry) // 设置全局变量
Vue.prototype.$warn = sentry.warn.bind(sentry) // 设置全局变量
Vue.prototype.$error = sentry.error.bind(sentry) // 设置全局变量
//sentry.js
import Raven from 'raven-js'
import RavenVue from 'raven-js/plugins/vue'
class Report {
  static dsn = 'https://xxxx@xxxx.ingest.sentry.io/5627029'
  /**
   * Creates an instance of Report.
   * @param {*} Vue
   * @param {*} [options={user,sys}]
   * @memberof Report
   */
  constructor(Vue, options = {}) {
    if (process.env.NODE_ENV === 'production') {
      // TODO
    }
    this.Vue = Vue
    this.options = options
  }
  /**
   * 单例模式
   */
  static getInstance(Vue, options) {
    if (!(this.instance instanceof this)) {
      this.instance = new this(Vue, options)
      this.instance.install()
      this.instance.registerError()
    }
    return this.instance
  }
  /**
   * init
   */
  install() {
    Raven.config(Report.dsn, {
      release: '1.0.0',
      environment: 'production'
      // whitelistUrls: [/localhost/, /test\.oa\.com/]
    })
      .addPlugin(RavenVue, this.Vue)
      .install()
    // 记录用户信息
    Raven.setUserContext({
      user: this.options.user || ''
    })
    // 设置全局tag标签
    Raven.setTagsContext({ environment: this.options.env || '', system: this.options.sys })
  }
  setUser(user) {
    Raven.setUserContext({
      user: user
    })
  }
  /**
   * 注册全局错误处理
   */
  registerError() {
    // 监听error
    window.onerror = (msg, url, line, col, error) => {
      console.log('onerror')
      if (msg !== 'Script error.' && !url) {
        return true
      }
      setTimeout(() => {
        let data = {}
        col = col || (window.event && window.event.errorCharacter) || 0
        data.url = url
        data.line = line
        data.col = col
        data.error = error
        if (error && error.stack) {
          data.msg = error.stack.toString()
        }
        this.log(data)
      }, 0)
      return true
    }
    // 监听promise
    window.addEventListener('unhandledrejection', err => {
      console.log('unhandledrejection')
      setTimeout(() => {
        this.log(JSON.stringify(err))
      }, 0)
    })
  }
  info(data, options) {
    this.log(data, 'info', options)
  }
  warn(data, options) {
    this.log(data, 'warning', options)
  }
  error(data, options) {
    this.log(data, 'error', options)
  }
  /**
   * 主动上报
   * type: 'info','warning','error'
   */
  log(data = null, type = 'error', options = {}) {
    let func = console.log
    if (type === 'warning') {
      func = console.warn
    }
    if (type === 'error') {
      func = console.error
    }
    if (Array.isArray(data)) func(...data)
    else func(data)

    // 添加面包屑
    Raven.captureBreadcrumb({
      message: data,
      category: 'manual message'
    })
    Raven.captureMessage(data)

    // 异常上报
    if (data instanceof Error) {
      Raven.captureException(data, {
        level: type,
        logger: 'manual exception',
        tags: { options: options }
      })
    } else {
      Raven.captureException('error', {
        level: type,
        logger: 'manual data',
        extra: {
          data: data,
          options: this.options,
          date: new Date()
        }
      })
    }
  }
}
export default Report