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