Filtering Chrome extension ReportingObserver events?

[vincentwoo]

Package + Version

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

Version:

4.0.4

Description

Is it possible to filter out ReportingObserver events from Chrome extensions like we can with regular Sentry errors? We just got one like:

{
anticipatedRemoval: 2019-03-12T04:00:00.000Z, 
columnNumber: 307, 
id: ElementCreateShadowRoot, 
lineNumber: 2, 
message: [Filtered], 
sourceFile: chrome-extension://mgijmajocgfcbeboacabfgobmjgjcoja/content.min.js
}

[kamilogorek]

Yes, ReportingObserver events are the very same events you'd get for regular exceptions. You can use eventProcessing to filter one you don't need -

sentry-javascript/packages/browser/src/integrations/reportingobserver.ts

Lines 94 to 127 in 9c131a0

	public handler(reports: Report[]): void {
	for (const report of reports) {
	withScope(scope => {
	scope.setExtra('url', report.url);
	const label = `ReportingObserver [${report.type}]`;
	let details = 'No details available';
	if (report.body) {
	// Object.keys doesn't work on ReportBody, as all properties are inheirted
	const plainBody: {
	[key: string]: any;
	} = {};
	// tslint:disable-next-line:forin
	for (const prop in report.body) {
	plainBody[prop] = report.body[prop];
	}
	scope.setExtra('body', plainBody);
	if (report.type === ReportTypes.Crash) {
	const body = report.body as CrashReportBody;
	details = `${body.crashId} ${body.reason}`;
	} else {
	const body = report.body as DeprecationReportBody | InterventionReportBody;
	details = body.message;
	}
	}
	captureMessage(`${label}: ${details}`);
	});
	}
	}

init({
  dsn: '__DSN__',
  beforeSend(event) {
    // Detect if we got a ReportingObserver event
    if (event.message && event.message.startsWith('ReportingObserver')) {
      // And check if the observer's report had a body, if so, check whether sourceFile points to chrome-extension. If so, drop the event.
      if (event.extra.body && event.extra.body.sourceFile && event.extra.body.sourceFile.startsWith('chrome-extension')) return null;
    }
    // Otherwise, just let it through
    return event;
  }
})

Or see this comment to see how to do it as a separate event processor - #1329 (comment)

Hope that helps. Cheers!

[vincentwoo]

I appreciate the snippet, but am concerned that I could not find this in the docs: https://docs.sentry.io/search/?platform=browser&q=beforesend

[kamilogorek]

@vincentwoo https://docs.sentry.io/learn/hints/?platform=browser#before-send

[garyforsterio]

Thanks for the snippet but I think there should be a correction:

 beforeSend(event) {
    // Detect if we got a ReportingObserver event
    if (event.message && event.message.startsWith('ReportingObserver')) {
      // And check if the observer's report had a body, if so, check whether sourceFile points to chrome-extension. If so, drop the event.
      if (
        event.extra.body &&
+        event.extra.body.sourceFile &&
        event.extra.body.sourceFile.startsWith('chrome-extension')
      ) {
        return null;
      }
    }
    // Otherwise, just let it through
    return event;
  }

without it I'm currently getting the error Cannot read property 'startsWith' of undefined

[kamilogorek]

You're right. Updated :) Thanks!

[elamperti]

Worth noting here that #1713 removed ReportingObserver from the defaults, so starting with v4.3.0+ this shouldn't be an issue anymore 😄