Mini program connected to Sentry monitoring

The mini program sentry-minia application, that is, Sentry has no official API for providing to mini programs. You can use the library provided by a third party and use the original API to implement exception monitoring on the mini program side.

Install

1. npm install sentry-mina --save
2. yarn add sentry-mina
3. Copy sentry-mina/dist/sentry-mina.js to the project

use

1. Add a new utils/sentry.ts file with the following contents:

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. Register sentry in main.ts

import Vue from 'vue'

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

useSentry(Vue)

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