smaller errors + backgroundtab

Author: AbhiPrasad

packages/apm/src/integrations/errors.ts

@@ -6,6 +6,8 @@ import { IdleTransaction } from '../idletransaction';
 import { Span as SpanClass } from '../span';
 import { SpanStatus } from '../spanstatus';
 
+import { registerBackgroundTabDetection } from './tracing/backgroundtab';
+import { registerErrorHandlers } from './tracing/errors';
 import {
   defaultRequestInstrumentionOptions,
   RequestInstrumentationClass,
@@ -20,12 +22,6 @@ import {
 } from './tracing/router';
 
 /**
- * TODO: _setupErrorHandling
- *  - This should be a integration that runs automatically
- * TODO: _setupBackgroundTabDetection
- *  - This something that works automatically too
- *  - This just cancels active pageload/navigation on scope
- *  - Provide option to to extend to all transactions??
  * TODO: Tracing._addPerformanceEntries
  *  - This is a beforeFinish() hook here
  */
@@ -43,6 +39,15 @@ export type BrowserTracingOptions = {
    */
   maxTransactionDuration: number;
 
+  /**
+   * Flag Transactions where tabs moved to background with "cancelled". Browser background tab timing is
+   * not suited towards doing precise measurements of operations. Background transaction can mess up your
+   * statistics in non deterministic ways that's why we by default recommend leaving this opition enabled.
+   *
+   * Default: true
+   */
+  markBackgroundTransactions: boolean;
+
   /**
    * This is only if you want to debug in prod.
    * writeAsBreadcrumbs: Instead of having console.log statements we log messages to breadcrumbs
@@ -120,6 +125,10 @@ export class BrowserTracing implements Integration {
 
     BrowserTracing._initRoutingInstrumentation(hub);
     BrowserTracing._initRequestInstrumentation();
+    registerErrorHandlers();
+    if (BrowserTracing.options.markBackgroundTransactions) {
+      registerBackgroundTabDetection();
+    }
 
     // This EventProcessor makes sure that the transaction is not longer than maxTransactionDuration
     addGlobalEventProcessor((event: Event) => {
@@ -139,7 +148,7 @@ export class BrowserTracing implements Integration {
         event.type === 'transaction' &&
         isOutdatedTransaction
       ) {
-        BrowserTracing._log(`[Tracing] Transaction: ${SpanStatus.Cancelled} since it maxed out maxTransactionDuration`);
+        BrowserTracing.log(`[Tracing] Transaction: ${SpanStatus.Cancelled} since it maxed out maxTransactionDuration`);
         if (event.contexts && event.contexts.trace) {
           event.contexts.trace = {
             ...event.contexts.trace,
@@ -205,7 +214,7 @@ export class BrowserTracing implements Integration {
     if (header) {
       const span = SpanClass.fromTraceparent(header);
       if (span) {
-        BrowserTracing._log(
+        BrowserTracing.log(
           `[Tracing] found 'sentry-meta' '<meta />' continuing trace with: trace_id: ${span.traceId} span_id: ${
             span.parentSpanId
           }`,
@@ -225,7 +234,7 @@ export class BrowserTracing implements Integration {
   /**
    * Uses logger.log to log things in the SDK or as breadcrumbs if defined in options
    */
-  private static _log(...args: any[]): void {
+  public static log(...args: any[]): void {
     if (BrowserTracing.options && BrowserTracing.options.debug && BrowserTracing.options.debug.writeAsBreadcrumbs) {
       const _getCurrentHub = BrowserTracing._getCurrentHub;
       if (_getCurrentHub) {

packages/tracing/src/integrations/browsertracing.ts

@@ -0,0 +1,25 @@
+import { getGlobalObject } from '@sentry/utils';
+
+import { SpanStatus } from '../../spanstatus';
+
+import { getActiveTransaction } from './utils';
+
+const global = getGlobalObject<Window>();
+
+/**
+ * Add a listener that cancels and finishes a transaction when the global
+ * document is hidden.
+ */
+export function registerBackgroundTabDetection(): void {
+  if (global && global.document) {
+    document.addEventListener('visibilitychange', () => {
+      // TODO: THis will cancel ALL Transactions now, is this desired behaviour?
+      const activeTransaction = getActiveTransaction();
+      if (document.hidden && activeTransaction) {
+        activeTransaction.setStatus(SpanStatus.Cancelled);
+        activeTransaction.setTag('visibilitychange', 'document.hidden');
+        activeTransaction.finish();
+      }
+    });
+  }
+}

packages/tracing/src/integrations/tracing/backgroundtab.ts

@@ -0,0 +1,29 @@
+import { addInstrumentationHandler } from '@sentry/utils';
+
+import { SpanStatus } from '../../spanstatus';
+
+import { getActiveTransaction } from './utils';
+
+/**
+ * Configures global error listeners
+ */
+export function registerErrorHandlers(): void {
+  addInstrumentationHandler({
+    callback: errorCallback,
+    type: 'error',
+  });
+  addInstrumentationHandler({
+    callback: errorCallback,
+    type: 'unhandledrejection',
+  });
+}
+
+/**
+ * If an error or unhandled promise occurs, we mark the active transaction as failed
+ */
+function errorCallback(): void {
+  const activeTransaction = getActiveTransaction();
+  if (activeTransaction) {
+    activeTransaction.setStatus(SpanStatus.InternalError);
+  }
+}

packages/tracing/src/integrations/tracing/errors.ts

@@ -1,9 +1,8 @@
-import { getCurrentHub } from '@sentry/hub';
 import { addInstrumentationHandler, isInstanceOf, isMatchingPattern } from '@sentry/utils';
 
-import { IdleTransaction } from '../../idletransaction';
 import { Span } from '../../span';
-import { Transaction } from '../../transaction';
+
+import { getActiveTransaction } from './utils';
 
 const defaultTracingOrigins = ['localhost', /^\//];
 
@@ -254,18 +253,3 @@ function xhrCallback(handlerData: XHRData, shouldCreateSpan: (url: string) => bo
     }
   }
 }
-
-/**
- * Get active transaction on scope if possible
- */
-function getActiveTransaction(): Transaction | IdleTransaction | undefined {
-  const hub = getCurrentHub();
-  if (hub) {
-    const scope = hub.getScope();
-    if (scope) {
-      return scope.getTransaction() as Transaction | IdleTransaction | undefined;
-    }
-  }
-
-  return undefined;
-}

packages/tracing/src/integrations/tracing/request.ts

@@ -1,15 +1,16 @@
 import { getCurrentHub } from '@sentry/hub';
 
 import { IdleTransaction } from '../../idletransaction';
+import { Transaction } from '../../transaction';
 
 /**
  *  Grabs active transaction off scope
  */
-export function getActiveTransaction(): IdleTransaction | undefined {
+export function getActiveTransaction(): Transaction | IdleTransaction | undefined {
   const hub = getCurrentHub();
   const scope = hub.getScope();
   if (scope) {
-    return scope.getTransaction() as IdleTransaction;
+    return scope.getTransaction() as Transaction | IdleTransaction | undefined;
   }
 
   return undefined;