When you’re in a microfrontend scenario, whereby the “frontend” is split up into multiple isolated applications - how will this translate to how Sentry works?
- Should each MFE have its own Sentry project?
- Or rather, 1 project for the “website”?
@marais have you had any luck getting this setup and working?
I’m currently working on something similar. We have each of our front end react application packages in a single monorepo using typescript and lerna.
I’d like to configure a single sentry client that gets placed on the page (tied to the project), and then each of these apps pick up the client, and use it’s own scope with tags to differentiate between packages and route the alerts to the appropriate team.
Where I’m getting hung up is organizing the source maps in sentry for the project. We have a built webpack bundle for each package. What options are there for managing source maps output from multiple webpack bundles within a single sentry project?
Any recommendations concerning sentry and micro front ends would be a great help
I’m currently looking at this issue, and I found that Luca Mezzalira advises for each micro-frontend to track its own errors. (errors handling are managed inside each micro-frontends, the bootstrap handles its own errors. | by Luca Mezzalira | Medium)
I believe the relevant part of the Sentry docs is https://docs.sentry.io/platforms/javascript/advance-settings/#using-a-client-directly
What options are there for managing source maps output from multiple webpack bundles within a single sentry project?
I guess you could upload all the source maps to the same Sentry project?
However, I’m wondering if it would be better for each micro-frontend team to have their own Sentry project (in which case the manual instantiation of Clients and Hubs from the docs above makes even more sense since you could use several Sentry DSN on the same page).
I’ve shared my current findings in this GitHub repository.
Would love to have your feedback.