micro app use sentry

[UltramanWeiLai]

我在 micro app 中使用 sentry ，并且根据文档指示使用 meta data 进行应用 dsn 的区分，但是在 beforeSend 中的 event?.exception?.values?.[0]?.stacktrace?.frames 没有看到 Meta data。

main app config：

import { App } from 'vue'
import router from '@/router'
import * as Sentry from '@sentry/vue'
import { POWER_ENV, USER_INFO, cache } from '@/utils'
import { Operation } from '@sentry/vue/types/types'

const EXTRA_KEY = 'PROCESS_EXTRA'
const dsn = '***'

export default function initSentry(app: App) {
  const isTest = POWER_ENV === 'test'
  const rate = isTest ? 1.0 : 0.2
  const user = JSON.parse((cache.get(USER_INFO) as string) || 'null')

  const transport = Sentry.makeMultiplexedTransport(Sentry.makeFetchTransport, args => {
    const event = args.getEvent()
    if (event && event.extra && EXTRA_KEY in event.extra && Array.isArray(event.extra[EXTRA_KEY])) {
      return event.extra[EXTRA_KEY]
    }
    return []
  })

  const beforeSend = (event: any) => {
    if (event?.exception?.values?.[0]?.stacktrace?.frames) {
      const frames = event.exception.values[0].stacktrace.frames
      const routeTo = frames
        .filter((frame: Record<string, any>) => frame.module_metadata && frame.module_metadata.dsn)
        .map((v: Record<string, unknown>) => v.module_metadata)
        .slice(-1)

      if (routeTo.length) event.extra = { ...event.extra, [EXTRA_KEY]: routeTo }
    }

    return event
  }

  const options = {
    app,
    dsn,
    // debug: true,
    release: __SENTRY_RELEASE__,
    environment: POWER_ENV,
    transport,
    initialScope: {} as any,
    integrations: [
      Sentry.breadcrumbsIntegration({ console: false }), // 面包屑记录
      Sentry.browserTracingIntegration({ router }), // 性能监控
      Sentry.httpContextIntegration(), // 请求监控
      Sentry.replayIntegration({ maskAllText: false, blockAllMedia: false }), // 重播
      Sentry.vueIntegration({ app, attachProps: true }),
      Sentry.moduleMetadataIntegration(), // 模块元数据信息
    ],
    sendDefaultPii: true, // httpContextIntegration：是否收集 cookie 和 header
    sampleRate: rate,
    tracesSampleRate: rate,
    replaysSessionSampleRate: rate,
    replaysOnErrorSampleRate: 1.0,

    beforeSend,

    tracingOptions: {
      trackComponents: true, // 组件跟踪
      hooks: ['activate', 'create', 'destroy', 'mount', 'update', 'unmount'] as Operation[], // 钩子跟踪
    },
  }

  if (user) options.initialScope.user = { id: user.id, username: user.userName, email: user.email, dept: user.deptName }

  Sentry.init(options)
}

main app build config:

export default defineConfig(({ command, mode }) => {
  const base = baseUrl[mode] || baseUrl.development
  const release = `***@${process.env.npm_package_version}+${mode}`

  return {
    base,
    plugins: [
      vue({ template: { compilerOptions: { isCustomElement: tag => /^micro-app/.test(tag) } } }),
      sentryVitePlugin({
        url: ***,
        org: 'sentry',
        project: 'project',
        authToken:  '***',
        telemetry: false,
        // debug: ['development', 'test'].includes(mode),
        release: {
          name: release,
          deploy: { env: mode },
        },
        sourcemaps: {
          assets: 'dist/assets/**',
          ignore: ['node_modules'],
          filesToDeleteAfterUpload: 'dist/**/*.map',
        },
        errorHandler: err => console.log('sentry error:', err),
      }),
    ],
    resolve: { alias: [{ find: '@', replacement: resolve(__dirname, 'src') }] },
    build: { sourcemap: true },
    define: { __SENTRY_RELEASE__: JSON.stringify(release) },
    server: {
      https: httpsOptions,
      host: 'local.whgxwl.com',
      headers: { 'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Headers': 'baggage, Sentry-Trace' },
    },
  }
})

child app build config:

module.exports = defineConfig({
  publicPath: baseUrl[mode],
  parallel: false,
  transpileDependencies: true,
  // productionSourceMap: false,
  chainWebpack: config => {
    config.resolve.alias.set('@', resolve('./src'))
  },
  configureWebpack: {
    plugins: [
      sentryWebpackPlugin({
        url: '***',
        org: 'sentry',
        project: 'project-child',
        authToken:  '***',
        telemetry: false,
        // debug: ['development', 'test'].includes(mode),
        release: {
          name: release,
          deploy: { env: mode },
        },
        sourcemaps: {
          assets: 'dist/js/**',
          ignore: ['node_modules'],
          filesToDeleteAfterUpload: 'dist/**/*.map',
        },
        errorHandler: err => console.log('sentry error:', err),
        _experiments: {
          moduleMetadata: data => {
            const { release } = data
            console.log('moduleMetadata:', data)
            console.log('moduleMetadata:', release)
            console.log('moduleMetadata:', { dsn, release })
            return { dsn, release }
          },
        },
      }),
    ],
  },
  devServer: {
    port: 8300,
    https: true,
    headers: { 'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Headers': 'baggage, Sentry-Trace' },
    // historyApiFallback: { index: '/index.html' },
  },
})