@sentry/browser not working in chrome extensions

[lforst]

When importing @sentry/browser from a service worker file (e.g: background.js) like

import * as Sentry from '@sentry/browser';

we get

Uncaught TypeError: Cannot read properties of undefined (reading 'visibilityState')

var initHiddenTime = () => {
  return (0,_sentry_utils__WEBPACK_IMPORTED_MODULE_0__.getGlobalObject)().document.visibilityState === 'hidden' ? 0 : Infinity;
};

It crashes at the import level, because @sentry/browser relies on the document which doesn't exist in the context of a background script.

---

Edit: That's because I was loading BrowserTracing, when removing it it doesn't crash!

Originally posted by @Vadorequest in https://github.com/getsentry/sentry-javascript/issues/4098#issuecomment-1161331997

[lforst]

When tackling this issue we should set up an example chrome extension to properly test our fix.

I think it also might be a good idea to rethink how we make use of getGlobalObject() in the SDK. Right now it basically acts as a type cast and is very error-prone.

[dchenk]

I'm getting a similar error (Cannot read properties of undefined (reading 'email')) originating from chrome-extension://dbilanlcioamaadkbepcenpombaejbla/dist/inject_content.js but I've got a normal app, not a Chrome extension.

[gnir-work]

Hello there :) Me and my team are developing a manifest V3 extension and I cant explain how much sentry has helped us so far! We wanted to take our monitoring to the next level with sentry tracing, however we encourted the same thing as described in this issue. After some playing around we managed to bypass the current usage of WINDOW.document.visibilityState like this:

// Run this code before Sentry.init(...)
Sentry.WINDOW.document = {
  visibilityState: 'hidden',
  addEventListener: () => {},
};

Ofcourse this isn't a long term solution and we will update as soon as this issue is closed 😄

BTW, if there are other people arriving on this thread while trying to add tracing to their manifest V3 extension make sure that you create a new transaction around the code that you need to be traced. It took us quite some time to understand that there is no transaction like pageload or something similar in extensions (This is my speculation after debugging for quite some time, in case I am mistaken please correct me 😄).

chrome.alarms.onAlarm.addListener(async (alarm: Alarm) => {
    // Generic Sentry.init(....)
    setupSentry();
    const transaction = Sentry.startTransaction({ name: `Alarm ${alarm.name} rang` });
    Sentry.getCurrentHub().configureScope((scope) => scope.setSpan(transaction));
	// Do your thing
	// ....
	transaction.finish();
}

Hope this helps :)

[abhishek871]

I'm getting a similar error (Cannot read properties of undefined (reading 'email')) originating from chrome-extension://dbilanlcioamaadkbepcenpombaejbla/dist/inject_content.js but I've got a normal app, not a Chrome extension.

Is ur issue resolved now?? As I am also getting the same error.

[JUDE-EQ]

I'm getting a similar error (Cannot read properties of undefined (reading 'email')) originating from chrome-extension://dbilanlcioamaadkbepcenpombaejbla/dist/inject_content.js but I've got a normal app, not a Chrome extension.

I'm also getting this error.

[lforst]

@abhishek871 @JUDE-EQ Usually these errors originate from browser extensions that your users are using. You can filter these out with the denyUrls option: https://docs.sentry.io/platforms/javascript/configuration/filtering/#decluttering-sentry

[flazouh]

Hello there :) Me and my team are developing a manifest V3 extension and I cant explain how much sentry has helped us so far! We wanted to take our monitoring to the next level with sentry tracing, however we encourted the same thing as described in this issue. After some playing around we managed to bypass the current usage of WINDOW.document.visibilityState like this:

// Run this code before Sentry.init(...)
Sentry.WINDOW.document = {
  visibilityState: 'hidden',
  addEventListener: () => {},
};

Ofcourse this isn't a long term solution and we will update as soon as this issue is closed 😄

BTW, if there are other people arriving on this thread while trying to add tracing to their manifest V3 extension make sure that you create a new transaction around the code that you need to be traced. It took us quite some time to understand that there is no transaction like pageload or something similar in extensions (This is my speculation after debugging for quite some time, in case I am mistaken please correct me 😄).

chrome.alarms.onAlarm.addListener(async (alarm: Alarm) => {
    // Generic Sentry.init(....)
    setupSentry();
    const transaction = Sentry.startTransaction({ name: `Alarm ${alarm.name} rang` });
    Sentry.getCurrentHub().configureScope((scope) => scope.setSpan(transaction));
	// Do your thing
	// ....
	transaction.finish();
}

Hope this helps :)

This solved my issue, but my Sentry.captureException seem to not get received in my dashboard even though they get sent. https://github.com/getsentry/sentry/issues/67630#issuecomment-2030701029

[lforst]

This solved my issue, but my Sentry.captureException seem to not get received in my dashboard even though they get sent. https://github.com/getsentry/sentry/issues/67630#issuecomment-2030701029

@alexandredepape seems like you solved it?

[flazouh]

This solved my issue, but my Sentry.captureException seem to not get received in my dashboard even though they get sent. getsentry/sentry#67630 (comment)

@alexandredepape seems like you solved it?

It solved the fact that the service worker was not working after adding the call to Sentry.init but after doing this, it fixed it in the sense that it was not crashing anymore: Even if there is this, but I can ts-ignore it.

My bigger issue is here

https://github.com/getsentry/sentry-javascript/issues/11399

Where the request are sent but nothing is displayed in my dashboard, maybe I'm missing something

[lforst]

Ah right, okay. Yeah, the browser SDK will not work inside a worker context. I have building a worker SDK on my mental roadmap but no clue when we will get to it!

[flazouh]

But why are the requests to sentry sent then ? Doesn't it mean that it works ? What changes from a sentry request being sent to sentry.io from a browser context and a worker context if in both cases, the request are sent and receive a 200 code ? But that in the worker context, the error is not displayed in the dashboard ?

[lforst]

@alexandredepape I mean it's possible that it works, but there is no guarantee that it will not crash in some way. Inside the @sentry/browser package we generally assume that we are in a webpage context and not in a worker context, so use with caution.