feat(javascript): More micro frontends features

[timfish]

Pre-merge checklist

• Checked Vercel preview for correctness, including links
• PR was reviewed and approved by any necessary SMEs
• PR was reviewed and approved by a member of the Sentry docs team

Description of changes

Document new micro frontends features:

• New ModuleMetadata integration
• Metadata injection via @sentry/webpack-plugin
• Move multiplexed transport to its own page

[vercel]

@timfish is attempting to deploy a commit to the Sentry Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
sentry-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 8, 2023 5:01pm

[mydea]

very nice changes!

[AbhiPrasad]

Could we add some details to the index on how all the different pieces are meant to be used together?

[shanamatthews]

I left some comments with pointers on how to tweak these new docs to be more user-friendly.

It seems like users need to go through each page to understand how these different tools work together and which ones they need. It would be helpful to explain that on the index page.

[lforst]

I think this is a great first step. Thanks a lot!

Some thoughts:

• Did we explore putting all of the components on one page?
• I believe it would be nice to have one coherent goal between all of the different steps. Maybe sending an event to different/multiple DSNs based on a team value being injected.

[timfish]

Did we explore putting all of the components on one page?

I did but it started getting huge so I split it up. Now I'm reading the review comments I'm rethinking that! The metadata injection and metadata integration make more sense on a single page.

Could we add some details to the index on how all the different pieces are meant to be used together?

Pulling it all together is still a bit complex, hence this PR but I'll add this and some more exmples to the docs.

const ROUTE_TO_EXTRA_KEY = 'ROUTE_EVENT_TO';

const transport = makeMultiplexedTransport(createTransport, args => {
  const event = args.getEvent();
  if (event && event.extra && ROUTE_TO_EXTRA_KEY in event.extra && Array.isArray(event.extra[ROUTE_TO_EXTRA_KEY])) {
    return event.extra[ROUTE_TO_EXTRA_KEY];
  }
  return [];
});

function frameHasMetadataWithDsn(frame: StackFrame): boolean { 
  return 'module_metadata' in frame && 'dsn' in frame.module_metadata;
}

Sentry.init({
  dsn: '__DEFAULT_DSN__',
  integrations: [ new ModuleMetadata() ],
  transport,
  beforeSend: (event) => {
    if (event?.exception?.values?.[0].stacktrace?.frames) {
      // Reverse the stack frames so we can traverse from top to bottom
      const frames = event.exception.values[0].stacktrace.frames;
      const routeTo = frames.findLast(frameHasMetadataWithDsn) || [];

      if (routeTo.length) {
        event.extra = {
          ...event.extra,
          ROUTE_TO_EXTRA_KEY: routeTo,
        };
      }
    }

    return event;
  }
})

[shanamatthews]

@timfish - tag me when you'd like me to take another look!

[timfish]

@shanamatthews

I've reworked this back into a single file with a more cohesive story. The titles are now realted to the problem the user is solving rather than the individual tools!

[lforst]

👍 Thanks Tim! Content-wise this looks good to me!

[shanamatthews]

Looks great, thanks for the edits @timfish !

[AbhiPrasad]

Thanks for your patience with this @timfish!!