完整攻略如下：

Qiankun Sentry 监控异常上报无法自动区分项目解决

问题描述

在使用 Qiankun 进行微前端架构开发时，可能会出现 Sentry 监控异常上报无法自动区分项目的问题。具体表现为：在一个微应用抛出异常，异常信息被上报到了主应用的 Sentry 中，而无法定位到哪个微应用抛出了异常。

原因分析

这个问题的根本原因是 Sentry 是一个全局的异常监控系统，而 Qiankun 是一个微前端架构，各个微应用通过装载到主应用中实现合作。由于 Sentry 是全局的，因此所有微应用的异常都会被上报到同一个 Sentry 项目中，无法区分。

解决方案

为了解决这个问题，我们需要实现 Sentry 异常上报自动区分微应用法。具体解决方案如下：

1. 在每个微应用中通过配置初始化自己独立的 Sentry 实例。

import * as Sentry from '@sentry/browser'

Sentry.init({
  dsn: 'YOUR_DSN',
  release: 'YOUR_RELEASE',
  environment: 'YOUR_ENVIRONMENT',
})

1. 修改微应用默认的异常处理函数，以实现将异常信息上报到自己的 Sentry 项目中。

// 重写 Qiankun 默认的子应用异常处理函数
const originRender = render
render = props => {
  const { container, ...rest } = props
  // 微应用初始化时即注册全局异常处理函数
  addGlobalUncaughtErrorHandler(error => {
    Sentry.captureException(error)
  })
  return originRender({ container, ...rest })
}

示例说明

示例1

假设我们有两个微应用：微应用 A 和微应用 B。它们的域名分别为：http://localhost:8001 和 http://localhost:8002。我们已经在 Sentry 项目中分别创建了两个对应的项目：A-Project 和 B-Project。现在我们需要实现异常上报自动区分。

在微应用 A 中加入配置文件：

import * as Sentry from '@sentry/browser'

Sentry.init({
  dsn: 'YOUR_DSN_FOR_APP_A',
  release: 'YOUR_RELEASE_FOR_APP_A',
  environment: 'YOUR_ENVIRONMENT_FOR_APP_A',
})

在微应用 B 中加入配置文件：

import * as Sentry from '@sentry/browser'

Sentry.init({
  dsn: 'YOUR_DSN_FOR_APP_B',
  release: 'YOUR_RELEASE_FOR_APP_B',
  environment: 'YOUR_ENVIRONMENT_FOR_APP_B',
})

然后在主应用中加入修改的异常处理函数：

const originRender = render
render = props => {
  const { container, ...rest } = props
  addGlobalUncaughtErrorHandler(error => {
    const currentApp = qiankunUtil.getActiveMicroAppName()
    switch (currentApp) {
      case 'appA':
        Sentry.withScope(scope => {
          scope.setFingerprint(['appA', error.message])
          Sentry.captureException(error)
        })
        break
      case 'appB':
        Sentry.withScope(scope => {
          scope.setFingerprint(['appB', error.message])
          Sentry.captureException(error)
        })
        break
      default:
        Sentry.captureException(error)
        break
    }
  })
  return originRender({ container, ...rest })
}

这样，当微应用 A 抛出异常时，异常信息会被 Sentry 上报到 A-Project；当微应用 B 抛出异常时，异常信息会被 Sentry 上报到 B-Project。

示例2

我们也可以通过设置自定义标签实现监控数据的多维度分析，在这里给出一个基于自定义标签的实现方案：

1. 在每个微应用初始化时，设置自定义标签appId为当前应用的name。

import * as Sentry from '@sentry/browser'

Sentry.init({
  dsn: 'YOUR_DSN',
  release: 'YOUR_RELEASE',
  environment: 'YOUR_ENVIRONMENT',
  integrations: [
    new Sentry.Integrations.FunctionToString(),
    new Sentry.Integrations.LinkedErrors({
      key: 'reduxAction',
    }),
  ],
})

const currentMicroAppName = runtime.getName()
Sentry.configureScope(scope => {
  scope.setTag('appId', currentMicroAppName as string)
})

1. 在主应用中的异常处理函数中加入 appId 标签。

addGlobalUncaughtErrorHandler(error => {
  Sentry.withScope(scope => {
    const currentAppId =
      qiankunUtil.getActiveMicroAppName() || (window as any).__CURRENT_MICRO_APP_NAME__ // 从 global 取
    scope.setTag('appId', currentAppId)
    Sentry.captureException(error)
  })
})

这样，我们就可以通过设置 appId 标签实现在 Sentry 后台对监控数据的多维度分析了。