Allow configuring which console calls capture breadcrumb

[jrencz]

Do you want to request a feature or report a bug?
Request a feature

What is the current behavior?
Using existing configuration one can only turn autoBreadcrumbs.console on or off. There's no precise control over which console functions are capturing breadcrumb and which don't.

What is the expected behavior?
There should be a way to express which console methods are expected to capture a breadcrumb.

My use case:
I use console.debug in my app but I don't want those to be sent to Sentry.
I see I have a few options:

• I can eliminate certain console calls as a build step so that they just aren't there on stages and production
• I can use breadcrumbCallback to find and eliminate crumbs of category: 'console' and level: 'debug'. Although it's a great way, it took me some time to figure out that what I want is doable via breadcrumbCallback

I think the following should be considered:

In config

autoBreadcrumbs: {
  console: true | false | object
}

If object then the following object can be passed:

{
  debug: true (default) | false,
  info: true (default) | false,
  log: true (default) | false,
  warn: true (default) | false,
  error: true (default) | false,
  ... (any other key, if true, will be treated as console method name)
}

Pros:

• it will be immediately discoverable which console methods will and which won't
• defaults can be omitted (as it is now for defaults of autoBreadcrumbs)

Cons:

• there should be additional check for presence of a console method before it's wrapped to prevent misconfiguration. In fact there's one already in the condition for autoBreadcrumbs.console, where presence of console.log is checked.

Summing things up:

• passing false as value for keys corresponding with 5 default console methods will disable capturing breadcrumb for them
• passing true as value for keys not being within 5 default, but present on console object and being functions will result in capturing breadcrumbs for that method

[kamilogorek]

Done through console integration

[akashnimare]

@kamilogorek is there any way to disable the console logs? Currently, it logs everything from the console.

[kamilogorek]

@akashnimare completely?

init({
  dsn: '__YOUR_DSN__',
  integrations: [new Sentry.Integrations.Breadcrumbs({
      beacon: true,
      console: false,
      dom: true,
      fetch: true,
      history: true,
      sentry: true,
      xhr: true
  })] 
})

[akashnimare]

@kamilogorek no, just want to disable the console logs. Would that be enough -

init({
  dsn: '__YOUR_DSN__',
  integrations: [new Sentry.Integrations.Breadcrumbs({
      console: false
  })] 
})

Thanks for the help :)

[kamilogorek]

@akashnimare it will be once we merge this #1571 :)

[didnotwant]

Done through console integration

@kamilogorek — how do you disable specific console method (such as warn, info) separately in @sentry/browser? As far as I understand the Console integration exists only in @sentry/node but still: no idea how to use it in order to achieve what was described in this issue.

[kamilogorek]

@didnotwant it's not possible to do it separately for warn/info/log/error. It's either whole console wrapped or none.

Sentry.init({
  dsn: '__YOUR_DSN__',
  integrations: [new Sentry.Integrations.Breadcrumbs({
      console: false
  })] 
})

[jrencz]

@didnotwant you can use beforeBreadcrumb or eventProcessor to filter out those you don't want for some reason.

In Breadcrumbs integration code you can see that it passes the level value in the SentryBreadcrumbHint object to Breadcrumbs.addBreadcrumb:

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

Lines 118 to 160 in 65965ff

	private instrumentConsole(): void {
	if (!('console' in global)) {
	return;
	}
	['debug', 'info', 'warn', 'error', 'log'].forEach(function(level: string): void {
	if (!(level in global.console)) {
	return;
	}
	fill(global.console, level, function(originalConsoleLevel: () => any): any {
	return function(...args: any[]): any {
	const breadcrumbData = {
	category: 'console',
	data: {
	extra: {
	arguments: args.slice(1),
	},
	logger: 'console',
	},
	level: Severity.fromString(level),
	message: safeJoin(args, ' '),
	};
	if (level === 'assert') {
	if (args[0] === false) {
	breadcrumbData.message = `Assertion failed: ${safeJoin(args.slice(1), ' ') || 'console.assert'}`;
	breadcrumbData.data.extra.arguments = args.slice(1);
	}
	}
	Breadcrumbs.addBreadcrumb(breadcrumbData, {
	input: args,
	level,
	});
	// this fails for some browsers. :(
	if (originalConsoleLevel) {
	Function.prototype.apply.call(originalConsoleLevel, global.console, args);
	}
	};
	});
	});
	}

You can use the hind to prevent the breadcrumb from being sent

[piotr-cz]

I'd like to filter out specific console warnings.
For that I've prepared beforeBreadcrumb hook which for some reason doesn't apply and breadcrumb is still shown in panel:

export function beforeBreadcrumb (breadcrumb: Breadcrumb, hint?: BreadcrumbHint): Breadcrumb | null {
  if (
    breadcrumb.type === 'debug' &&
    breadcrumb.category === 'console' &&
    breadcrumb.message === 'The message I would like to ignore'
  ) {
    return null
  }

  return breadcrumb
}

I wonder what I'm doing wrong, since from docs I'd say that type should be debug:

debug
This is typically a log message. The data part is entirely undefined and as such, completely rendered as a key/value table.
Internally we display breadcrumbs of type default that contain category console as a breadcrumb of type debug.

Does the above mean that console type is in fact default but in panel shown as debug?

It looks like the debug type isn't being set:

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

Lines 153 to 162 in f49c509

	function _consoleBreadcrumb(handlerData: { [key: string]: any }): void {
	const breadcrumb = {
	category: 'console',
	data: {
	arguments: handlerData.args,
	logger: 'console',
	},
	level: severityFromString(handlerData.level),
	message: safeJoin(handlerData.args, ' '),
	};

[kamilogorek]

Correct. It's shown as a debug in the UI due to special handling of console category, which is then distinguished using level setting. You need to use breadcrumb.level instead:

sentry-javascript/packages/utils/src/instrument.ts

Lines 113 to 128 in f49c509

	CONSOLE_LEVELS.forEach(function (level: string): void {
	if (!(level in global.console)) {
	return;
	}
	fill(global.console, level, function (originalConsoleMethod: () => any): Function {
	return function (...args: any[]): void {
	triggerHandlers('console', { args, level });
	// this fails for some browsers. :(
	if (originalConsoleMethod) {
	originalConsoleMethod.apply(global.console, args);
	}
	};
	});
	});