Skip to content

Commit a57a7d2

Browse files
committed
feat: add vercel specific microfrontends guide
1 parent 79bc060 commit a57a7d2

File tree

2 files changed

+40
-0
lines changed

2 files changed

+40
-0
lines changed
Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
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

docs/platforms/javascript/guides/nextjs/index.mdx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -180,6 +180,7 @@ Our next recommended steps for you are:
180180
- Learn how to [manually capture errors](/platforms/javascript/guides/nextjs/usage/)
181181
- Continue to [customize your configuration](/platforms/javascript/guides/nextjs/configuration/)
182182
- Get familiar with [Sentry's product features](/product) like tracing, insights, and alerts
183+
- Learn how to [set up Sentry for Vercel's microfrontends](/platforms/javascript/guides/nextjs/best-practices/micro-frontends/)
183184
- Learn more about our [Vercel integration](/organization/integrations/deployment/vercel/)
184185

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

0 commit comments

Comments
 (0)