Is Sentry capturing errors thrown in scripts added in index.html of a React app?

[filiptammergard]

Hey!

We had a problem with a third-party script defined in index.html that made our app crash for some customers. But it wasn't reported to Sentry. Is this the intended behavior or am I missing something?

Is it possible to configure Sentry to report those errors as well?

[AbhiPrasad]

Hey! Out of the box Sentry does not capture these, but you can enable the optional ContextLines integration to do this.

import * as Sentry from "@sentry/browser";
import { ContextLines } from "@sentry/integrations";

Sentry.init({
  dsn: "__PUBLIC_DSN__",
  integrations: [new ContextLines()],
});

[AbhiPrasad]

ah sorry, I don't think I explain this clearly.

Yes it's expected the error is captured, since Sentry is listening to the global error handler on the window to catch unhandled errors that bubble up. What the ContextLines integration helps with is attaching proper source context to the stacktrace, because otherwise it's hard to tell where the error is coming from.

So I think the principal issue here was that your app needed to initialize Sentry as early as possible (before all these inline scripts ran) to make sure that Sentry could monitor the errors being thrown.

[filiptammergard]

Thanks! How do I ensure Sentry is initialized as early as possible? Is it even possible to initialize Sentry in index.html?

[AbhiPrasad]

I would recommend generating two scripts with vite via vite's plugin options (so two entry points).

One just has Sentry.init and related code, and that is put at the top of your index.html so it's imported and used as soon as possible, and then you can have the rest of your application code in your other bundle.

[filiptammergard]

Do you have an example of how to configure this? A bit hard to visualize how that would work.

I have only initialized Sentry in App.tsx before, not through Vite config.

[AbhiPrasad]

From reading through a related stackoverflow answer, you might have to have multiple vite configs.