Sentry cannot hook into environment when running from an extension contentScript in firefox

[DominikChmiel]

• [x] Review the documentation: https://docs.sentry.io/
• [x] Search for existing issues: https://github.com/getsentry/sentry-javascript/issues
• [x] Use the latest release: https://github.com/getsentry/sentry-javascript/releases
• [ ] Provide a link to the affected event from your Sentry account

Package + Version

• [x] @sentry/browser
• [ ] @sentry/node
• [ ] raven-js
• [ ] raven-node (raven for node)
• [ ] other:

Version:

6.11.0

Description

We are currently trying to utilize Sentry to track error occuring in a web-extension. In first tests it seems to work as expected on chromium based browsers, but when running the same code in Firefox an error is raised when hooking into the Browser environment:

TypeError: "addEventListener" is read-only
    c moz-extension://8179adbe-8b26-4472-8b6e-beea13f6a80f/js/contentScript.bundle.js:1579
    node_modules sentry/utils/esm/instrument.js/h/<@moz-extension://8179adbe-8b26-4472-8b6e-beea13f6a80f/js/contentScript.bundle.js:1555
    node_modules sentry/utils/esm/instrument.js/h/<@moz-extension://8179adbe-8b26-4472-8b6e-beea13f6a80f/js/contentScript.bundle.js:1555
    h moz-extension://8179adbe-8b26-4472-8b6e-beea13f6a80f/js/contentScript.bundle.js:1555
    _ moz-extension://8179adbe-8b26-4472-8b6e-beea13f6a80f/js/contentScript.bundle.js:1555
    node_modules sentry/browser/esm/integrations/breadcrumbs.js/e.prototype.setupOnce@moz-extension://8179adbe-8b26-4472-8b6e-beea13f6a80f/js/contentScript.bundle.js:1379
    c moz-extension://8179adbe-8b26-4472-8b6e-beea13f6a80f/js/contentScript.bundle.js:1455
    node_modules sentry/core/esm/integration.js/d/<@moz-extension://8179adbe-8b26-4472-8b6e-beea13f6a80f/js/contentScript.bundle.js:1455
    d moz-extension://8179adbe-8b26-4472-8b6e-beea13f6a80f/js/contentScript.bundle.js:1455
    node_modules sentry/core/esm/baseclient.js/e.prototype.setupIntegrations@moz-extension://8179adbe-8b26-4472-8b6e-beea13f6a80f/js/contentScript.bundle.js:1447
    node_modules sentry/hub/esm/hub.js/e.prototype.bindClient@moz-extension://8179adbe-8b26-4472-8b6e-beea13f6a80f/js/contentScript.bundle.js:1487
    s moz-extension://8179adbe-8b26-4472-8b6e-beea13f6a80f/js/contentScript.bundle.js:1475
    d moz-extension://8179adbe-8b26-4472-8b6e-beea13f6a80f/js/contentScript.bundle.js:1411
    ts moz-extension://8179adbe-8b26-4472-8b6e-beea13f6a80f/js/contentScript.bundle.js:1646
    n moz-extension://8179adbe-8b26-4472-8b6e-beea13f6a80f/js/contentScript.bundle.js:1351
    <anonymous> moz-extension://8179adbe-8b26-4472-8b6e-beea13f6a80f/js/contentScript.bundle.js:1351
    <anonymous> moz-extension://8179adbe-8b26-4472-8b6e-beea13f6a80f/js/contentScript.bundle.js:1351
contentScript.bundle.js:1555:986

I've created a small-ish reprocase here: https://github.com/DominikChmiel/web-extension-starter/commit/c4a37ad65d4ee3158e01ad422b770ae9f0e83f1d based on a web-extension starter project.

Building the resulting extension for firefox and Importing it (firefox version 91.0) results in the above error.

Reading up a bit on it it seems to me like there are security measures in place in firefox to prevent extensions from hooking too deeply into the Javascript Environment, is that a correct interpretation? And if so, is there a possible approach to still extract the most out of exceptions occurring in our contentscript? We are mainly interested in exceptions occurring in the extension code, not hooking the window APIs etc would be fine as long as exceptions are still sent to sentry. Or is this an unsupported use-case? I was unable to find much information on using sentry for web-extension development

[AbhiPrasad]

I can reproduce this problem, even when all the default integrations are turned off.

Sentry.init({
  dsn: "http://somednskey@sentry_onpremise_nginx_1:9000/101", 
  release: "something",
  debug: true,
  integrations: function(integrations) {
    // Remove integrations that wrap native browser APIs
    return integrations.filter(function(integration) {
      return integration.name !== "TryCatch" && integration.name !== "FunctionToString" && integration.name !== "InboundFilters";
    });
  },
});

For now, you can probably just have a conditional to not initialize Sentry in firefox until we figure out what's going on here. Will put this in the backlog so that our team can investigate further and create a solution/better workaround.

Thank you for the detailed report and reproduction, it is greatly appreciated :)

[DominikChmiel]

Thanks (also for fixing the typo ^^) alright, didn't know yet about the integrations feature for built-in integrations, shame it isn't enough to get it working. Will mean that we for the moment can't use Sentry here, since most of our deployments are on Firefox based browsers, but we'll keep an eye on this issue

[james-huang]

any updates on this?

[AbhiPrasad]

No updates at the moment - help is appreciated if you can narrow down what in the sdk is causing issues!

[maxarias-io]

Came across this as well, it seems that this might be in @sentry/tracing. Looks like a fill method wants to overwrite requestAnimationFrame which is not allowed in Firefox.

Currently worked around it by try/catching Sentry.init, but we don't have Sentry in FF for now.

Help appreciated 🙏

[github-actions[bot]]

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 label it Status: Backlog or Status: In Progress, I will leave it alone ... forever!

---

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