feat: add custom error serializer to console instrumentation (#902)

Co-authored-by: marco.schaefer <[email protected]>

Author: eskirk

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Next
 
+- Feature (`@grafana/faro-web-sdk`): Add `errorSerializer` to the `consoleInstrumentation` property of the core
+  configuration object to provide custom ways to serialize data captured by the `ConsoleInstrumentation` (#902)
 - Feature (`@grafana/faro-web-sdk`): Provide APIs to send `service.name` override instructions to the
   receiver (#893)
 - Improvement (`@grafana/faro-web-sdk`): Send an event for `service.name` overrides (#903)

packages/core/src/config/types.ts

@@ -179,6 +179,11 @@ export interface Config<P = APIEvent> {
      * By default, Faro sends an error for console.error calls. If you want to send a log instead, set this to true.
      */
     consoleErrorAsLog?: boolean;
+
+    /**
+     * Custom function to serialize the contents of error messages
+     */
+    errorSerializer?: LogArgsSerializer;
   };
 }
 

packages/web-sdk/src/index.ts

@@ -168,3 +168,4 @@ export {
 } from './instrumentations/session';
 
 export { getIgnoreUrls } from './utils/url';
+export { stringifyExternalJson } from './utils/json';

packages/web-sdk/src/instrumentations/console/instrumentation.test.ts

@@ -3,6 +3,7 @@ import type { ExceptionEvent, LogEvent } from '@grafana/faro-core';
 import { mockConfig, MockTransport } from '@grafana/faro-core/src/testUtils';
 
 import { makeCoreConfig } from '../../config';
+import { stringifyExternalJson } from '../../utils';
 
 import { ConsoleInstrumentation } from './instrumentation';
 
@@ -81,6 +82,37 @@ describe('ConsoleInstrumentation', () => {
     );
   });
 
+  it('Handles objects with circular references with custom serializer', () => {
+    const mockTransport = new MockTransport();
+
+    initializeFaro(
+      makeCoreConfig(
+        mockConfig({
+          transports: [mockTransport],
+          instrumentations: [
+            new ConsoleInstrumentation({
+              errorSerializer: (args: any[]) => {
+                return args.map((arg) => (typeof arg === 'string' ? arg : stringifyExternalJson(arg))).join(' ');
+              },
+            }),
+          ],
+          unpatchedConsole: {
+            error: jest.fn(),
+          } as unknown as Console,
+        })
+      )!
+    );
+
+    const objWithCircularRef = { foo: 'bar', baz: 'bam' };
+    (objWithCircularRef as any).circular = objWithCircularRef;
+
+    console.error('with circular refs object', objWithCircularRef);
+
+    expect((mockTransport.items[0] as TransportItem<ExceptionEvent>)?.payload.value).toBe(
+      `console.error: with circular refs object {\"foo\":\"bar\",\"baz\":\"bam\",\"circular\":null}`
+    );
+  });
+
   it('sends a faro log for console.error calls if configured', () => {
     const mockTransport = new MockTransport();
 

packages/web-sdk/src/instrumentations/console/instrumentation.ts

@@ -1,4 +1,11 @@
-import { allLogLevels, BaseInstrumentation, defaultLogArgsSerializer, LogLevel, VERSION } from '@grafana/faro-core';
+import {
+  allLogLevels,
+  BaseInstrumentation,
+  defaultLogArgsSerializer,
+  LogArgsSerializer,
+  LogLevel,
+  VERSION,
+} from '@grafana/faro-core';
 
 import type { ConsoleInstrumentationOptions } from './types';
 
@@ -7,6 +14,7 @@ export class ConsoleInstrumentation extends BaseInstrumentation {
   readonly version = VERSION;
 
   static defaultDisabledLevels: LogLevel[] = [LogLevel.DEBUG, LogLevel.TRACE, LogLevel.LOG];
+  private errorSerializer: LogArgsSerializer = defaultLogArgsSerializer;
 
   constructor(private options: ConsoleInstrumentationOptions = {}) {
     super();
@@ -15,6 +23,7 @@ export class ConsoleInstrumentation extends BaseInstrumentation {
   initialize() {
     this.logDebug('Initializing\n', this.options);
     this.options = { ...this.options, ...this.config.consoleInstrumentation };
+    this.errorSerializer = this.options.errorSerializer ?? defaultLogArgsSerializer;
 
     allLogLevels
       .filter(
@@ -25,7 +34,7 @@ export class ConsoleInstrumentation extends BaseInstrumentation {
         console[level] = (...args) => {
           try {
             if (level === LogLevel.ERROR && !this.options?.consoleErrorAsLog) {
-              this.api.pushError(new Error('console.error: ' + defaultLogArgsSerializer(args)));
+              this.api.pushError(new Error('console.error: ' + this.errorSerializer(args)));
             } else {
               this.api.pushLog(args, { level });
             }