|
| 1 | +--- |
| 2 | +title: Micro Frontends |
| 3 | +description: "Learn how to add Sentry instrumentation to your Vercel's micro frontend projects." |
| 4 | +--- |
| 5 | + |
| 6 | +<PlatformContent includePath="getting-started-prerequisites" /> |
| 7 | + |
| 8 | +You also need a [micro frontends project](https://vercel.com/docs/microfrontends) deployed to Vercel. |
| 9 | + |
| 10 | +## Overview |
| 11 | + |
| 12 | +There are many ways to use micro frontends. You can split your application into smaller projects, each managed by a different team. Each micro frontend project can be either a separate application with its own tech stack and UI, or it can contribute a piece of functionality or content to a host application. |
| 13 | + |
| 14 | +- **Multi-zone applications**: Multiple independent projects, where each is its own application with its own UI and tech stack. |
| 15 | +- **Module Federation**: A host application that pulls in other applications as dependencies or shares components and functionality with other applications. |
| 16 | + |
| 17 | +## Multi-zone Applications |
| 18 | + |
| 19 | +Multi-zone applications allow you to slice a large application into smaller, more manageable projects. Each project is its own application with its own UI and tech stack. For example, you could use Next.js for one project, SvelteKit for another, and React for a third. |
| 20 | + |
| 21 | +To set up Sentry for a multi-zone application, set up Sentry for each project individually by following the installation instructions for each framework: |
| 22 | + |
| 23 | +- **[Next.js](/platforms/javascript/guides/nextjs/)** |
| 24 | +- **[React Router](/platforms/javascript/guides/react/)** |
| 25 | +- **[SvelteKit](/platforms/javascript/guides/sveltekit/)** |
| 26 | + |
| 27 | +<Alert title="Tip"> |
| 28 | + We recommend using a different DSN for each project. This makes it easier to |
| 29 | + identify which project errors are coming from, helping you track issues and |
| 30 | + fix them faster in complex frontend architectures. |
| 31 | +</Alert> |
| 32 | + |
| 33 | +## Module Federation |
| 34 | + |
| 35 | +For micro frontends using module federation (where a host application pulls in other applications as dependencies), see the [JavaScript Micro Frontends documentation](/platforms/javascript/best-practices/micro-frontends/), which covers: |
| 36 | + |
| 37 | +- Automatically routing errors to different projects using `ModuleMetadata` and `makeMultiplexedTransport` |
| 38 | +- Manually routing errors to different projects |
| 39 | +- SDK version alignment across micro frontends |
0 commit comments