小程序接入Sentry监控

kiscon

已于 2024-04-25 09:45:48 修改

阅读量2k

点赞数

CC 4.0 BY-SA版权

文章标签：小程序 vue.js sentry-mina

于 2023-05-07 23:29:12 首次发布

本文链接：https://blog.youkuaiyun.com/kiscon/article/details/130549933

文章介绍了如何在小程序中使用sentry-minia库进行异常监控，通过创建并配置sentry.ts文件，集成到Vue应用中，设置错误处理器来捕获并报告错误信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

安装

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

使用

新增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}`)
    })
  }
}

在main.ts中注册sentry


import Vue from 'vue'

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

useSentry(Vue)

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

效果

在这里插入图片描述

代码参考