Implementing Session Replay in Micro Frontend Architecture

Jaden P. · 2025-12-22T19:11:14.128Z

I want to implement session replay on a micro frontend architecture. My root, header, login, and footer projects are always running, the other apps get loaded and unloaded between the header and footer based on the route the user is on. So far, I've initiated mixpanel session replay on my header project because that is where mixpanel.init is being called. I'm able to see recordings when I'm on log in page, but after I log in, i don't see the dashboard page even though i can see the dashboard's page actions being logged.

Implementing Session Replay in Micro Frontend Architecture | Mixpanel Community

5 comments

· Sorted by Oldest

kapa.ai
APP
·
·
Hi Jaden P., Please stand by as I search the Mixpanel knowledge base for an AI-powered answer. I normally take about 15 seconds or so. In case AI cannot answer your question, feel free to reach out to Mixpanel support at mixpanel.com/get-support. If you have follow-up questions for this thread, please tag me again with your question: @kapa.ai <follow-up question> 👋
Feel free to ask a follow-up question once I've answered by mentioning me with @kapa.ai
kapa.ai
APP
·
·
You’re seeing this because Session Replay is only active where the JavaScript SDK’s recording plugin is loaded and running.From the docs: - Session Replay is disabled until explicitly enabled via mixpanel.init(..., { record_sessions_percent: ... }). [JS replay] - Recording continues until the user leaves the site/app, is idle for 30 minutes, or you call stop_session_recording(). [Replay privacy]In a micro‑frontend setup like yours, the most likely issues are: 1. The dashboard micro‑frontend is not using the same Mixpanel instance / bundle If the dashboard is a separate build that does not share the same mixpanel instance (or loads a different version without replay enabled), it will not contribute DOM changes to the same replay, even though events are tracked (e.g. via API or another SDK). Session Replay only records what the replay-enabled SDK instance “sees” in the page. [JS replay]2. Replay plugin not active after navigation If navigation to the dashboard causes a full page reload or replaces the root where mixpanel.init was called, the replay plugin may be torn down and never re‑initialized on the new shell. Recording would then stop, but your dashboard might still be sending events (e.g. via server or another client). In that case you’d see events but no replay.3. Recording stopped programmatically If any micro‑frontend calls mixpanel.stop_session_recording() (for example to hide a “sensitive” area) and never calls start_session_recording() again, you’ll get events but no further replay. [Replay privacy]Because the docs don’t cover micro‑frontend specifics, I can’t give an official pattern, but based on what is documented, you’ll want to verify: - There is one shared mixpanel instance on the page, initialized once with record_sessions_percent set (e.g. in the root shell that never unloads). [JS replay] - All micro‑frontends run in the same DOM (no full page reload) so that rrweb (the underlying recorder) can see DOM changes across header, login, dashboard, etc. [JS replay FAQ]
- No micro‑frontend is calling stop_session_recording() without later calling start_session_recording(). [JS replay]If you confirm those and still don’t see the dashboard in replays, the docs recommend checking for $mp_session_record events and then contacting Support with implementation details. [JS replay debugging]
kapa.ai is still learning and improving, please let me know how I did by reacting below.
ℹ️ Tip: Mention @kapa.ai in the thread for follow-ups or DM the app for 1-to-1 help.
Jaden P.
·
·
kapa.ai The mixpanel.init is being called in the header project that never unloads. The project uses singlespa.navigateToUrl to redirect users, but its not a full refresh. It is using the same instance of mixpanel because i can check if mixpanel.__loaded and get a session replay. With this information, is session replay able to record the different micro frontends?
kapa.ai
APP
·
·
Let me check the knowledge base for you again. One moment! 📚
kapa.ai
APP
·
·
Based on the docs, I can’t find anything that explicitly mentions micro frontends or single-spa, so I can’t give a guaranteed “yes” or “no” for that architecture specifically. I can only infer from how Web Session Replay works.What is documented: - On Web, Session Replay records DOM changes in the page using rrweb and reconstructs the page from those changes. [JS replay overview; How replay works] - Recording is controlled by the JS SDK instance where you call mixpanel.init(..., { record_sessions_percent: ... }). [JS replay overview] - Recording persists across page loads for SDK v2.61.0+ (i.e., navigation alone doesn’t inherently stop recording). [JS replay FAQ]Given your setup: - mixpanel.init is called once in a header shell that never unloads. - Navigation is via singleSpa.navigateToUrl (no full refresh). - You’ve confirmed you’re using the same mixpanel instance and can retrieve the current replay via get_session_recording_properties(). [Replay ID]From the docs’ description of how replay works, any DOM changes that occur in the same page where the replay-enabled SDK is running should be capturable, regardless of which micro frontend “owns” those DOM nodes, as long as: 1. The micro frontends are rendered into the same browser document (no iframes, no separate top-level window). 2. Nothing is calling mixpanel.stop_session_recording() when you leave login or enter the dashboard. [Capturing replays] 3. You haven’t configured privacy controls that would effectively block or mask the dashboard area (e.g., a broad record_block_selector that matches its container). [Replay privacy controls; Additional config]So, in principle, with a single initialized SDK instance in a persistent shell and SPA-style navigation, Session Replay should be able to record interactions across all micro frontends that render into that DOM.
Because the docs don’t cover micro frontends or single-spa explicitly, if you still don’t see the dashboard in the replay despite the above being true, that’s outside what the documentation explains. In that case, the next step would be to: - Confirm a replay is still active after login by checking mixpanel.get_session_recording_properties() on the dashboard code path. [Replay ID] - Review your record_block_selector / record_block_class and masking settings to ensure the dashboard container isn’t being blocked. [Additional config] - If those look correct, contact Mixpanel Support with your SDK version and a minimal reproduction, since the micro-frontend behavior isn’t documented.
kapa.ai is still learning and improving, please let me know how I did by reacting below.
ℹ️ Tip: Mention @kapa.ai in the thread for follow-ups or DM the app for 1-to-1 help.

kapa.ai
APP
·
·
Hi Jaden P., Please stand by as I search the Mixpanel knowledge base for an AI-powered answer. I normally take about 15 seconds or so. In case AI cannot answer your question, feel free to reach out to Mixpanel support at mixpanel.com/get-support. If you have follow-up questions for this thread, please tag me again with your question: @kapa.ai <follow-up question> 👋
Feel free to ask a follow-up question once I've answered by mentioning me with @kapa.ai
kapa.ai
APP
·
·
You’re seeing this because Session Replay is only active where the JavaScript SDK’s recording plugin is loaded and running.From the docs: - Session Replay is disabled until explicitly enabled via mixpanel.init(..., { record_sessions_percent: ... }). [JS replay] - Recording continues until the user leaves the site/app, is idle for 30 minutes, or you call stop_session_recording(). [Replay privacy]In a micro‑frontend setup like yours, the most likely issues are: 1. The dashboard micro‑frontend is not using the same Mixpanel instance / bundle If the dashboard is a separate build that does not share the same mixpanel instance (or loads a different version without replay enabled), it will not contribute DOM changes to the same replay, even though events are tracked (e.g. via API or another SDK). Session Replay only records what the replay-enabled SDK instance “sees” in the page. [JS replay]2. Replay plugin not active after navigation If navigation to the dashboard causes a full page reload or replaces the root where mixpanel.init was called, the replay plugin may be torn down and never re‑initialized on the new shell. Recording would then stop, but your dashboard might still be sending events (e.g. via server or another client). In that case you’d see events but no replay.3. Recording stopped programmatically If any micro‑frontend calls mixpanel.stop_session_recording() (for example to hide a “sensitive” area) and never calls start_session_recording() again, you’ll get events but no further replay. [Replay privacy]Because the docs don’t cover micro‑frontend specifics, I can’t give an official pattern, but based on what is documented, you’ll want to verify: - There is one shared mixpanel instance on the page, initialized once with record_sessions_percent set (e.g. in the root shell that never unloads). [JS replay] - All micro‑frontends run in the same DOM (no full page reload) so that rrweb (the underlying recorder) can see DOM changes across header, login, dashboard, etc. [JS replay FAQ]
- No micro‑frontend is calling stop_session_recording() without later calling start_session_recording(). [JS replay]If you confirm those and still don’t see the dashboard in replays, the docs recommend checking for $mp_session_record events and then contacting Support with implementation details. [JS replay debugging]
kapa.ai is still learning and improving, please let me know how I did by reacting below.
ℹ️ Tip: Mention @kapa.ai in the thread for follow-ups or DM the app for 1-to-1 help.
Jaden P.
·
·
kapa.ai The mixpanel.init is being called in the header project that never unloads. The project uses singlespa.navigateToUrl to redirect users, but its not a full refresh. It is using the same instance of mixpanel because i can check if mixpanel.__loaded and get a session replay. With this information, is session replay able to record the different micro frontends?
kapa.ai
APP
·
·
Let me check the knowledge base for you again. One moment! 📚
kapa.ai
APP
·
·
Based on the docs, I can’t find anything that explicitly mentions micro frontends or single-spa, so I can’t give a guaranteed “yes” or “no” for that architecture specifically. I can only infer from how Web Session Replay works.What is documented: - On Web, Session Replay records DOM changes in the page using rrweb and reconstructs the page from those changes. [JS replay overview; How replay works] - Recording is controlled by the JS SDK instance where you call mixpanel.init(..., { record_sessions_percent: ... }). [JS replay overview] - Recording persists across page loads for SDK v2.61.0+ (i.e., navigation alone doesn’t inherently stop recording). [JS replay FAQ]Given your setup: - mixpanel.init is called once in a header shell that never unloads. - Navigation is via singleSpa.navigateToUrl (no full refresh). - You’ve confirmed you’re using the same mixpanel instance and can retrieve the current replay via get_session_recording_properties(). [Replay ID]From the docs’ description of how replay works, any DOM changes that occur in the same page where the replay-enabled SDK is running should be capturable, regardless of which micro frontend “owns” those DOM nodes, as long as: 1. The micro frontends are rendered into the same browser document (no iframes, no separate top-level window). 2. Nothing is calling mixpanel.stop_session_recording() when you leave login or enter the dashboard. [Capturing replays] 3. You haven’t configured privacy controls that would effectively block or mask the dashboard area (e.g., a broad record_block_selector that matches its container). [Replay privacy controls; Additional config]So, in principle, with a single initialized SDK instance in a persistent shell and SPA-style navigation, Session Replay should be able to record interactions across all micro frontends that render into that DOM.
Because the docs don’t cover micro frontends or single-spa explicitly, if you still don’t see the dashboard in the replay despite the above being true, that’s outside what the documentation explains. In that case, the next step would be to: - Confirm a replay is still active after login by checking mixpanel.get_session_recording_properties() on the dashboard code path. [Replay ID] - Review your record_block_selector / record_block_class and masking settings to ensure the dashboard container isn’t being blocked. [Additional config] - If those look correct, contact Mixpanel Support with your SDK version and a minimal reproduction, since the micro-frontend behavior isn’t documented.
kapa.ai is still learning and improving, please let me know how I did by reacting below.
ℹ️ Tip: Mention @kapa.ai in the thread for follow-ups or DM the app for 1-to-1 help.