ref: Make Event instances serializeable

Author: kamilogorek

packages/browser/src/backend.ts

@@ -58,7 +58,7 @@ export class BrowserBackend extends BaseBackend<BrowserOptions> {
    */
   public eventFromException(exception: any, hint?: EventHint): SyncPromise<Event> {
     const syntheticException = (hint && hint.syntheticException) || undefined;
-    const event = eventFromUnknownInput(exception, syntheticException);
+    const event = eventFromUnknownInput(exception, syntheticException, 'error');
     addExceptionMechanism(event, {
       handled: true,
       type: 'generic',

packages/browser/src/eventbuilder.ts

@@ -6,14 +6,19 @@ import {
   isDOMException,
   isError,
   isErrorEvent,
+  isEvent,
   isPlainObject,
 } from '@sentry/utils';
 
 import { eventFromPlainObject, eventFromStacktrace, prepareFramesForEvent } from './parsers';
 import { computeStackTrace } from './tracekit';
 
 /** JSDoc */
-export function eventFromUnknownInput(exception: unknown, syntheticException?: Error): Event {
+export function eventFromUnknownInput(
+  exception: unknown,
+  syntheticException?: Error,
+  type?: 'error' | 'promise',
+): Event {
   let event: Event;
 
   if (isErrorEvent(exception as ErrorEvent) && (exception as ErrorEvent).error) {
@@ -41,13 +46,17 @@ export function eventFromUnknownInput(exception: unknown, syntheticException?: E
     event = eventFromStacktrace(computeStackTrace(exception as Error));
     return event;
   }
-  if (isPlainObject(exception as {})) {
-    // If it is plain Object, serialize it manually and extract options
+  if (isPlainObject(exception) || isEvent(exception)) {
+    // If it is plain Object or Event, serialize it manually and extract options
     // This will allow us to group events based on top-level keys
     // which is much better than creating new group when any key/value change
     const objectException = exception as {};
-    event = eventFromPlainObject(objectException, syntheticException);
-    addExceptionTypeValue(event, 'Custom Object', undefined);
+    event = eventFromPlainObject(objectException, syntheticException, type);
+    addExceptionTypeValue(
+      event,
+      isEvent(exception) ? exception.constructor.name : 'Custom Object',
+      type === 'promise' ? 'UnhandledRejection' : 'Error',
+    );
     addExceptionMechanism(event, {
       synthetic: true,
     });

packages/browser/src/helpers.ts

@@ -1,6 +1,6 @@
 import { captureException, getCurrentHub, withScope } from '@sentry/core';
 import { Event as SentryEvent, Mechanism, WrappedFunction } from '@sentry/types';
-import { addExceptionMechanism, addExceptionTypeValue, isString, normalize } from '@sentry/utils';
+import { addExceptionMechanism, addExceptionTypeValue, htmlTreeAsString, normalize } from '@sentry/utils';
 
 const debounceDuration: number = 1000;
 let keypressTimeout: number | undefined;
@@ -188,17 +188,7 @@ export function breadcrumbEventHandler(eventName: string, debounce: boolean = fa
     lastCapturedEvent = event;
 
     const captureBreadcrumb = () => {
-      // try/catch both:
-      // - accessing event.target (see getsentry/raven-js#838, #768)
-      // - `htmlTreeAsString` because it's complex, and just accessing the DOM incorrectly
-      //   can throw an exception in some circumstances.
-      let target;
-      try {
-        target = event.target ? _htmlTreeAsString(event.target as Node) : _htmlTreeAsString((event as unknown) as Node);
-      } catch (e) {
-        target = '<unknown>';
-      }
-
+      const target = htmlTreeAsString(event.target as Node);
       if (target.length === 0) {
         return;
       }
@@ -268,79 +258,3 @@ export function keypressEventHandler(): (event: Event) => void {
     }, debounceDuration) as any) as number;
   };
 }
-
-/**
- * Given a child DOM element, returns a query-selector statement describing that
- * and its ancestors
- * e.g. [HTMLElement] => body > div > input#foo.btn[name=baz]
- * @returns generated DOM path
- */
-function _htmlTreeAsString(elem: Node): string {
-  let currentElem: Node | null = elem;
-  const MAX_TRAVERSE_HEIGHT = 5;
-  const MAX_OUTPUT_LEN = 80;
-  const out = [];
-  let height = 0;
-  let len = 0;
-  const separator = ' > ';
-  const sepLength = separator.length;
-  let nextStr;
-
-  while (currentElem && height++ < MAX_TRAVERSE_HEIGHT) {
-    nextStr = _htmlElementAsString(currentElem as HTMLElement);
-    // bail out if
-    // - nextStr is the 'html' element
-    // - the length of the string that would be created exceeds MAX_OUTPUT_LEN
-    //   (ignore this limit if we are on the first iteration)
-    if (nextStr === 'html' || (height > 1 && len + out.length * sepLength + nextStr.length >= MAX_OUTPUT_LEN)) {
-      break;
-    }
-
-    out.push(nextStr);
-
-    len += nextStr.length;
-    currentElem = currentElem.parentNode;
-  }
-
-  return out.reverse().join(separator);
-}
-
-/**
- * Returns a simple, query-selector representation of a DOM element
- * e.g. [HTMLElement] => input#foo.btn[name=baz]
- * @returns generated DOM path
- */
-function _htmlElementAsString(elem: HTMLElement): string {
-  const out = [];
-  let className;
-  let classes;
-  let key;
-  let attr;
-  let i;
-
-  if (!elem || !elem.tagName) {
-    return '';
-  }
-
-  out.push(elem.tagName.toLowerCase());
-  if (elem.id) {
-    out.push(`#${elem.id}`);
-  }
-
-  className = elem.className;
-  if (className && isString(className)) {
-    classes = className.split(/\s+/);
-    for (i = 0; i < classes.length; i++) {
-      out.push(`.${classes[i]}`);
-    }
-  }
-  const attrWhitelist = ['type', 'name', 'title', 'alt'];
-  for (i = 0; i < attrWhitelist.length; i++) {
-    key = attrWhitelist[i];
-    attr = elem.getAttribute(key);
-    if (attr) {
-      out.push(`[${key}="${attr}"]`);
-    }
-  }
-  return out.join('');
-}

packages/browser/src/integrations/globalhandlers.ts

@@ -3,20 +3,17 @@ import { Event, Integration, Severity } from '@sentry/types';
 import {
   addExceptionMechanism,
   addExceptionTypeValue,
-  extractExceptionKeysForMessage,
   getGlobalObject,
   getLocationHref,
   isErrorEvent,
   isPrimitive,
   isString,
   logger,
-  normalizeToSize,
   truncate,
 } from '@sentry/utils';
 
 import { eventFromUnknownInput } from '../eventbuilder';
 import { shouldIgnoreOnError } from '../helpers';
-import { computeStackTrace } from '../tracekit';
 
 /** JSDoc */
 interface GlobalHandlersIntegrations {
@@ -101,7 +98,7 @@ export class GlobalHandlers implements Integration {
 
       const event = isPrimitive(error)
         ? self._eventFromIncompleteOnError(msg, url, line, column)
-        : self._enhanceEventWithInitialFrame(eventFromUnknownInput(error), url, line, column);
+        : self._enhanceEventWithInitialFrame(eventFromUnknownInput(error, undefined, 'error'), url, line, column);
 
       const client = getCurrentHub().getClient();
       const maxValueLength = (client && client.getOptions().maxValueLength) || 250;
@@ -154,8 +151,9 @@ export class GlobalHandlers implements Integration {
         return false;
       }
 
-      const stack = computeStackTrace(error);
-      const event = stack.failed ? self._eventFromIncompleteRejection(error) : eventFromUnknownInput(error);
+      const event = isPrimitive(error)
+        ? self._eventFromIncompleteRejection(error)
+        : eventFromUnknownInput(error, undefined, 'promise');
 
       const client = getCurrentHub().getClient();
       const maxValueLength = (client && client.getOptions().maxValueLength) || 250;
@@ -213,6 +211,16 @@ export class GlobalHandlers implements Integration {
     return this._enhanceEventWithInitialFrame(event, url, line, column);
   }
 
+  /**
+   * This function creates an Event from an TraceKitStackTrace that has part of it missing.
+   */
+  private _eventFromIncompleteRejection(error: any): Event {
+    return {
+      level: Severity.Error,
+      message: `Non-Error promise rejection captured with value: ${error}`,
+    };
+  }
+
   /** JSDoc */
   private _enhanceEventWithInitialFrame(event: Event, url: any, line: any, column: any): Event {
     event.exception = event.exception || {};
@@ -233,38 +241,4 @@ export class GlobalHandlers implements Integration {
 
     return event;
   }
-
-  /**
-   * This function creates an Event from an TraceKitStackTrace that has part of it missing.
-   */
-  private _eventFromIncompleteRejection(error: any): Event {
-    const event: Event = {
-      level: Severity.Error,
-    };
-
-    if (isPrimitive(error)) {
-      event.exception = {
-        values: [
-          {
-            type: 'UnhandledRejection',
-            value: `Non-Error promise rejection captured with value: ${error}`,
-          },
-        ],
-      };
-    } else {
-      event.exception = {
-        values: [
-          {
-            type: 'UnhandledRejection',
-            value: `Non-Error promise rejection captured with keys: ${extractExceptionKeysForMessage(error)}`,
-          },
-        ],
-      };
-      event.extra = {
-        __serialized__: normalizeToSize(error),
-      };
-    }
-
-    return event;
-  }
 }

packages/browser/src/parsers.ts

@@ -33,12 +33,14 @@ export function exceptionFromStacktrace(stacktrace: TraceKitStackTrace): Excepti
 /**
  * @hidden
  */
-export function eventFromPlainObject(exception: {}, syntheticException?: Error): Event {
+export function eventFromPlainObject(exception: {}, syntheticException?: Error, type?: 'error' | 'promise'): Event {
   const event: Event = {
     extra: {
       __serialized__: normalizeToSize(exception),
     },
-    message: `Non-Error exception captured with keys: ${extractExceptionKeysForMessage(exception)}`,
+    message: `Non-Error ${
+      type === 'promise' ? 'promise rejection' : 'exception'
+    } captured with keys: ${extractExceptionKeysForMessage(exception)}`,
   };
 
   if (syntheticException) {

packages/utils/src/is.ts

@@ -84,6 +84,30 @@ export function isPlainObject(wat: any): boolean {
   return Object.prototype.toString.call(wat) === '[object Object]';
 }
 
+/**
+ * Checks whether given value's type is an Event instance
+ * {@link isEvent}.
+ *
+ * @param wat A value to be checked.
+ * @returns A boolean representing the result.
+ */
+export function isEvent(wat: any): wat is Event {
+  // tslint:disable-next-line:strict-type-predicates
+  return typeof Event !== 'undefined' && wat instanceof Event;
+}
+
+/**
+ * Checks whether given value's type is an Element instance
+ * {@link isElement}.
+ *
+ * @param wat A value to be checked.
+ * @returns A boolean representing the result.
+ */
+export function isElement(wat: any): wat is Element {
+  // tslint:disable-next-line:strict-type-predicates
+  return typeof Element !== 'undefined' && wat instanceof Element;
+}
+
 /**
  * Checks whether given value's type is an regexp
  * {@link isRegExp}.

packages/utils/src/misc.ts

@@ -1,4 +1,5 @@
 import { Event, Integration, WrappedFunction } from '@sentry/types';
+import { isString } from './is';
 
 /** Internal */
 interface SentryGlobal {
@@ -247,3 +248,87 @@ export function getLocationHref(): string {
     return '';
   }
 }
+
+/**
+ * Given a child DOM element, returns a query-selector statement describing that
+ * and its ancestors
+ * e.g. [HTMLElement] => body > div > input#foo.btn[name=baz]
+ * @returns generated DOM path
+ */
+export function htmlTreeAsString(elem: Node): string {
+  // try/catch both:
+  // - accessing event.target (see getsentry/raven-js#838, #768)
+  // - `htmlTreeAsString` because it's complex, and just accessing the DOM incorrectly
+  //   can throw an exception in some circumstances.
+  try {
+    let currentElem: Node | null = elem;
+    const MAX_TRAVERSE_HEIGHT = 5;
+    const MAX_OUTPUT_LEN = 80;
+    const out = [];
+    let height = 0;
+    let len = 0;
+    const separator = ' > ';
+    const sepLength = separator.length;
+    let nextStr;
+
+    while (currentElem && height++ < MAX_TRAVERSE_HEIGHT) {
+      nextStr = _htmlElementAsString(currentElem as HTMLElement);
+      // bail out if
+      // - nextStr is the 'html' element
+      // - the length of the string that would be created exceeds MAX_OUTPUT_LEN
+      //   (ignore this limit if we are on the first iteration)
+      if (nextStr === 'html' || (height > 1 && len + out.length * sepLength + nextStr.length >= MAX_OUTPUT_LEN)) {
+        break;
+      }
+
+      out.push(nextStr);
+
+      len += nextStr.length;
+      currentElem = currentElem.parentNode;
+    }
+
+    return out.reverse().join(separator);
+  } catch (_oO) {
+    return '<unknown>';
+  }
+}
+
+/**
+ * Returns a simple, query-selector representation of a DOM element
+ * e.g. [HTMLElement] => input#foo.btn[name=baz]
+ * @returns generated DOM path
+ */
+function _htmlElementAsString(elem: HTMLElement): string {
+  const out = [];
+  let className;
+  let classes;
+  let key;
+  let attr;
+  let i;
+
+  if (!elem || !elem.tagName) {
+    return '';
+  }
+
+  out.push(elem.tagName.toLowerCase());
+  if (elem.id) {
+    out.push(`#${elem.id}`);
+  }
+
+  className = elem.className;
+  if (className && isString(className)) {
+    classes = className.split(/\s+/);
+    for (i = 0; i < classes.length; i++) {
+      out.push(`.${classes[i]}`);
+    }
+  }
+  const attrWhitelist = ['type', 'name', 'title', 'alt'];
+  for (i = 0; i < attrWhitelist.length; i++) {
+    key = attrWhitelist[i];
+    attr = elem.getAttribute(key);
+    if (attr) {
+      out.push(`[${key}="${attr}"]`);
+    }
+  }
+  return out.join('');
+}