sentry-javascript: @sentry/browser not working in chrome extensions

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_

About this issue

  • Original URL
  • State: open
  • Created 2 years ago
  • Reactions: 19
  • Comments: 21 (10 by maintainers)

Most upvoted comments

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 😃

I opened a PR to stomp places that look like may fail in web workers: https://github.com/getsentry/sentry-javascript/pull/11598

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.

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.

@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

@nonparibus Yeah sorry about neglecting this. Personally, I would love for us to have some lightweight SDK that doesn’t depend on any runtime specific API. Technically this is already possible for you to implement but it requires a ton of boilerplate.

@Gregoor oh god. I was not aware these docs existed. I can see a million things that can go wrong. Maybe the SDK used to work with webworkers previously and we regressed. 🤔

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.