Module Federated Apps - Do not capture everything

[ghlLarney]

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/vue

SDK Version

7.107.0

Framework Version

No response

Link to Sentry event

https://gohighlevel.sentry.io/insights/frontend/?end=2025-03-05T23%3A29%3A59&environment=production&project=4507072894402560&start=2025-03-05T00%3A00%3A00&utc=true

Reproduction Example/SDK Setup

Current Setup:

1. We have a micro-frontend architecture with:
   • Main application in Vue 2 (mother app)
   • Multiple micro-apps in Vue 3 (loaded via module federation)
   • Using vue-composition-api to make Vue 3 code compatible with Vue 2
2. Sentry Configuration:
   • Single Sentry initialization in the main app
   • Separate DSNs for each micro-app for isolated error tracking
   • Using sentry-vue SDK

Steps to Reproduce

NA

Expected Result

1. Transaction Visibility:
   • Transactions from micro-frontends are not properly linked with the main app
   • User journey tracking is fragmented
   • Spans and breadcrumbs from different apps appear as separate traces instead of being unified
2. We want all monitoring data (spans, breadcrumbs, transactions) from both the main app and micro-frontends to appear under a single trace for better visibility into the complete user journey.
3. Would upgrading the sentry-vue SDK version help resolve this issue of fragmented tracing?

Actual Result

[lforst]

You can not use performance monitoring in micro frontends when you instrument performance monitoring in the main app. This is a limitation. Only instrument performance monitoring once per page!

[ghlLarney]

Thanks for the response @lforst
Can't we get breadcrumbs or spans out of micro frontend?

[ghlLarney]

Also, if this is a limitation today, can we get to a work around where we pass events from microapp to main app?

[Lms24]

Also, if this is a limitation today, can we get to a work around where we pass events from microapp to main app?

The first thing coming to my mind would be to pass a reference of the main Sentry scope/client to your micro apps and directly call scope.startSpan(...) on these. Auto instrumentation won't work in this setting.

[lforst]

Also, have you seen: https://docs.sentry.io/platforms/javascript/best-practices/micro-frontends/

[ghlLarney]

Yes, I've gone through the documentation you've shared. Interestingly the second last paragraph is something which makes it possible right?

Starting with version 8.7.0, if you have multiple Sentry JavaScript SDKs on the same page, they only interact with each other if they're using the same version. This prevents unwanted cross-SDK interactions, where calls or accesses to recently added or no longer existing SDK APIs would lead to errors. A classic example for this are browser extensions or 3rd party scripts using Sentry when the host app also uses Sentry.

[lforst]

Errors tracking: possible.
Performance tracking: not possible. (Actually, it is possible but not in granular MFE fashion - only host app)