小程序接入Sentry监控

小程序sentry-minia应用，即Sentry 无官方 api 用于提供给小程序，可以使用第三方根据提供的库，可使用原有 api 实现小程序端的异常监控。

安装

1. npm install sentry-mina --save
2. yarn add sentry-mina
3. 将 sentry-mina/dist/sentry-mina.js 拷贝到项目中

使用

1. 新增utils/sentry.ts文件，内容如下：

import * as Sentry from 'sentry-mina'
import dayjs from 'dayjs'

const sentryDsn = 'https://xxxx.com/'

const isOpenSentry = !!sentryDsn

// 注册
// https://www.npmjs.com/package/sentry-mina?activeTab=readme
export const useSentry = (Vue) => {
	if (!isOpenSentry) return

	Sentry.init({
		dsn: sentryDsn,
		ignoreErrors: ['ResizeObserver loop limit exceeded'],
		tracesSampleRate: 1.0,
    	release: 'mini',
		environment: process.env.NODE_ENV,
		beforeSend(event: any) {
			delete event.extra.launch
			return event
		}
	})

	// https://www.javascriptc.com/vue3js/api/application-config.html#errorhandler
  Vue.config.errorHandler = function(err, vm, info) {
    const page = getCurrentPages()
    const curr = page[page.length - 1] ?? {}

    const opts = {
      title: curr.__data__ ? curr.__data__.head_title : '',
      path: curr.route || uni.getLaunchOptionsSync().path,
      fullPath: curr.$page ? curr.$page.fullPath : '',
      message: err.message,
      trace: info,
      time: dayjs().format('YYYY-MM-DD HH:mm:ss')
    }

    // Vue error reporting
    Sentry.withScope(scope => {
      scope.setExtra('Report[Vue]', opts)
      Sentry.captureMessage(`${opts.message}-${opts.path}`)
    })
  }
}

2. 在main.ts中注册sentry

import Vue from 'vue'

import { useSentry } from './utils/sentry'

useSentry(Vue)

new Vue({
 ...App,
}).$mount()

效果

代码参考