Hi FE !
Ai
git
前端面试题
前端小tip
  • vite
  • webpack
npm
  • vue2
  • vue3
react
GitHub
Ai
git
前端面试题
前端小tip
  • vite
  • webpack
npm
  • vue2
  • vue3
react
GitHub
  • 微前端 引入 sentry

微前端 引入 sentry

主应用中

main.ts

import { sentryInitForVueSubApp } from "./sentry.ts"

import * as Sentry from "@sentry/vue";

let loadingInstance: any = null

const app = createApp(App)

if (process.env.VUE_APP_SENTRY_ENV === "prod") {
  Sentry.init({
    app,
    dsn: "https://396bcb150b5e2838b08d0fe9b7b4ab8b@sentry.myserver.cn/2",
    integrations: [
      // Sentry.browserTracingIntegration(),
      // Sentry.replayIntegration(),
    ],
    // Performance Monitoring
    tracesSampleRate: 0.0, // 禁用性能监控
    autoSessionTracking: false,  // 禁用会话录制
    // Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled
    // tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],
    // // Session Replay
    replaysSessionSampleRate: 0.0, // 禁用会话回放采样
    replaysOnErrorSampleRate: 0.0, // 禁用错误会话回放采样
    // beforeSend() {
    //   const currentRoute = router.currentRoute
    //   console.error("currentRoute", currentRoute.value)
    //   return null
    // }
  });
}

registerMicroApps([
  {
    name: 'admin', // app name registered
    entry: process.env.VUE_APP_ADMIN_WEB,
    container: '#micro-app1',
    activeRule: '/rock-app1',
    props: {
      sentryInit: sentryInitForVueSubApp,
    }
  }
]
);

sentry.ts

import { attachErrorHandler, createTracingMixins } from "@sentry/vue";

/**
 *  app用于传入Vue或者Vue示例
 *  options用于传入子应用的sentry配置
 */
export function sentryInitForVueSubApp(app: any, options: any) {
  // attachErrorHandler中,sentry会获取app.config.errorHandler进行处理
  attachErrorHandler(app, options);

  if ("tracesSampleRate" in options || "tracesSampler" in options) {
    app.mixin(
      // createTracingMixins用于在event中追加关于vue的信息,例如从抛出错误的组件到根组件形成的组件轨迹等
      // 即使一个页面用了多个相同的组件,这种信息也能让我们快速定位错误抛自哪个组件实例上
      createTracingMixins({
        ...options,
        ...options.tracingOptions,
      })
    );
  }
}

子应用

main.ts


let instance: any
function render(props = {} as Record<string, any>) {
  const {
    container,
    onGlobalStateChange,
    setGlobalState,
    offGlobalStateChange,
    sentryInit
  } = props

  // 挂载路由
  router = createRouter({
    routes,
    history: createWebHistory(window.__POWERED_BY_QIANKUN__ ? "/rock-app1" : "/")
  })

  // 注册APP实例
  instance = createApp(App)

  instance.use(router)
  instance.use(store)

  if (process.env.VUE_APP_SENTRY_ENV === "prod") {
    sentryInit?.(instance, {
      tracesSampleRate: 0.0, // 禁用性能监控
      autoSessionTracking: false, // 禁用会话录制
      replaysSessionSampleRate: 0.0, // 禁用会话回放采样
      replaysOnErrorSampleRate: 0.0, // 禁用错误会话回放采样
      logErrors: true,
      attachProps: true
    })
  }

  instance.mount(container ? container.querySelector("#app") : "#app")

}

// 独立运行时
if (!window.__POWERED_BY_QIANKUN__) {
  render()
}

Edit this page
最近更新: 2025/12/2 01:46
Contributors: qdleader
qdleader
本站总访问量 129823次 | 本站访客数 12人