React Browser Tracing: Uncaught ReferenceError: document is not defined

Dear Sentry Community,
We recently started to integrate Sentry into our React Single Page Application. Everything works as expected until I add Integrations.BrowserTracing() to the Sentry configuration.

We are using two service workers, one for updating our page when a new version is available, and another one to run user simulations in the background. However, when using the browser tracing, the service worker fails with the uncaught reference error since it does not have access to the window.

The problem is that it is very hard for us to see what files are actually running on the service worker since the Sentry React SDK might be pulled in through one of the dependencies when logging an error.

The question is how can I properly shield the service worker from the React SDK or otherwise disable the browser tracing if the code is executed on a service worker? For example, checking if window is enabled so the Sentry SDK won’t make the service worker throw.

This is the whole error:

getFirstHidden.ts:31 Uncaught ReferenceError: document is not defined at gn (getFirstHidden.ts:31) at yn (getLCP.ts:27) at e._trackLCP (metrics.ts:232) at new e (metrics.ts:31) at new e (browsertracing.ts:119) at e.value (LogConnector.ts:70) at new e (LogConnector.ts:13) at Object. (LogConnector.ts:94) at n (bootstrap:19) at Object. (5c46182….worker.js:1667)

gn @ getFirstHidden.ts:31
yn @ getLCP.ts:27
e._trackLCP @ metrics.ts:232
e @ metrics.ts:31
e @ browsertracing.ts:119
value @ LogConnector.ts:70
e @ LogConnector.ts:13
(anonymous) @ LogConnector.ts:94
n @ bootstrap:19
(anonymous) @ 5c46182….worker.js:1667
n @ bootstrap:19
(anonymous) @ 5c46182….worker.js:288
n @ bootstrap:19
(anonymous) @ 5c46182….worker.js:2415
n @ bootstrap:19
(anonymous) @ bootstrap:83
(anonymous) @ 5c46182….worker.js:1

Chris

I’m experiencing the same problem with my app, no fix yet though.

1 Like