Dev console errors are thrown to sentry

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which package are you using?

@sentry/react

SDK Version

6.19.7

Framework Version

No response

Link to Sentry event

https://sentry.io/organizations/matic/issues/3311552008/events/1599a2d013f14bb7a76d1f4cb9028cbc/?project=5376741

Steps to Reproduce

Only Chrome 102, older chrome versions don’t trigger it, other browsers uncheked

1. Go to website with initialized sentry
2. Open dev console
3. Run copy('any string')

Expected Result

“any string” is copied to clipboard, no errors triggered to sentry

Actual Result

“any string” is copied to clipboard, few errors triggered to sentry

Generally, all the errors that appear in console is triggered to sentry(

[firasdib]

The filter has been running for about 24h, and the issue count has dropped from 500+ to <20. The reported issues, for the most part, seem reasonable and related to my application. So for what its worth, it seems to work well.

Here is my modified version currently running, in case someone wants to use/modify it:

function filterConsoleErrors(event) {
  const originalException = event.exception?.values?.[0];

  // Console errors appear to always bubble up to `window.onerror` and to be unhandled.
  // So if, we don't have the original exception or the mechanism looks different,
  // we can early return the event.
  // (Note, this might change depending on the used framework, so feel free to remove this check.)
  if (
    !originalException ||
    !originalException.mechanism ||
    originalException.mechanism.type !== 'onerror' ||
    originalException.mechanism.handled
  ) {
    return event;
  }

  const stackFrames = originalException.stacktrace?.frames;
  const errorType = originalException.type?.toLowerCase();

  // If we don't have any information on error type or stacktrace, we have no information about the error
  // this is unlikely to happen but it doesn't appear to happen in console errors.
  // Hence, we can early return here as well.
  if (!stackFrames || !errorType) {
    return event;
  }

  // For simple console errors (e.g. users just typing a statement they want evaluated)
  // the stacktrace will only have one frame.
  // This condition will not catch errors that would be thrown if users type in multi-line
  // statements. For example, if they define a multi-line function.
  // You can try experimenting with this number but there's little guarantee that the other
  // conditions will work. Nevertheless, the checks below also work with multi-frame stacktraces.
  const hasShortStackTrace = stackFrames.length <= 2;

  if (hasShortStackTrace && isSuspiciousError(errorType) && hasSuspiciousFrames(stackFrames)) {
    console.warn('Dropping error due to suspicious stack frames.');

    return null;
  }

  return event;
}

function isSuspiciousError(errorType) {
  return ['syntaxerror', 'referenceerror', 'typeerror'].includes(errorType);
}

function hasSuspiciousFrames(stackFrames) {
  const allSuspicious = stackFrames.every(isSuspiciousFrame);

  // Certain type errors will include the thrown error message as the second stack frame,
  // but the first will still follow the suspicious pattern.

  const firstSuspicious = stackFrames.length === 2 && isSuspiciousFrame(stackFrames[0]);

  return allSuspicious || firstSuspicious;
}

function isSuspiciousFrame(frame) {
  const url = window.location.href;

  return frame.function === '?' && (frame.filename === '<anonymous>' || frame.filename === url);
}

export default filterConsoleErrors;

[Lms24]

Hey @markivancho (and everyone else who’s getting these errors),

we’re still discussing how to best filter such browser-caused errors in the future automatically. In the meantime, you have a couple of options on how to filter these events out manually:

Using beforeSend

You can add a filter criterion for beforeSend in Sentry.init. Something along these lines:

1. Filter out all events from the buggy browser version:

import { Event as SentryEvent } from "@sentry/<yourSDK>";

beforeSend: (event: SentryEvent) => {
  const isBuggyBrowser = navigator.userAgent?.includes("Chrome/102");

  if (isBuggyBrowser) {
    return null;
  }
  return event;
}

1. Be more specific and filter for exception type and values:

import { Event as SentryEvent } from "@sentry/<yourSDK>";

beforeSend: (event: SentryEvent) => {
  const isBuggyBrowser = navigator.userAgent?.includes("Chrome/102");
  const error = event.exception?.values?.at(0);
  const isKnownBrowserBug =
    isBuggyBrowser &&
    (error?.type === "EvalError" &&
      error?.value?.includes("Possible side-effect in debug-evaluate")) ||
    (error?.type === "SyntaxError" &&
      (error?.value?.includes("Unexpected end of input") ||
        error?.value?.includes("Invalid or unexpected token") ||
        error.value?.includes("missing ) after argument list")));
  
  if (isKnownBrowserBug) {
    return null;
  }
 
  return event;
}

Using ignoreErrors

Alternatively, if you do not care about browser versions, you can go a simpler route and use the ignoreErrors property in Sentry.init. Note though, that this does not take the user agent into account at all and will thus ignore errors from all browsers:

ignoreErrors: [
  "Possible side-effect in debug-evaluate",
  "Unexpected end of input",
  "Invalid or unexpected token",
  "missing ) after argument list",
]

Using Inbound Filters in Sentry UI

We recognize that these approaches require a redeployment of your app with the changed SDK config. If this is not an option, you can do something similar to ignoreErrors above in the Sentry UI: In your project’s settings, go to “Inbound Filters” and at the bottom you can configure a filter for error messages.

Again, this option filters out errors of all browsers, so similariy to ignoreErrors it cannot be applied to a specific browser (version).