feat(js): Add documentation for Micro Frontend Setup with CDN bundles (…

…#12407)

docs/platforms/javascript/common/best-practices/micro-frontends.mdx

@@ -83,7 +83,7 @@ for the multiplexed transport to reference for routing.
 
 **Install the below code snippet in your host:**
 
-```javascript
+```javascript {tabTitle:NPM}{index.js}
 import {
   init,
   makeFetchTransport,
@@ -131,6 +131,68 @@ init({
   },
 });
 ```
+```html {tabTitle:CDN/Loader Bundle}{filename:index.html}
+<script
+  src="https://browser.sentry-cdn.com/{{@inject packages.version('sentry.javascript.browser') }}/bundle.min.js"
+  integrity="sha384-{{@inject packages.checksum('sentry.javascript.browser', 'bundle.min.js', 'sha384-base64') }}"
+  crossorigin="anonymous"
+></script>
+
+<script
+  src="https://browser.sentry-cdn.com/{{@inject packages.version('sentry.javascript.browser') }}/multiplexedtransport.min.js"
+  integrity="sha384-{{@inject packages.checksum('sentry.javascript.browser', 'multiplexedtransport.min.js', 'sha384-base64') }}"
+  crossorigin="anonymous"
+></script>
+
+<script
+  src="https://browser.sentry-cdn.com/{{@inject packages.version('sentry.javascript.browser') }}/modulemetadata.min.js"
+  integrity="sha384-{{@inject packages.checksum('sentry.javascript.browser', 'modulemetadata.min.js', 'sha384-base64') }}"
+  crossorigin="anonymous"
+></script>
+
+
+<script>
+  const EXTRA_KEY = "ROUTE_TO";
+
+  const transport = Sentry.makeMultiplexedTransport(Sentry.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 [];
+  });
+
+  Sentry.init({
+    dsn: "__DEFAULT_DSN__",
+    integrations: [Sentry.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;
+    },
+  });
+</script>
+```
 
 Once this is set up, errors - both handled and unhandled - will be automatically routed to the right project.