Uncaught Error and 404 spotlight/contextlines requests when loading overlay/dist/sentry-spotlight.js

[mfb]

Environment

@spotlightjs/overlay/dist/sentry-spotlight.js version 1.2.0 manually loaded in browser

Steps to Reproduce

"Just to see what happens" I tried manually loading @spotlightjs/overlay/dist/sentry-spotlight.js in the frontend of an old "legacy" web app (which does not use an npm bundler, etc.)

Expected Result

I could use Spotlight with an arbitrary web app simply by loading the overlay JS, without any extra errors being triggered.

Actual Result

The Spotlight overlay appears and works nicely, however, when an error was being captured by Sentry, a fetch was made to http://localhost/spotlight/contextlines, which resulted in a 404 error, as my app has no such route. The browser console shows "Uncaught Error: Objects are not valid as a React child (found: object with keys {message, params, formatted}). If you meant to render a collection of children, use an array instead." And the Spotlight overlay disappeared.

[Shubhdeep12]

Hi @mfb it would be great if you could provide a minimal reproduction. Thanks

[Lms24]

Hey @mfb so the reason this request is made is because we try to show some lines of code ("ContextLines") around the the stack frames. Ideally with resolved source maps if available. This only works with Astro at the moment (not great, we should change this to make it compatible with Vite-based apps at least but this is more work).

For now though, I agree that this should not cause issues on your end. IIRC we already try/catch the request to contextlines but might be worth to double check this. Not sure if we can avoid the error in the dev tools console though. However, this shouldn't break anything in your project. If that's the case, then please provide a minimal reproduction so we can debug this further. thanks!

[mfb]

@Lms24 well the 404 errors are not great, because as developer one of the things I often do on my local instance is make sure that my app isn't throwing any such errors :)

A worse problem was the Uncaught Error: Objects are not valid as a React child (found: object with keys {message, params, formatted}). If you meant to render a collection of children, use an array instead.

I will work on setting up the current version to verify I can still reproduce the uncaught error.

[mfb]

Tested with current version of spotlight, and things seem much improved: the overlay no longer crashes when Sentry captures an error. However, in some cases I am still seeing "Uncaught Error: Objects are not valid as a React child (found: object with keys {message, params, formatted}). If you meant to render a collection of children, use an array instead." This error appears both in the spotlight overlay and in Sentry. Guess I will need to create a minimal reproduce case if no one else is seeing this.

[mfb]

@Shubhdeep12 here's a minimal reproduce case for this issue: https://github.com/mfb/spotlight-reproduce

You will need to run npm install, make the directory available via a local webserver, start the sidecar service, load index.html in your browser, then click the element to trigger an error.

[BYK]

The 404 error should be resolved with #454 as the endpoint is now moved to the sidecar.

Closing the ticket, will check the split off issue later on.