feat: Use useful event description instead of event_id for user-facing logs

Author: kamilogorek

packages/browser/src/integrations/breadcrumbs.ts

@@ -2,6 +2,7 @@ import { API, getCurrentHub, logger } from '@sentry/core';
 import { Integration, Severity } from '@sentry/types';
 import { isFunction, isString } from '@sentry/utils/is';
 import { getGlobalObject, parseUrl } from '@sentry/utils/misc';
+import { getEventDescription } from '@sentry/utils/misc';
 import { deserialize, fill } from '@sentry/utils/object';
 import { safeJoin } from '@sentry/utils/string';
 import { supportsBeacon, supportsHistory, supportsNativeFetch } from '@sentry/utils/supports';
@@ -26,14 +27,13 @@ function addSentryBreadcrumb(serializedData: string): void {
   // There's always something that can go wrong with deserialization...
   try {
     const event: { [key: string]: any } = deserialize(serializedData);
-    const exception = event.exception && event.exception.values && event.exception.values[0];
 
     getCurrentHub().addBreadcrumb(
       {
         category: 'sentry',
         event_id: event.event_id,
         level: event.level || Severity.fromString('error'),
-        message: exception ? `${exception.type ? `${exception.type}: ` : ''}${exception.value}` : event.message,
+        message: getEventDescription(event),
       },
       {
         event,

packages/browser/src/integrations/inboundfilters.ts

@@ -2,6 +2,7 @@ import { configureScope, logger } from '@sentry/core';
 import { Integration, SentryEvent } from '@sentry/types';
 import { isRegExp } from '@sentry/utils/is';
 import { BrowserOptions } from '../backend';
+import { getEventDescription } from '@sentry/utils/misc';
 
 // "Script error." is hard coded into browsers for errors that it can't read.
 // this is the result of a script being pulled in from an external domain and CORS.
@@ -39,15 +40,15 @@ export class InboundFilters implements Integration {
   /** JSDoc */
   public shouldDropEvent(event: SentryEvent): boolean {
     if (this.isIgnoredError(event)) {
-      logger.warn(`Event dropped due to being matched by \`ignoreErrors\` option.\n  Event: ${event.event_id}`);
+      logger.warn(`Event dropped due to being matched by \`ignoreErrors\` option.\n  Event: ${getEventDescription(event)}`);
       return true;
     }
     if (this.isBlacklistedUrl(event)) {
-      logger.warn(`Event dropped due to being matched by \`blacklistUrls\` option.\n  Event: ${event.event_id}`);
+      logger.warn(`Event dropped due to being matched by \`blacklistUrls\` option.\n  Event: ${getEventDescription(event)}`);
       return true;
     }
     if (!this.isWhitelistedUrl(event)) {
-      logger.warn(`Event dropped due to not being matched by \`whitelistUrls\` option.\n  Event: ${event.event_id}`);
+      logger.warn(`Event dropped due to not being matched by \`whitelistUrls\` option.\n  Event: ${getEventDescription(event)}`);
       return true;
     }
     return false;
@@ -120,7 +121,7 @@ export class InboundFilters implements Integration {
         const { type, value } = evt.exception.values[0];
         return [`${value}`, `${type}: ${value}`];
       } catch (oO) {
-        logger.error(`Cannot extract message for event ${event.event_id}`);
+        logger.error(`Cannot extract message for event ${getEventDescription(event)}`);
         return [];
       }
     } else {
@@ -141,7 +142,7 @@ export class InboundFilters implements Integration {
         return '';
       }
     } catch (oO) {
-      logger.error(`Cannot extract url for event ${event.event_id}`);
+      logger.error(`Cannot extract url for event ${getEventDescription(event)}`);
       return '';
     }
   }

packages/utils/src/misc.ts

@@ -1,3 +1,4 @@
+import { SentryEvent } from '@sentry/types';
 import { isString } from './is';
 
 /**
@@ -179,3 +180,23 @@ export function parseUrl(
     relative: match[5] + query + fragment, // everything minus origin
   };
 }
+
+/**
+ * Extracts either message or type+value from an event that can be used for user-facing logs
+ * @returns event's description
+ */
+export function getEventDescription(event: SentryEvent): string {
+  if (event.message) {
+    return event.message;
+  } else if (event.exception && event.exception.values && event.exception.values[0]) {
+    const exception = event.exception.values[0];
+
+    if (exception.type && exception.value) {
+      return `${exception.type}: ${exception.value}`;
+    } else {
+      return exception.type || exception.value || event.event_id || '<unknown>';
+    }
+  } else {
+    return event.event_id || '<unknown>';
+  }
+}

packages/utils/test/misc.test.ts

@@ -0,0 +1,110 @@
+import { getEventDescription } from '../src/misc';
+
+describe('getEventDescription()', () => {
+  test('message event', () => {
+    expect(
+      getEventDescription({
+        message: 'Random message',
+        exception: {
+          values: [
+            {
+              type: 'SyntaxError',
+              value: 'wat',
+            },
+          ],
+        },
+      }),
+    ).toEqual('Random message');
+  });
+
+  test('exception event with just type', () => {
+    expect(
+      getEventDescription({
+        exception: {
+          values: [
+            {
+              type: 'SyntaxError',
+            },
+          ],
+        },
+      }),
+    ).toEqual('SyntaxError');
+  });
+
+  test('exception event with just value', () => {
+    expect(
+      getEventDescription({
+        exception: {
+          values: [
+            {
+              value: 'wat',
+            },
+          ],
+        },
+      }),
+    ).toEqual('wat');
+  });
+
+  test('exception event with type and value', () => {
+    expect(
+      getEventDescription({
+        exception: {
+          values: [
+            {
+              type: 'SyntaxError',
+              value: 'wat',
+            },
+          ],
+        },
+      }),
+    ).toEqual('SyntaxError: wat');
+  });
+
+  test('exception event with invalid type and value, but with event_id', () => {
+    expect(
+      getEventDescription({
+        exception: {
+          values: [
+            {
+              type: undefined,
+              value: undefined,
+            },
+          ],
+        },
+        event_id: '123',
+      }),
+    ).toEqual('123');
+  });
+
+  test('exception event with invalid type and value and no event_id', () => {
+    expect(
+      getEventDescription({
+        exception: {
+          values: [
+            {
+              type: undefined,
+              value: undefined,
+            },
+          ],
+        },
+      }),
+    ).toEqual('<unknown>');
+  });
+
+  test('malformed event with just event_id', () => {
+    expect(
+      getEventDescription({
+        event_id: '123',
+      }),
+    ).toEqual('123');
+  });
+
+  test('completely malformed event', () => {
+    expect(
+      getEventDescription({
+        oh: 'come, on',
+        really: '?',
+      } as any),
+    ).toEqual('<unknown>');
+  });
+});