TypeError: Sentry.moduleMetadataIntegration is not a function when using loader script

[gilisho]

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/browser

SDK Version

7.119.0

Framework Version

No response

Link to Sentry event

No response

Reproduction Example/SDK Setup

Similarly to #13297, I am using a loader script and moduleMetadataIntegration seems to be unavailable when using loader script.
I need this integration as advised for micro-frontend environment, and to use that solution I am migrating from Sentry SDK 5.30.0 to 7.119.0, which is already challenging.

Any reason to not have a dedicated bundle for this integration like other integration have?
This is a necessity for micro-frontend environment so I really hope there's a way to work around it .

Would appreciate your help in the matter. 🙏

Steps to Reproduce

Use loader script for 7.x version.
Have this script above:

<script>
  // Configure sentryOnLoad before adding the Loader Script
  // https://docs.sentry.io/platforms/javascript/install/loader/#custom-configuration
  window.sentryOnLoad = function () {
    console.log('sentryOnLoad')
    console.log(window.Sentry)
    window.Sentry.init({
      // moduleMetadataIntegration is a required integration for having the module_metadata available in runtime
      integrations: [window.Sentry.moduleMetadataIntegration()],
      // Solution for getting the route to the unhandled error.
      // This is the recommended solution for micro-frontend environment.
      beforeSend: function(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 framesModuleMetadata = frames
            .filter(
              (frame) => frame.module_metadata && frame.module_metadata.dsn,
            )
            .map((v) => v.module_metadata)

          const routeTo = framesModuleMetadata.slice(-1); // using top frame only - you may want to customize this according to your needs

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

        return event;
      }
    })
  }
</script>

Expected Result

Sentry is initialized successfully.

Actual Result

TypeError: Sentry.moduleMetadataIntegration is not a function

[chargome]

@gilisho I don't think there is a specific reason for that, we should include this in our CDN so you can lazy-load it in you application. I'll put this on our backlog for now, PRs are also welcome of course!

For your application I'm afraid the only option right now is to use the integration via npm installation of our SDK.

[gilisho]

Hi @chargome !
I am very open to the idea of contributing a PR! Moreover, I will need it to be available in Major 7.
Should I open two PRs for both major 7 and major 8? can you guide me a bit on the process? Also, I assume the PR should be pretty similar to #13241?

[chargome]

@gilisho nice!

For general contributing guidelines check https://github.com/getsentry/sentry-javascript/blob/develop/CONTRIBUTING.md

So I think the FeedbackIntegration and ReplayIntegration are more complex cases but you could check for example any of these: https://docs.sentry.io/platforms/javascript/configuration/integrations/#2-load-from-cdn-with-lazyloadintegration for reference.

@Lms24 can you maybe chime in for handling v7 updates?

[gilisho]

It seems that I need to make changes and create a PR against v7 branch as well as develop, right?
opened a draft PR against development #13817

[chargome]

@gilisho yes once a pr on v7 is merged we can trigger a release

[gilisho]

I made 2 PRs for both v8 and v7. LMK if something is missing.
This is the first-time I'm diving into Sentry's source code so I hope I'm not missing anything. 🙏

v8 PR - #13817
v7 PR - #13822

Since my platform is using v7 ATM, #13822 is in a higher priority for me. I'd like to know when this can get released to a new version. Waiting for this to get released. 🙏
Thank you!

[chargome]

@gilisho thank you! We'll take a look 👍

[gilisho]

Thank you! I added the test you requested for #13817. LMK if something else is needed for both PRs.

Some concerns have been raised though:

1. Checking with the bundle I produced locally for moduleMetadataIntegration, I can see that the module metadata is added to event.extra as I need, which is great. But, it only works when I use the unminified bundle. When I use the minified version, the module metadata is not added to the stacktrace frames. I've seen these kind of issues are possible, like Error: Custom driver not compliant when using minified offline integration #5527.

2. Actually, I just realized it's not the only obstacle for the micro-frontend solution to work for my platform. The event is not being transferred to the right DSN because I'm having a similar issue now with TypeError: window.Sentry.makeMultiplexedTransport is not a function. Any suggestions? Could this also be included in the loader script alongside the other included transport utils like “makeFetchTransport”? I believe this would require a small change to export it here. Otherwise there's no way to use the frontend solution with loader script, and we use loader script since we want to lazy load.

[mydea]

Regarding 2., makeMultiplexedTransport is not exported in the CDN bundle (which is also used by the loader), due to bundle size reasons. From my current POV, we are unlikely to add this to the CDN bundle because this will increase the bundle size for all consumers of this, even though the vast majority does not need it.

What I would do, is inline the transport code from

sentry-javascript/packages/core/src/transports/multiplexed.ts

Line 89 in 0d42ae8

export function makeMultiplexedTransport<TO extends BaseTransportOptions>(

into your application code and just use it from there.

[gilisho]

Alright.
There's still a need to shed light on (1). It will be easier to do so once #13822 is merged. 😊
Right now I am using the un-minified bundle locally and it's not very ideal...

[mydea]

1. is def. still open, let's get the PR merged an then we can continue to investigate this!