feat(core): Create template attributes in consoleLoggingIntegration (#17703)

ref #16737

Right now if users use `console.log` like so:

```js
console.log("here", "is", "my", "log", "statement");
```

The console logging integration will emit a log with log message `"here
is my log statement"`.

Some users would like it if we automatically paramaterized this into a
template, given there are separate arguments being sent into the logging
statement. So the above log statement would generate

```json
{
  "sentry.message.template": "here {} {} {} {}",
  "sentry.message.parameter.0": "is",
  "sentry.message.parameter.1": "my",
  "sentry.message.parameter.2": "log",
  "sentry.message.parameter.3": "statement",
}
```

This paramaterization is what this PR does, which provides a much better
user experience.

One edge case that we need to watch out for is console substitution
patterns like `%s`, `%d`, `%i`, `%f`, `%o`, `%O`, `%c`. Read more about
this in the [MDN
docs](https://developer.mozilla.org/en-US/docs/Web/API/console). When
encountering a console substitution pattern in the string, we elect to
not generate string templates, as parsing the string to evaluate it gets
too complicated client side.

Author: AbhiPrasad

dev-packages/browser-integration-tests/suites/public-api/logger/integration/subject.js

@@ -13,4 +13,12 @@ console.log('Mixed:', 'prefix', { obj: true }, [4, 5, 6], 'suffix');
 
 console.log('');
 
+// Test console substitution patterns (should NOT generate template attributes)
+console.log('String substitution %s %d', 'test', 42);
+console.log('Object substitution %o', { key: 'value' });
+
+// Test multiple arguments without substitutions (should generate template attributes)
+console.log('first', 0, 1, 2);
+console.log('hello', true, null, undefined);
+
 Sentry.flush();

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

@@ -18,7 +18,7 @@ sentryTest('should capture console object calls', async ({ getLocalTestUrl, page
   expect(envelopeItems[0]).toEqual([
     {
       type: 'log',
-      item_count: 11,
+      item_count: 15,
       content_type: 'application/vnd.sentry.items.log+json',
     },
     {
@@ -33,6 +33,9 @@ sentryTest('should capture console object calls', async ({ getLocalTestUrl, page
             'sentry.origin': { value: 'auto.console.logging', type: 'string' },
             'sentry.sdk.name': { value: 'sentry.javascript.browser', type: 'string' },
             'sentry.sdk.version': { value: expect.any(String), type: 'string' },
+            'sentry.message.template': { value: 'console.trace {} {}', type: 'string' },
+            'sentry.message.parameter.0': { value: 123, type: 'integer' },
+            'sentry.message.parameter.1': { value: false, type: 'boolean' },
           },
         },
         {
@@ -45,6 +48,9 @@ sentryTest('should capture console object calls', async ({ getLocalTestUrl, page
             'sentry.origin': { value: 'auto.console.logging', type: 'string' },
             'sentry.sdk.name': { value: 'sentry.javascript.browser', type: 'string' },
             'sentry.sdk.version': { value: expect.any(String), type: 'string' },
+            'sentry.message.template': { value: 'console.debug {} {}', type: 'string' },
+            'sentry.message.parameter.0': { value: 123, type: 'integer' },
+            'sentry.message.parameter.1': { value: false, type: 'boolean' },
           },
         },
         {
@@ -57,6 +63,9 @@ sentryTest('should capture console object calls', async ({ getLocalTestUrl, page
             'sentry.origin': { value: 'auto.console.logging', type: 'string' },
             'sentry.sdk.name': { value: 'sentry.javascript.browser', type: 'string' },
             'sentry.sdk.version': { value: expect.any(String), type: 'string' },
+            'sentry.message.template': { value: 'console.log {} {}', type: 'string' },
+            'sentry.message.parameter.0': { value: 123, type: 'integer' },
+            'sentry.message.parameter.1': { value: false, type: 'boolean' },
           },
         },
         {
@@ -69,6 +78,9 @@ sentryTest('should capture console object calls', async ({ getLocalTestUrl, page
             'sentry.origin': { value: 'auto.console.logging', type: 'string' },
             'sentry.sdk.name': { value: 'sentry.javascript.browser', type: 'string' },
             'sentry.sdk.version': { value: expect.any(String), type: 'string' },
+            'sentry.message.template': { value: 'console.info {} {}', type: 'string' },
+            'sentry.message.parameter.0': { value: 123, type: 'integer' },
+            'sentry.message.parameter.1': { value: false, type: 'boolean' },
           },
         },
         {
@@ -81,6 +93,9 @@ sentryTest('should capture console object calls', async ({ getLocalTestUrl, page
             'sentry.origin': { value: 'auto.console.logging', type: 'string' },
             'sentry.sdk.name': { value: 'sentry.javascript.browser', type: 'string' },
             'sentry.sdk.version': { value: expect.any(String), type: 'string' },
+            'sentry.message.template': { value: 'console.warn {} {}', type: 'string' },
+            'sentry.message.parameter.0': { value: 123, type: 'integer' },
+            'sentry.message.parameter.1': { value: false, type: 'boolean' },
           },
         },
         {
@@ -93,6 +108,9 @@ sentryTest('should capture console object calls', async ({ getLocalTestUrl, page
             'sentry.origin': { value: 'auto.console.logging', type: 'string' },
             'sentry.sdk.name': { value: 'sentry.javascript.browser', type: 'string' },
             'sentry.sdk.version': { value: expect.any(String), type: 'string' },
+            'sentry.message.template': { value: 'console.error {} {}', type: 'string' },
+            'sentry.message.parameter.0': { value: 123, type: 'integer' },
+            'sentry.message.parameter.1': { value: false, type: 'boolean' },
           },
         },
         {
@@ -117,6 +135,8 @@ sentryTest('should capture console object calls', async ({ getLocalTestUrl, page
             'sentry.origin': { value: 'auto.console.logging', type: 'string' },
             'sentry.sdk.name': { value: 'sentry.javascript.browser', type: 'string' },
             'sentry.sdk.version': { value: expect.any(String), type: 'string' },
+            'sentry.message.template': { value: 'Object: {}', type: 'string' },
+            'sentry.message.parameter.0': { value: '{"key":"value","nested":{"prop":123}}', type: 'string' },
           },
         },
         {
@@ -129,6 +149,8 @@ sentryTest('should capture console object calls', async ({ getLocalTestUrl, page
             'sentry.origin': { value: 'auto.console.logging', type: 'string' },
             'sentry.sdk.name': { value: 'sentry.javascript.browser', type: 'string' },
             'sentry.sdk.version': { value: expect.any(String), type: 'string' },
+            'sentry.message.template': { value: 'Array: {}', type: 'string' },
+            'sentry.message.parameter.0': { value: '[1,2,3,"string"]', type: 'string' },
           },
         },
         {
@@ -141,6 +163,11 @@ sentryTest('should capture console object calls', async ({ getLocalTestUrl, page
             'sentry.origin': { value: 'auto.console.logging', type: 'string' },
             'sentry.sdk.name': { value: 'sentry.javascript.browser', type: 'string' },
             'sentry.sdk.version': { value: expect.any(String), type: 'string' },
+            'sentry.message.template': { value: 'Mixed: {} {} {} {}', type: 'string' },
+            'sentry.message.parameter.0': { value: 'prefix', type: 'string' },
+            'sentry.message.parameter.1': { value: '{"obj":true}', type: 'string' },
+            'sentry.message.parameter.2': { value: '[4,5,6]', type: 'string' },
+            'sentry.message.parameter.3': { value: 'suffix', type: 'string' },
           },
         },
         {
@@ -155,6 +182,62 @@ sentryTest('should capture console object calls', async ({ getLocalTestUrl, page
             'sentry.sdk.version': { value: expect.any(String), type: 'string' },
           },
         },
+        {
+          timestamp: expect.any(Number),
+          level: 'info',
+          severity_number: 10,
+          trace_id: expect.any(String),
+          body: 'String substitution %s %d test 42',
+          attributes: {
+            'sentry.origin': { value: 'auto.console.logging', type: 'string' },
+            'sentry.sdk.name': { value: 'sentry.javascript.browser', type: 'string' },
+            'sentry.sdk.version': { value: expect.any(String), type: 'string' },
+          },
+        },
+        {
+          timestamp: expect.any(Number),
+          level: 'info',
+          severity_number: 10,
+          trace_id: expect.any(String),
+          body: 'Object substitution %o {"key":"value"}',
+          attributes: {
+            'sentry.origin': { value: 'auto.console.logging', type: 'string' },
+            'sentry.sdk.name': { value: 'sentry.javascript.browser', type: 'string' },
+            'sentry.sdk.version': { value: expect.any(String), type: 'string' },
+          },
+        },
+        {
+          timestamp: expect.any(Number),
+          level: 'info',
+          severity_number: 10,
+          trace_id: expect.any(String),
+          body: 'first 0 1 2',
+          attributes: {
+            'sentry.origin': { value: 'auto.console.logging', type: 'string' },
+            'sentry.sdk.name': { value: 'sentry.javascript.browser', type: 'string' },
+            'sentry.sdk.version': { value: expect.any(String), type: 'string' },
+            'sentry.message.template': { value: 'first {} {} {}', type: 'string' },
+            'sentry.message.parameter.0': { value: 0, type: 'integer' },
+            'sentry.message.parameter.1': { value: 1, type: 'integer' },
+            'sentry.message.parameter.2': { value: 2, type: 'integer' },
+          },
+        },
+        {
+          timestamp: expect.any(Number),
+          level: 'info',
+          severity_number: 10,
+          trace_id: expect.any(String),
+          body: 'hello true null undefined',
+          attributes: {
+            'sentry.origin': { value: 'auto.console.logging', type: 'string' },
+            'sentry.sdk.name': { value: 'sentry.javascript.browser', type: 'string' },
+            'sentry.sdk.version': { value: expect.any(String), type: 'string' },
+            'sentry.message.template': { value: 'hello {} {} {}', type: 'string' },
+            'sentry.message.parameter.0': { value: true, type: 'boolean' },
+            'sentry.message.parameter.1': { value: 'null', type: 'string' },
+            'sentry.message.parameter.2': { value: '', type: 'string' },
+          },
+        },
       ],
     },
   ]);

packages/core/src/logs/console-integration.ts

@@ -7,7 +7,7 @@ import type { ConsoleLevel } from '../types-hoist/instrument';
 import type { IntegrationFn } from '../types-hoist/integration';
 import { CONSOLE_LEVELS, debug } from '../utils/debug-logger';
 import { _INTERNAL_captureLog } from './internal';
-import { formatConsoleArgs } from './utils';
+import { createConsoleTemplateAttributes, formatConsoleArgs, hasConsoleSubstitutions } from './utils';
 
 interface CaptureConsoleOptions {
   levels: ConsoleLevel[];
@@ -36,9 +36,11 @@ const _consoleLoggingIntegration = ((options: Partial<CaptureConsoleOptions> = {
           return;
         }
 
+        const firstArg = args[0];
+        const followingArgs = args.slice(1);
+
         if (level === 'assert') {
-          if (!args[0]) {
-            const followingArgs = args.slice(1);
+          if (!firstArg) {
             const assertionMessage =
               followingArgs.length > 0
                 ? `Assertion failed: ${formatConsoleArgs(followingArgs, normalizeDepth, normalizeMaxBreadth)}`
@@ -49,11 +51,19 @@ const _consoleLoggingIntegration = ((options: Partial<CaptureConsoleOptions> = {
         }
 
         const isLevelLog = level === 'log';
+
+        const shouldGenerateTemplate =
+          args.length > 1 && typeof args[0] === 'string' && !hasConsoleSubstitutions(args[0]);
+        const attributes = {
+          ...DEFAULT_ATTRIBUTES,
+          ...(shouldGenerateTemplate ? createConsoleTemplateAttributes(firstArg, followingArgs) : {}),
+        };
+
         _INTERNAL_captureLog({
           level: isLevelLog ? 'info' : level,
           message: formatConsoleArgs(args, normalizeDepth, normalizeMaxBreadth),
           severityNumber: isLevelLog ? 10 : undefined,
-          attributes: DEFAULT_ATTRIBUTES,
+          attributes,
         });
       });
     },

packages/core/src/logs/utils.ts

@@ -37,3 +37,35 @@ export function safeJoinConsoleArgs(values: unknown[], normalizeDepth: number, n
     )
     .join(' ');
 }
+
+/**
+ * Checks if a string contains console substitution patterns like %s, %d, %i, %f, %o, %O, %c.
+ *
+ * @param str - The string to check
+ * @returns true if the string contains console substitution patterns
+ */
+export function hasConsoleSubstitutions(str: string): boolean {
+  // Match console substitution patterns: %s, %d, %i, %f, %o, %O, %c
+  return /%[sdifocO]/.test(str);
+}
+
+/**
+ * Creates template attributes for multiple console arguments.
+ *
+ * @param args - The console arguments
+ * @returns An object with template and parameter attributes
+ */
+export function createConsoleTemplateAttributes(firstArg: unknown, followingArgs: unknown[]): Record<string, unknown> {
+  const attributes: Record<string, unknown> = {};
+
+  // Create template with placeholders for each argument
+  const template = new Array(followingArgs.length).fill('{}').join(' ');
+  attributes['sentry.message.template'] = `${firstArg} ${template}`;
+
+  // Add each argument as a parameter
+  followingArgs.forEach((arg, index) => {
+    attributes[`sentry.message.parameter.${index}`] = arg;
+  });
+
+  return attributes;
+}