Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -33,11 +33,39 @@ If your app uses micro frontends, it's very useful to be able to track which one

Below you'll find setup instructions for both an automatic and a manual way to route errors to different Sentry projects.

<PlatformSection supported={["javascript.nextjs"]}>

## Vercel Multi-Zone Micro Frontends

Vercel's multi-zone applications let you slice a large app into smaller, independently managed projects. Each project operates as its own application, with its own UI and tech stack. For example, you might use Next.js for one project, SvelteKit for another, and React for a third.

To set up Sentry in a multi-zone setup, configure Sentry separately within each project. Follow the installation steps for the framework each project uses. Here are a few examples:

- **[Next.js](/platforms/javascript/guides/nextjs/)**
- **[React](/platforms/javascript/guides/react/)**
- **[SvelteKit](/platforms/javascript/guides/sveltekit/)**

We recommend using a different DSN for each project. This makes it easier to
identify which project errors are coming from, helping you track issues and
fix them faster in complex frontend architectures.

<Alert>
With the exception of Vercel multi-zone micro frontends, you should call
`Sentry.init()` only once in your application. Initializing Sentry multiple
times can lead to unexpected behavior.
</Alert>

</PlatformSection>

<PlatformSection notSupported={["javascript.nextjs"]}>

<Alert>
In all cases `Sentry.init()` must never be called more than once, doing so
will result in undefined behavior.
</Alert>

</PlatformSection>

## Automatically Route Errors to Different Projects

`ModuleMetadata` and `makeMultiplexedTransport` can be used together to automatically route events to specific Sentry projects that represent your micro frontend services. Events will be routed once the service where the error occurred has been identified, ensuring errors are tracked in the correct project.
Expand Down Expand Up @@ -75,7 +103,8 @@ module.exports = {
```

<Alert>
**Replace `__MODULE_DSN__` with your actual Sentry project DSN.** You can find your DSN in your Sentry project settings under Client Keys (DSN).
**Replace `__MODULE_DSN__` with your actual Sentry project DSN.** You can find
your DSN in your Sentry project settings under Client Keys (DSN).
</Alert>

Once metadata has been injected into modules, the `moduleMetadataIntegration`
Expand Down Expand Up @@ -203,7 +232,9 @@ init({
```

<Alert>
**Replace `__DEFAULT_DSN__` with your actual Sentry project DSN.** This should be the DSN for your default/fallback Sentry project. You can find your DSN in your Sentry project settings under Client Keys (DSN).
**Replace `__DEFAULT_DSN__` with your actual Sentry project DSN.** This should
be the DSN for your default/fallback Sentry project. You can find your DSN in
your Sentry project settings under Client Keys (DSN).
</Alert>

Once this is set up, errors - both handled and unhandled - will be automatically routed to the right project.
Expand Down Expand Up @@ -257,7 +288,8 @@ init({
- Replace `__CART_DSN__` with the DSN for your cart micro frontend's Sentry project
- Replace `__GALLERY_DSN__` with the DSN for your gallery micro frontend's Sentry project

You can find your DSNs in each Sentry project's settings under Client Keys (DSN).
You can find your DSNs in each Sentry project's settings under Client Keys (DSN).

</Alert>

You can then set tags/contexts on events in individual micro-frontends to decide which Sentry project to send the event to as follows:
Expand Down
1 change: 1 addition & 0 deletions docs/platforms/javascript/guides/nextjs/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -217,6 +217,7 @@ Our next recommended steps for you are:
- Learn how to [manually capture errors](/platforms/javascript/guides/nextjs/usage/)
- Continue to [customize your configuration](/platforms/javascript/guides/nextjs/configuration/)
- Get familiar with [Sentry's product features](/product) like tracing, insights, and alerts
- Learn how to [set up Sentry for Vercel's micro frontends](/platforms/javascript/guides/nextjs/best-practices/micro-frontends/)
- Learn more about our [Vercel integration](/organization/integrations/deployment/vercel/)

<Expandable permalink={false} title="Are you having problems setting up the SDK?">
Expand Down
Loading