@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

[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.
getsentry/sentry#67630 (comment)

[lforst]

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?

[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

#11399

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

[lforst]

I opened a PR to stomp places that look like may fail in web workers: #11598

[vilkinsons]

@lforst Yet to test this, but just wanted to say thanks. Appreciate this issue getting some love, as it's been a big blocker to us in several respects 🚀

[lforst]

@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.

[stevenmason]

Hi there, I am trying to integrate Sentry with my extension to log errors from the background service worker and an offscreen webpage.
Logging messages works however logging Errors doesn't. I get the following from the debug log:

[lforst]

@stevenmason This message should appear as part of the deduplicating logic in the SDK. Are you attempting to send the same error instance twice? Or is this happening 100% of the time?

[stevenmason]

Thank you for the response. 100% of the time, no errors are coming through when using Sentry.captureException(e);

[lforst]

@stevenmason I think this is a separate issue. Would you mind opening a new one and providing a reproduction example? Thank you!

[getsantry]

This issue has gone three weeks without activity. In another week, I will close it.

But! If you comment or otherwise update it, I will reset the clock, and if you remove the label Waiting for: Community, I will leave it alone ... forever!

---

"A weed is but an unloved flower." ― Ella Wheeler Wilcox 🥀