From 3b533344f1b95ab3aa3f264cc3c7b723b350fd77 Mon Sep 17 00:00:00 2001 From: Kosty Maleyev Date: Thu, 22 Feb 2024 22:11:31 -0800 Subject: [PATCH 01/14] Simplify/reorganize Micro Frontend Suport --- .../configuration/micro-frontend-support.mdx | 196 ++++++------------ 1 file changed, 61 insertions(+), 135 deletions(-) diff --git a/docs/platforms/javascript/common/configuration/micro-frontend-support.mdx b/docs/platforms/javascript/common/configuration/micro-frontend-support.mdx index 8995a91e706363..00604f6527a08d 100644 --- a/docs/platforms/javascript/common/configuration/micro-frontend-support.mdx +++ b/docs/platforms/javascript/common/configuration/micro-frontend-support.mdx @@ -14,18 +14,27 @@ keywords: If your frontend includes JavaScript bundles from multiple sources with different release cycles, you may want to identify these or route events to specific projects. This is especially useful if you've set up [module federation](https://module-federation.github.io/) or a similar frontend architecture. -## Identifying the source of errors +## Automatically route errors to different projects depending on module -To identify the source of an error, you must inject metadata that helps identify -which bundles were responsible for the error. You can do this with any of the -Sentry bundler plugins by enabling the `_experiments.moduleMetadata` option. +`ModuleMetadata` and `makeMultiplexedTransport` can be used together to automatically route +events to different Sentry projects based on the module where the error +occurred. + + + -`moduleMetadata` can be any serializable data or alternatively a function that -returns serializable data. If you supply a function, it will be passed an object -containing the `org`, `project`, and `release` strings. +First, to identify the source of an error, you must inject metadata that helps identify +which bundles were responsible for the error. You can do this with any of the +Sentry bundler plugins by enabling the `_experiments.moduleMetadata` option. ```javascript // webpack.config.js @@ -35,63 +44,69 @@ module.exports = { devtool: "source-map", plugins: [ sentryWebpackPlugin({ - /* Other plugin config */ _experiments: { - moduleMetadata: ({ org, project, release }) => { - return { team: "frontend", release }; - }, + moduleMetadata: ({ release }) => ({ dsn: "__MODULE_DSN__", release }), }, }), ], }; ``` -### `ModuleMetadata` Integration - -Requires SDK version `7.59.0` or higher. - Once metadata has been injected into modules, the `moduleMetadataIntegration` can be used to look up that metadata and attach it to stack frames with -matching file names. This metadata is then available in other integrations or in -the `beforeSend` callback as the `module_metadata` property on each -`StackFrame`. This can be used to identify which bundles may be responsible -for an error and used to tag or route events. +matching file names. This metadata is then available in the `beforeSend` callback +as the `module_metadata` property on each `StackFrame`. This can be used to identify +which bundles may be responsible for an error and, once the destination is determined, +store it as a list of DSN-release pairs in `event.extra[MULTIPLEXED_TRANSPORT_EXTRA_KEY]` +where multiplexed transport knows to look for. + +In practice here is what your Sentry intialization should look like: ```javascript -import * as Sentry from "@sentry/browser"; +import { init, makeFetchTransport, moduleMetadataIntegration, makeSimpleMultiplexedTransport, MULTIPLEXED_TRANSPORT_EXTRA_KEY } from "@sentry/browser"; -Sentry.init({ - dsn: "___PUBLIC_DSN___", - integrations: [Sentry.moduleMetadataIntegration()], +init({ + dsn: "__DEFAULT_DSN__", + integrations: [moduleMetadataIntegration()], + makeSimpleMultiplexedTransport(makeFetchTransport), beforeSend: (event) => { - const frames = event?.exception?.values?.[0].stacktrace.frames || []; - // Get all team names in the stack frames - const teams = frames - .filter((frame) => frame.module_metadata && frame.module_metadata.team) - .map((frame) => frame.module_metadata.team); - // If there are teams, add them as extra data to the event - if (teams.length > 0) { - event.extra = { - ...event.extra, - teams, - }; + if (event?.exception?.values?.[0].stacktrace.frames) { + const frames = event.exception.values[0].stacktrace.frames; + + // Find the last frame with module metadata containing a DSN + const route_to = frames + .filter((frame) => frame.module_metadata && frame.module_metadata.dsn) + .map((v) => v.module_metadata) + .slice(-1); // using top frame only - you may want to customize this according to your needs + + event.extra = { + ...event.extra, + [MULTIPLEXED_TRANSPORT_EXTRA_KEY]: route_to, + }; } return event; }, }); +``` + +Once this is set up, errors - both handled and unhandled - will be automatically routed to the right project. You don't need to do anything special. +``` Sentry.captureException(new Error("oh no!")); +// or +throw new Error("oops"); ``` -## Routing events to different projects +## Manually route errors to different projects -Once you've identified which module or modules are likely to be responsible for -an error, you may want to send these events to different Sentry projects. The -multiplexed transport can route events to different Sentry projects based on the -attributes on an event. +If, however, you would like to have more control over the routing of errors to the point +where you explicitly specify the destination for each individual `captureException` that is +possible as well using the more advanced interface multiplexed transport offers. + Requires SDK version `7.59.0` or higher. + The example below uses a `feature` tag to determine which Sentry project to send the event to. If the event does not have a `feature` tag, we send it to the @@ -130,107 +145,18 @@ init({ dsn: "__FALLBACK_DSN__", transport: makeMultiplexedTransport(makeFetchTransport, dsnFromFeature), }); +``` + +You can then set tags/contexts on events in individual micro-frontends to decide which Sentry project to send the event to as follows: +``` captureException(new Error("oh no!"), (scope) => { scope.setTag("feature", "cart"); return scope; }); ``` -You can then set tags/contexts on events in individual micro-frontends to decide which Sentry project to send the event to. - -### `makeMultiplexedTransport` API - -`makeMultiplexedTransport` takes an instance of a transport (we recommend -`makeFetchTransport`) and a matcher function that returns an array of objects -containing the DSN and optionally the release. - -```typescript -interface RouteTo { - dsn: string; - release?: string; -} - -type Matcher = (param: MatchParam) => RouteTo[]; - -declare function makeMultiplexedTransport( - transport: (options: TransportOptions) => Transport, - matcher: Matcher -): (options: TransportOptions) => Transport; -``` - -The matcher function runs after all client processing (`beforeSend` option, event processors from integrations). - -## Combining `ModuleMetadata` and `makeMultiplexedTransport` - -`ModuleMetadata` and `makeMultiplexedTransport` can be used together to route -events to different Sentry projects based on the module where the error -occurred. + +It is important to always use a local scope when setting the tag (either as shown above or using [withScope](../../enriching-events/scopes/#local-scopes)). Using a global scope e.g. through `Sentry.setTag()` will result in all subsequent events being routed to the same DSN regardless of where they originate. + -Ensure your modules have injected metadata containing the project DSN and release: - -```javascript -// webpack.config.js -const { sentryWebpackPlugin } = require("@sentry/webpack-plugin"); - -module.exports = { - devtool: "source-map", - plugins: [ - sentryWebpackPlugin({ - _experiments: { - moduleMetadata: ({ release }) => ({ dsn: "__MODULE_DSN__", release }), - }, - }), - ], -}; -``` - -Then when you initialize Sentry: - -- Add the `ModuleMetadata` integration so metadata is attached to stack frames -- Add a `beforeSend` callback that sets an `extra` property with the target DSN/release -- Create a transport that routes events when the `extra` property is present - -```javascript -import { init, makeFetchTransport, moduleMetadataIntegration, makeMultiplexedTransport } from "@sentry/browser"; - -const EXTRA_KEY = "ROUTE_TO"; - -const transport = makeMultiplexedTransport(makeFetchTransport, (args) => { - const event = args.getEvent(); - if ( - event && - event.extra && - EXTRA_KEY in event.extra && - Array.isArray(event.extra[EXTRA_KEY]) - ) { - return event.extra[EXTRA_KEY]; - } - return []; -}); - -init({ - dsn: "__DEFAULT_DSN__", - integrations: [moduleMetadataIntegration()], - transport, - beforeSend: (event) => { - if (event?.exception?.values?.[0].stacktrace.frames) { - const frames = event.exception.values[0].stacktrace.frames; - // Find the last frame with module metadata containing a DSN - const routeTo = frames - .filter((frame) => frame.module_metadata && frame.module_metadata.dsn) - .map((v) => v.module_metadata) - .slice(-1); // using top frame only - you may want to customize this according to your needs - - if (routeTo.length) { - event.extra = { - ...event.extra, - [EXTRA_KEY]: routeTo, - }; - } - } - - return event; - }, -}); -``` From 55de202c3ad91e7410a4dd4cb3990edac42c8381 Mon Sep 17 00:00:00 2001 From: Kosty Maleyev Date: Thu, 22 Feb 2024 22:50:29 -0800 Subject: [PATCH 02/14] Update micro-frontend-support.mdx --- .../common/configuration/micro-frontend-support.mdx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/platforms/javascript/common/configuration/micro-frontend-support.mdx b/docs/platforms/javascript/common/configuration/micro-frontend-support.mdx index 00604f6527a08d..b26a91e93a3828 100644 --- a/docs/platforms/javascript/common/configuration/micro-frontend-support.mdx +++ b/docs/platforms/javascript/common/configuration/micro-frontend-support.mdx @@ -44,6 +44,7 @@ module.exports = { devtool: "source-map", plugins: [ sentryWebpackPlugin({ + /* Other plugin config */ _experiments: { moduleMetadata: ({ release }) => ({ dsn: "__MODULE_DSN__", release }), }, @@ -149,14 +150,13 @@ init({ You can then set tags/contexts on events in individual micro-frontends to decide which Sentry project to send the event to as follows: + +It is important to always use a local scope when setting the tag (either as shown above or using [withScope](../../enriching-events/scopes/#local-scopes)). Using a global scope e.g. through `Sentry.setTag()` will result in all subsequent events being routed to the same DSN regardless of where they originate. + + ``` captureException(new Error("oh no!"), (scope) => { scope.setTag("feature", "cart"); return scope; }); ``` - - -It is important to always use a local scope when setting the tag (either as shown above or using [withScope](../../enriching-events/scopes/#local-scopes)). Using a global scope e.g. through `Sentry.setTag()` will result in all subsequent events being routed to the same DSN regardless of where they originate. - - From 09ca16b2994b9a49a8d7e9cfabb08f84a9a36843 Mon Sep 17 00:00:00 2001 From: Kosty Maleyev Date: Sat, 24 Feb 2024 18:06:04 -0800 Subject: [PATCH 03/14] default matcher instead of a new method See: https://github.com/getsentry/sentry-javascript/pull/10798#issuecomment-1962081978 --- .../javascript/common/configuration/micro-frontend-support.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/platforms/javascript/common/configuration/micro-frontend-support.mdx b/docs/platforms/javascript/common/configuration/micro-frontend-support.mdx index b26a91e93a3828..aad170e76dd49b 100644 --- a/docs/platforms/javascript/common/configuration/micro-frontend-support.mdx +++ b/docs/platforms/javascript/common/configuration/micro-frontend-support.mdx @@ -69,7 +69,7 @@ import { init, makeFetchTransport, moduleMetadataIntegration, makeSimpleMultiple init({ dsn: "__DEFAULT_DSN__", integrations: [moduleMetadataIntegration()], - makeSimpleMultiplexedTransport(makeFetchTransport), + makeMultiplexedTransport(makeFetchTransport), beforeSend: (event) => { if (event?.exception?.values?.[0].stacktrace.frames) { const frames = event.exception.values[0].stacktrace.frames; From 957361309cdf12c76c1100891f0d1a49b2bbe7d1 Mon Sep 17 00:00:00 2001 From: Kosty Maleyev Date: Wed, 6 Mar 2024 19:21:54 -0800 Subject: [PATCH 04/14] Update docs/platforms/javascript/common/configuration/micro-frontend-support.mdx Co-authored-by: vivianyentran <20403606+vivianyentran@users.noreply.github.com> --- .../javascript/common/configuration/micro-frontend-support.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/platforms/javascript/common/configuration/micro-frontend-support.mdx b/docs/platforms/javascript/common/configuration/micro-frontend-support.mdx index aad170e76dd49b..a0ce5b345996b3 100644 --- a/docs/platforms/javascript/common/configuration/micro-frontend-support.mdx +++ b/docs/platforms/javascript/common/configuration/micro-frontend-support.mdx @@ -14,7 +14,7 @@ keywords: If your frontend includes JavaScript bundles from multiple sources with different release cycles, you may want to identify these or route events to specific projects. This is especially useful if you've set up [module federation](https://module-federation.github.io/) or a similar frontend architecture. -## Automatically route errors to different projects depending on module +## Automatically Route Errors to Different Projects Depending on Module `ModuleMetadata` and `makeMultiplexedTransport` can be used together to automatically route events to different Sentry projects based on the module where the error From b7a817ea2741222fe9b4b7fbb23eeb7fffc566ad Mon Sep 17 00:00:00 2001 From: Kosty Maleyev Date: Wed, 6 Mar 2024 19:26:42 -0800 Subject: [PATCH 05/14] Update docs/platforms/javascript/common/configuration/micro-frontend-support.mdx Co-authored-by: vivianyentran <20403606+vivianyentran@users.noreply.github.com> --- .../common/configuration/micro-frontend-support.mdx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/platforms/javascript/common/configuration/micro-frontend-support.mdx b/docs/platforms/javascript/common/configuration/micro-frontend-support.mdx index a0ce5b345996b3..e612b0355f1a6b 100644 --- a/docs/platforms/javascript/common/configuration/micro-frontend-support.mdx +++ b/docs/platforms/javascript/common/configuration/micro-frontend-support.mdx @@ -57,9 +57,9 @@ Once metadata has been injected into modules, the `moduleMetadataIntegration` can be used to look up that metadata and attach it to stack frames with matching file names. This metadata is then available in the `beforeSend` callback as the `module_metadata` property on each `StackFrame`. This can be used to identify -which bundles may be responsible for an error and, once the destination is determined, -store it as a list of DSN-release pairs in `event.extra[MULTIPLEXED_TRANSPORT_EXTRA_KEY]` -where multiplexed transport knows to look for. +which bundles may be responsible for an error. Once the destination is determined, you can +store it as a list of DSN-release pairs in `event.extra[MULTIPLEXED_TRANSPORT_EXTRA_KEY]` +for the multiplexed transport to reference for routing. In practice here is what your Sentry intialization should look like: From bc35c2c1aa09d622c786f0b9c38a7b555065aae4 Mon Sep 17 00:00:00 2001 From: Kosty Maleyev Date: Wed, 6 Mar 2024 19:27:04 -0800 Subject: [PATCH 06/14] Update docs/platforms/javascript/common/configuration/micro-frontend-support.mdx Co-authored-by: vivianyentran <20403606+vivianyentran@users.noreply.github.com> --- .../javascript/common/configuration/micro-frontend-support.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/platforms/javascript/common/configuration/micro-frontend-support.mdx b/docs/platforms/javascript/common/configuration/micro-frontend-support.mdx index e612b0355f1a6b..e5e2d200cde742 100644 --- a/docs/platforms/javascript/common/configuration/micro-frontend-support.mdx +++ b/docs/platforms/javascript/common/configuration/micro-frontend-support.mdx @@ -61,7 +61,7 @@ which bundles may be responsible for an error. Once the destination is determine store it as a list of DSN-release pairs in `event.extra[MULTIPLEXED_TRANSPORT_EXTRA_KEY]` for the multiplexed transport to reference for routing. -In practice here is what your Sentry intialization should look like: +In practice, here is what your Sentry initialization should look like: ```javascript import { init, makeFetchTransport, moduleMetadataIntegration, makeSimpleMultiplexedTransport, MULTIPLEXED_TRANSPORT_EXTRA_KEY } from "@sentry/browser"; From dbff8f2271dedac5e5390a5350c2b4b419364eda Mon Sep 17 00:00:00 2001 From: Kosty Maleyev Date: Wed, 6 Mar 2024 19:27:45 -0800 Subject: [PATCH 07/14] Update docs/platforms/javascript/common/configuration/micro-frontend-support.mdx Co-authored-by: vivianyentran <20403606+vivianyentran@users.noreply.github.com> --- .../javascript/common/configuration/micro-frontend-support.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/platforms/javascript/common/configuration/micro-frontend-support.mdx b/docs/platforms/javascript/common/configuration/micro-frontend-support.mdx index e5e2d200cde742..4ad5467beb5372 100644 --- a/docs/platforms/javascript/common/configuration/micro-frontend-support.mdx +++ b/docs/platforms/javascript/common/configuration/micro-frontend-support.mdx @@ -91,7 +91,7 @@ init({ }); ``` -Once this is set up, errors - both handled and unhandled - will be automatically routed to the right project. You don't need to do anything special. +Once this is set up, errors - both handled and unhandled - will be automatically routed to the right project. ``` Sentry.captureException(new Error("oh no!")); From 5bd1a2f77dabdeb58ffd4fc613099b51037e1f2d Mon Sep 17 00:00:00 2001 From: Kosty Maleyev Date: Wed, 6 Mar 2024 19:28:13 -0800 Subject: [PATCH 08/14] Update docs/platforms/javascript/common/configuration/micro-frontend-support.mdx Co-authored-by: vivianyentran <20403606+vivianyentran@users.noreply.github.com> --- .../javascript/common/configuration/micro-frontend-support.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/platforms/javascript/common/configuration/micro-frontend-support.mdx b/docs/platforms/javascript/common/configuration/micro-frontend-support.mdx index 4ad5467beb5372..ff4369de1a4eaf 100644 --- a/docs/platforms/javascript/common/configuration/micro-frontend-support.mdx +++ b/docs/platforms/javascript/common/configuration/micro-frontend-support.mdx @@ -99,7 +99,7 @@ Sentry.captureException(new Error("oh no!")); throw new Error("oops"); ``` -## Manually route errors to different projects +## Manually Route Errors to Different Projects If, however, you would like to have more control over the routing of errors to the point where you explicitly specify the destination for each individual `captureException` that is From da2820e2ac49b63d9395392d92a4df30ca3a67c7 Mon Sep 17 00:00:00 2001 From: Kosty Maleyev Date: Wed, 6 Mar 2024 19:29:01 -0800 Subject: [PATCH 09/14] Update docs/platforms/javascript/common/configuration/micro-frontend-support.mdx Co-authored-by: vivianyentran <20403606+vivianyentran@users.noreply.github.com> --- .../common/configuration/micro-frontend-support.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/platforms/javascript/common/configuration/micro-frontend-support.mdx b/docs/platforms/javascript/common/configuration/micro-frontend-support.mdx index ff4369de1a4eaf..de0eabf659694b 100644 --- a/docs/platforms/javascript/common/configuration/micro-frontend-support.mdx +++ b/docs/platforms/javascript/common/configuration/micro-frontend-support.mdx @@ -102,8 +102,8 @@ throw new Error("oops"); ## Manually Route Errors to Different Projects If, however, you would like to have more control over the routing of errors to the point -where you explicitly specify the destination for each individual `captureException` that is -possible as well using the more advanced interface multiplexed transport offers. +where you explicitly specify the destination for each individual `captureException`, +you can do that with the more advanced interface multiplexed transport offers. Requires SDK version `7.59.0` or higher. From 4511e1e44f93e978850fe8aabb22adf28465c2a6 Mon Sep 17 00:00:00 2001 From: Kosty Maleyev Date: Wed, 6 Mar 2024 19:36:58 -0800 Subject: [PATCH 10/14] Update micro-frontend-support.mdx --- .../configuration/micro-frontend-support.mdx | 15 +++++---------- 1 file changed, 5 insertions(+), 10 deletions(-) diff --git a/docs/platforms/javascript/common/configuration/micro-frontend-support.mdx b/docs/platforms/javascript/common/configuration/micro-frontend-support.mdx index de0eabf659694b..9dffe6ddb5aa8f 100644 --- a/docs/platforms/javascript/common/configuration/micro-frontend-support.mdx +++ b/docs/platforms/javascript/common/configuration/micro-frontend-support.mdx @@ -80,10 +80,10 @@ init({ .map((v) => v.module_metadata) .slice(-1); // using top frame only - you may want to customize this according to your needs - event.extra = { - ...event.extra, - [MULTIPLEXED_TRANSPORT_EXTRA_KEY]: route_to, - }; + event.extra = { + ...event.extra, + [MULTIPLEXED_TRANSPORT_EXTRA_KEY]: route_to, + }; } return event; @@ -93,11 +93,6 @@ init({ Once this is set up, errors - both handled and unhandled - will be automatically routed to the right project. -``` -Sentry.captureException(new Error("oh no!")); -// or -throw new Error("oops"); -``` ## Manually Route Errors to Different Projects @@ -151,7 +146,7 @@ init({ You can then set tags/contexts on events in individual micro-frontends to decide which Sentry project to send the event to as follows: -It is important to always use a local scope when setting the tag (either as shown above or using [withScope](../../enriching-events/scopes/#local-scopes)). Using a global scope e.g. through `Sentry.setTag()` will result in all subsequent events being routed to the same DSN regardless of where they originate. +It is important to always use a local scope when setting the tag (either as shown below or using [withScope](../../enriching-events/scopes/#local-scopes)). Using a global scope e.g. through `Sentry.setTag()` will result in all subsequent events being routed to the same DSN regardless of where they originate. ``` From 8954cd2fcbd19e54d79f13fe0bf60e6e0824e2f7 Mon Sep 17 00:00:00 2001 From: Kosty Maleyev Date: Wed, 6 Mar 2024 19:59:36 -0800 Subject: [PATCH 11/14] Note about calling Sentry.init() only once --- .../javascript/common/configuration/micro-frontend-support.mdx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/platforms/javascript/common/configuration/micro-frontend-support.mdx b/docs/platforms/javascript/common/configuration/micro-frontend-support.mdx index 9dffe6ddb5aa8f..2018db0a2dcaa8 100644 --- a/docs/platforms/javascript/common/configuration/micro-frontend-support.mdx +++ b/docs/platforms/javascript/common/configuration/micro-frontend-support.mdx @@ -14,6 +14,8 @@ keywords: If your frontend includes JavaScript bundles from multiple sources with different release cycles, you may want to identify these or route events to specific projects. This is especially useful if you've set up [module federation](https://module-federation.github.io/) or a similar frontend architecture. +Below we offer two approaches. Please note that `Sentry.init()` must be called only once, doing otherwise will result in undefined behavior. + ## Automatically Route Errors to Different Projects Depending on Module `ModuleMetadata` and `makeMultiplexedTransport` can be used together to automatically route From 1144e30bb985e01d353f0abace3daecaf6aa8bd5 Mon Sep 17 00:00:00 2001 From: Kosty Maleyev Date: Thu, 21 Mar 2024 09:48:26 -0700 Subject: [PATCH 12/14] Address Luca's comments in micro-frontend-support.mdx --- .../configuration/micro-frontend-support.mdx | 41 ++++++++++++++----- 1 file changed, 31 insertions(+), 10 deletions(-) diff --git a/docs/platforms/javascript/common/configuration/micro-frontend-support.mdx b/docs/platforms/javascript/common/configuration/micro-frontend-support.mdx index 2018db0a2dcaa8..4addee0fdb7527 100644 --- a/docs/platforms/javascript/common/configuration/micro-frontend-support.mdx +++ b/docs/platforms/javascript/common/configuration/micro-frontend-support.mdx @@ -14,7 +14,11 @@ keywords: If your frontend includes JavaScript bundles from multiple sources with different release cycles, you may want to identify these or route events to specific projects. This is especially useful if you've set up [module federation](https://module-federation.github.io/) or a similar frontend architecture. -Below we offer two approaches. Please note that `Sentry.init()` must be called only once, doing otherwise will result in undefined behavior. +Below we offer two approaches. + + +In all cases `Sentry.init()` must never be called more than once, doing so will result in undefined behavior. + ## Automatically Route Errors to Different Projects Depending on Module @@ -36,7 +40,8 @@ Requires SDK version `7.59.0` or higher. First, to identify the source of an error, you must inject metadata that helps identify which bundles were responsible for the error. You can do this with any of the -Sentry bundler plugins by enabling the `_experiments.moduleMetadata` option. +Sentry bundler plugins by enabling the `_experiments.moduleMetadata` option. Example +below is for Webpack, but this is also supported in Vite, Rollup, and esbuild. ```javascript // webpack.config.js @@ -66,26 +71,42 @@ for the multiplexed transport to reference for routing. In practice, here is what your Sentry initialization should look like: ```javascript -import { init, makeFetchTransport, moduleMetadataIntegration, makeSimpleMultiplexedTransport, MULTIPLEXED_TRANSPORT_EXTRA_KEY } from "@sentry/browser"; +import { init, makeFetchTransport, moduleMetadataIntegration, makeMultiplexedTransport } from "@sentry/browser"; + +const EXTRA_KEY = "ROUTE_TO"; + +const transport = makeMultiplexedTransport(makeFetchTransport, (args) => { + const event = args.getEvent(); + if ( + event && + event.extra && + EXTRA_KEY in event.extra && + Array.isArray(event.extra[EXTRA_KEY]) + ) { + return event.extra[EXTRA_KEY]; + } + return []; +}); init({ dsn: "__DEFAULT_DSN__", integrations: [moduleMetadataIntegration()], - makeMultiplexedTransport(makeFetchTransport), + transport, beforeSend: (event) => { if (event?.exception?.values?.[0].stacktrace.frames) { const frames = event.exception.values[0].stacktrace.frames; - // Find the last frame with module metadata containing a DSN - const route_to = frames + const routeTo = frames .filter((frame) => frame.module_metadata && frame.module_metadata.dsn) .map((v) => v.module_metadata) .slice(-1); // using top frame only - you may want to customize this according to your needs - event.extra = { - ...event.extra, - [MULTIPLEXED_TRANSPORT_EXTRA_KEY]: route_to, - }; + if (routeTo.length) { + event.extra = { + ...event.extra, + [EXTRA_KEY]: routeTo, + }; + } } return event; From cfe47453eb22140710995a7850f9cd7143d6914f Mon Sep 17 00:00:00 2001 From: Kosty Maleyev Date: Thu, 21 Mar 2024 09:49:55 -0700 Subject: [PATCH 13/14] Update docs/platforms/javascript/common/configuration/micro-frontend-support.mdx Co-authored-by: Luca Forstner --- .../javascript/common/configuration/micro-frontend-support.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/platforms/javascript/common/configuration/micro-frontend-support.mdx b/docs/platforms/javascript/common/configuration/micro-frontend-support.mdx index 4addee0fdb7527..e6498370675781 100644 --- a/docs/platforms/javascript/common/configuration/micro-frontend-support.mdx +++ b/docs/platforms/javascript/common/configuration/micro-frontend-support.mdx @@ -169,7 +169,7 @@ init({ You can then set tags/contexts on events in individual micro-frontends to decide which Sentry project to send the event to as follows: -It is important to always use a local scope when setting the tag (either as shown below or using [withScope](../../enriching-events/scopes/#local-scopes)). Using a global scope e.g. through `Sentry.setTag()` will result in all subsequent events being routed to the same DSN regardless of where they originate. +It is important to always use a local scope when setting the tag (either as shown below or using withScope documentation). Using a global scope e.g. through `Sentry.setTag()` will result in all subsequent events being routed to the same DSN regardless of where they originate. ``` From bdbc5fdff7f1955214cb7a932cc1710b6a6f76b1 Mon Sep 17 00:00:00 2001 From: Kosty Maleyev Date: Thu, 21 Mar 2024 11:50:12 -0700 Subject: [PATCH 14/14] Update docs/platforms/javascript/common/configuration/micro-frontend-support.mdx Co-authored-by: vivianyentran <20403606+vivianyentran@users.noreply.github.com> --- .../javascript/common/configuration/micro-frontend-support.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/platforms/javascript/common/configuration/micro-frontend-support.mdx b/docs/platforms/javascript/common/configuration/micro-frontend-support.mdx index e6498370675781..b36662d4f09bbb 100644 --- a/docs/platforms/javascript/common/configuration/micro-frontend-support.mdx +++ b/docs/platforms/javascript/common/configuration/micro-frontend-support.mdx @@ -40,7 +40,7 @@ Requires SDK version `7.59.0` or higher. First, to identify the source of an error, you must inject metadata that helps identify which bundles were responsible for the error. You can do this with any of the -Sentry bundler plugins by enabling the `_experiments.moduleMetadata` option. Example +Sentry bundler plugins by enabling the `_experiments.moduleMetadata` option. The example below is for Webpack, but this is also supported in Vite, Rollup, and esbuild. ```javascript