feat(browser)!: Record console breadcrumbs via consoleIntegration (#24387)

Removes the `console` option from `breadcrumbsIntegration` and enables
the core `consoleIntegration` by default instead, matching the
server-side SDKs. It only records breadcrumbs, no logs.
Refs #17702

---------

Co-authored-by: Claude Opus 5 <noreply@anthropic.com>

Author: chargome

MIGRATION.md

@@ -1529,6 +1529,7 @@ Sentry.init({
 
 ### `@sentry/browser`
 
+- The `console` option was removed from `breadcrumbsIntegration`. Console breadcrumbs now come from the default `consoleIntegration`: filter out the `Console` integration to disable them, or add `consoleIntegration()` if you set `defaultIntegrations: false`.
 - The experimental `_experiments.enableStandaloneClsSpans` and `_experiments.enableStandaloneLcpSpans` options were removed from both `browserTracingIntegration` and `webVitalsIntegration`. CLS and LCP are no longer configurable: they are recorded as measurements on the pageload span, unless span streaming is enabled (`traceLifecycle: 'stream'`), in which case they are sent as dedicated spans.
 - INP is now always sent as a web vital span (streamed when span streaming is enabled, standalone otherwise) that carries its value as a `browser.web_vital.inp.value` attribute. Previously, with span streaming disabled, INP was sent as a standalone span that carried its value as a span measurement.
 

dev-packages/browser-integration-tests/suites/integrations/Breadcrumbs/console/init.js

@@ -6,6 +6,6 @@ Sentry.init({
   traceLifecycle: 'static',
   dsn: 'https://public@dsn.ingest.sentry.io/1337',
   defaultIntegrations: false,
-  integrations: [Sentry.breadcrumbsIntegration()],
+  integrations: [Sentry.breadcrumbsIntegration(), Sentry.consoleIntegration()],
   sampleRate: 1,
 });

dev-packages/browser-integration-tests/suites/public-api/debug/test.ts

@@ -36,6 +36,7 @@ sentryTest('logs debug messages correctly', async ({ getLocalTestUrl, page }) =>
           'Sentry Logger [log]: Integration installed: ConversationId',
           'Sentry Logger [log]: Integration installed: BrowserApiErrors',
           'Sentry Logger [log]: Integration installed: Breadcrumbs',
+          'Sentry Logger [log]: Integration installed: Console',
           'Sentry Logger [log]: Global Handler attached: onerror',
           'Sentry Logger [log]: Global Handler attached: onunhandledrejection',
           'Sentry Logger [log]: Integration installed: GlobalHandlers',

packages/angular/src/sdk.ts

@@ -13,6 +13,7 @@ import {
 import type { Client, Integration } from '@sentry/core';
 import {
   applySdkMetadata,
+  consoleIntegration,
   conversationIdIntegration,
   debug,
   dedupeIntegration,
@@ -38,6 +39,7 @@ export function getDefaultIntegrations(_options: BrowserOptions = {}): Integrati
     functionToStringIntegration(),
     conversationIdIntegration(),
     breadcrumbsIntegration(),
+    consoleIntegration(),
     globalHandlersIntegration(),
     linkedErrorsIntegration(),
     dedupeIntegration(),

packages/astro/src/index.types.ts

@@ -19,6 +19,7 @@ export * from '@sentry/node';
 export declare function init(options: Options | clientSdk.BrowserOptions | NodeOptions): Client | undefined;
 
 export declare const linkedErrorsIntegration: typeof clientSdk.linkedErrorsIntegration;
+export declare const consoleIntegration: typeof serverSdk.consoleIntegration;
 export declare const contextLinesIntegration: typeof clientSdk.contextLinesIntegration;
 export declare const startSpan: typeof clientSdk.startSpan;
 export declare const startSpanManual: typeof clientSdk.startSpanManual;

packages/browser/src/exports.ts

@@ -62,6 +62,7 @@ export {
   functionToStringIntegration,
   eventFiltersIntegration,
   dedupeIntegration,
+  consoleIntegration,
   parameterize,
   startSession,
   captureSession,

packages/browser/src/integrations/breadcrumbs.ts

@@ -6,22 +6,18 @@ import type {
   Event as SentryEvent,
   FetchBreadcrumbData,
   FetchBreadcrumbHint,
-  HandlerDataConsole,
   HandlerDataFetch,
   IntegrationFn,
 } from '@sentry/core';
 import {
   addBreadcrumb,
-  addConsoleInstrumentationHandler,
   addFetchInstrumentationHandler,
   debug,
   defineIntegration,
   getBreadcrumbLogLevelFromHttpStatusCode,
   getClient,
   getEventDescription,
   parseUrl,
-  safeJoin,
-  severityLevelFromString,
 } from '@sentry/core';
 import type { FetchHint, HandlerDataDom, HandlerDataHistory, HandlerDataXhr } from '@sentry/browser-utils';
 import {
@@ -37,7 +33,6 @@ import { DEBUG_BUILD } from '../debug-build';
 import { WINDOW } from '../helpers';
 
 interface BreadcrumbsOptions {
-  console: boolean;
   dom:
     | boolean
     | {
@@ -57,7 +52,6 @@ const INTEGRATION_NAME = 'Breadcrumbs' as const;
 
 const _breadcrumbsIntegration = ((options: Partial<BreadcrumbsOptions> = {}) => {
   const _options = {
-    console: true,
     dom: true,
     fetch: true,
     history: true,
@@ -69,10 +63,6 @@ const _breadcrumbsIntegration = ((options: Partial<BreadcrumbsOptions> = {}) =>
   return {
     name: INTEGRATION_NAME,
     setup(client) {
-      // TODO(v11): Remove this functionality and use `consoleIntegration` from @sentry/core instead.
-      if (_options.console) {
-        addConsoleInstrumentationHandler(_getConsoleBreadcrumbHandler(client));
-      }
       if (_options.dom) {
         addClickKeypressInstrumentationHandler(_getDomBreadcrumbHandler(client, _options.dom));
       }
@@ -180,42 +170,6 @@ function _getDomBreadcrumbHandler(
   };
 }
 
-/**
- * Creates breadcrumbs from console API calls
- */
-function _getConsoleBreadcrumbHandler(client: Client): (handlerData: HandlerDataConsole) => void {
-  return function _consoleBreadcrumb(handlerData: HandlerDataConsole): void {
-    if (getClient() !== client) {
-      return;
-    }
-
-    const breadcrumb = {
-      category: 'console',
-      data: {
-        arguments: handlerData.args,
-        logger: 'console',
-      },
-      level: severityLevelFromString(handlerData.level),
-      message: safeJoin(handlerData.args, ' '),
-    };
-
-    if (handlerData.level === 'assert') {
-      if (handlerData.args[0] === false) {
-        breadcrumb.message = `Assertion failed: ${safeJoin(handlerData.args.slice(1), ' ') || 'console.assert'}`;
-        breadcrumb.data.arguments = handlerData.args.slice(1);
-      } else {
-        // Don't capture a breadcrumb for passed assertions
-        return;
-      }
-    }
-
-    addBreadcrumb(breadcrumb, {
-      input: handlerData.args,
-      level: handlerData.level,
-    });
-  };
-}
-
 /**
  * Creates breadcrumbs from XHR API calls
  */

packages/browser/src/sdk.ts

@@ -1,5 +1,6 @@
 import type { Client, Integration, Options } from '@sentry/core';
 import {
+  consoleIntegration,
   conversationIdIntegration,
   dedupeIntegration,
   eventFiltersIntegration,
@@ -36,6 +37,7 @@ export function getDefaultIntegrations(_options: Options): Integration[] {
     conversationIdIntegration(),
     browserApiErrorsIntegration(),
     breadcrumbsIntegration(),
+    consoleIntegration(),
     globalHandlersIntegration(),
     linkedErrorsIntegration(),
     dedupeIntegration(),

packages/effect/src/index.types.ts

@@ -20,6 +20,7 @@ export declare function effectLayer(
 
 export declare function init(options: Options | clientSdk.BrowserOptions | serverSdk.NodeOptions): Client | undefined;
 export declare const linkedErrorsIntegration: typeof clientSdk.linkedErrorsIntegration;
+export declare const consoleIntegration: typeof serverSdk.consoleIntegration;
 export declare const contextLinesIntegration: typeof clientSdk.contextLinesIntegration;
 export declare const SentryEffectTracer: typeof clientSdk.SentryEffectTracer;
 export declare const startSpan: typeof clientSdk.startSpan;

packages/nextjs/test/clientSdk.test.ts

@@ -128,7 +128,7 @@ describe('Client init()', () => {
     type ModifiedInitOptionsIntegrationArray = { defaultIntegrations: Integration[]; integrations: Integration[] };
 
     it('supports passing unrelated integrations through options', () => {
-      init({ integrations: [breadcrumbsIntegration({ console: false })] });
+      init({ integrations: [breadcrumbsIntegration({ dom: false })] });
 
       const reactInitOptions = reactInit.mock.calls[0]![0] as ModifiedInitOptionsIntegrationArray;
       const installedBreadcrumbsIntegration = findIntegrationByName(reactInitOptions.integrations, 'Breadcrumbs');