@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 #4098 (comment)

[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