[Spotlight 2.0.0] Make Spotlight compatible with Sentry SDK v8

[Lms24]

v8 of the Sentry SDKs is slowly becoming stable, so we need to ensure that Spotlight works correctly with the SDK. Primarily, this will only affect the overlay where we interact with the Sentry SDK in the Sentry spotlight integration to add a sentry integration for spotlight. This should be fairly straight forward but it's unfortunately subtly breaking.

Therefore, we'll cut a new major version for Spotlight, so that:

• for SentrySDK@7 use Spotlight@1 (but we won't support this officially any longer)
• for SentrySDK@8 or SentrySDK@>=7.99.0 use Spotlight@2

### For Alpha Release
- [ ] #386
- [ ] https://github.com/getsentry/spotlight/pull/402
- [x] verify with playground/demo

### For Stable release
- [ ] https://github.com/getsentry/spotlight/pull/406
- [ ] https://github.com/getsentry/spotlight/pull/412
- [ ] https://github.com/getsentry/spotlight/pull/413
- [ ] https://github.com/getsentry/spotlight/pull/414
- [x] Cut release

[Lms24]

Update: As written in #386 (comment) we decided to make v7 also compativle with v7.99.0 or greater; meaning there are fairly recent v7 versions with which Spotlight@2 can still be used.

[Lms24]

first alpha released today to NPM: https://www.npmjs.com/package/@spotlightjs/spotlight/v/2.0.0-alpha.1

[gajus]

@Lms24 It looks like it works to capture some traces/spans, but not all.

Recorded a brief video: https://www.loom.com/share/6bc3596a831647809316e5d93c5c5fae

Using 2.0.0-alpha.1 and rc2

[Lms24]

Hey @gajus thanks for the video! If there are missing child spans of another span, I think we need to check first if this isn't rather an SDK issue than a Spotlight issue. Does the same trace look more complete in the Sentry UI?

Also small heads-up: I'm seeing http.client transactions in this trace. These shouldn't be here in this form and will be fixed in rc.3 (getsentry/sentry-javascript#11974). Fwiw, this is a larger topic; but just to clear up confusion in case you're comparing what you're seeing now vs. when you were still using v7 SDKs.

[Shubhdeep12]

Yeah @gajus can you please try Spotlight v1.2.17 and Sentry v7 sdk

if the issue still persists, then it can be a spotlight issue(it would be great if you could share a minimal reproduction example in this case), otherwise, as @Lms24 said above, it can be an issue because of some inconsistency with parent spans in sentry v8.

[gajus]

I am just realizing that this is most likely an ESM issue.

In production we use --loader=import-in-the-middle/hook.mjs.

In development, we do not. That's likely the cause here.

[bmulholland]

I just spent a couple hours debugging my Sentry 8 upgrade. It wasn't clear that spotlight was the issue: the exception happens inside Sentry 8. If Spotlight doesn't support a Sentry version, could it flag that somehow? Via package manager or by detecting it at runtime? That would have saved me time :)

Here's the Sentry stacktrace I got, maybe it will help others via Google:

VM14563 chunk-345U675O.js:4394 Uncaught (in promise) TypeError: a is not a function
    at gw.setupOnce (VM14563 chunk-345U675O.js:4394:5)
    at setupIntegration (VM14524 @sentry_vue.js:4818:17)
    at BrowserClient.addIntegration (VM14524 @sentry_vue.js:5037:5)
    at J3 (VM14563 chunk-345U675O.js:18078:7)
    at Object.setup (VM14563 chunk-345U675O.js:17993:7)
    at Ev (VM14563 chunk-345U675O.js:3922:27)
    at Module.q4 (VM14563 chunk-345U675O.js:36761:18)
    at useSentry (VM14536 sentry.ts:30:15)
    at VM14507 main.ts:19:1

[Shubhdeep12]

Hi @bmulholland just want to confirm - you were using Spotlight v1.xx.x with Sentry v8. right?

[bmulholland]

Yep, latest tag. After hunting it down by disabling parts of my Sentry config until my app worked again, I was led here, found this PR, and tried the alpha. That worked.