it finally works :)

Author: AbhiPrasad

packages/tracing/src/idletransaction.ts

@@ -13,28 +13,39 @@ import { SpanRecorder, Transaction } from './transaction';
 export class IdleTransactionSpanRecorder extends SpanRecorder {
   private readonly _pushActivity?: (id: string) => void;
   private readonly _popActivity?: (id: string) => void;
-
-  public constructor(maxlen?: number, pushActivity?: (id: string) => void, popActivity?: (id: string) => void) {
+  public spanId: string = '';
+
+  public constructor(
+    maxlen?: number,
+    pushActivity?: (id: string) => void,
+    popActivity?: (id: string) => void,
+    spanId: string = '',
+  ) {
     super(maxlen);
     this._pushActivity = pushActivity;
     this._popActivity = popActivity;
+    this.spanId = spanId;
   }
 
   /**
    * @inheritDoc
    */
   public add(span: Span): void {
-    span.finish = (endTimestamp?: number) => {
-      span.endTimestamp = typeof endTimestamp === 'number' ? endTimestamp : timestampWithMs();
-      if (this._popActivity) {
-        this._popActivity(span.spanId);
-      }
-    };
+    if (span.spanId !== this.spanId) {
+      span.finish = (endTimestamp?: number) => {
+        span.endTimestamp = typeof endTimestamp === 'number' ? endTimestamp : timestampWithMs();
+        if (this._popActivity) {
+          this._popActivity(span.spanId);
+        }
+      };
+    }
 
     super.add(span);
-    if (span && !span.endTimestamp) {
-      if (this._pushActivity) {
-        this._pushActivity(span.spanId);
+    if (span.spanId !== this.spanId) {
+      if (span && !span.endTimestamp) {
+        if (this._pushActivity) {
+          this._pushActivity(span.spanId);
+        }
       }
     }
   }
@@ -109,7 +120,7 @@ export class IdleTransaction extends Transaction {
       );
       this.setStatus(SpanStatus.DeadlineExceeded);
       this.setTag('heartbeat', 'failed');
-      this._finishIdleTransaction(timestampWithMs());
+      this.finishIdleTransaction(timestampWithMs());
     } else {
       this._pingHeartbeat();
     }
@@ -119,6 +130,7 @@ export class IdleTransaction extends Transaction {
    * Pings the heartbeat
    */
   private _pingHeartbeat(): void {
+    logger.log(`ping Heartbeat -> current counter: ${this._heartbeatCounter}`);
     this._heartbeatTimer = (setTimeout(() => {
       this._beat();
     }, 5000) as any) as number;
@@ -142,8 +154,11 @@ export class IdleTransaction extends Transaction {
   /**
    * Finish the current active idle transaction
    */
-  private _finishIdleTransaction(endTimestamp: number): void {
-    if (this.spanRecorder && !this._finished) {
+  public finishIdleTransaction(endTimestamp: number): void {
+    this._finished = true;
+    this._resetActiveTransaction();
+
+    if (this.spanRecorder) {
       logger.log('[Tracing] finishing IdleTransaction', new Date(endTimestamp * 1000).toISOString());
 
       if (this._finishCallback) {
@@ -174,9 +189,7 @@ export class IdleTransaction extends Transaction {
       });
 
       logger.log('[Tracing] flushing IdleTransaction');
-      this.finish();
-      this._finished = true;
-      this._resetActiveTransaction();
+      this.finish(endTimestamp);
     } else {
       logger.log('[Tracing] No active IdleTransaction');
     }
@@ -188,7 +201,7 @@ export class IdleTransaction extends Transaction {
    */
   private _pushActivity(spanId: string): void {
     logger.log(`[Tracing] pushActivity: ${spanId}`);
-    logger.log('[Tracing] activies count', Object.keys(this.activities).length);
+    logger.log('[Tracing] activities count', Object.keys(this.activities).length);
     this.activities[spanId] = true;
   }
 
@@ -201,6 +214,7 @@ export class IdleTransaction extends Transaction {
       logger.log(`[Tracing] popActivity ${spanId}`);
       // tslint:disable-next-line: no-dynamic-delete
       delete this.activities[spanId];
+      logger.log('[Tracing] activities count', Object.keys(this.activities).length);
     }
 
     const count = Object.keys(this.activities).length;
@@ -210,7 +224,9 @@ export class IdleTransaction extends Transaction {
       // Remember timestampWithMs is in seconds, timeout is in ms
       const end = timestampWithMs() + timeout / 1000;
       setTimeout(() => {
-        this._finishIdleTransaction(end);
+        if (!this._finished) {
+          this.finishIdleTransaction(end);
+        }
       }, timeout);
     }
   }
@@ -239,7 +255,7 @@ export class IdleTransaction extends Transaction {
         }
       };
       // tslint:disable-next-line: no-unbound-method
-      this.spanRecorder = new IdleTransactionSpanRecorder(maxlen, pushActivity, popActivity);
+      this.spanRecorder = new IdleTransactionSpanRecorder(maxlen, pushActivity, popActivity, this.spanId);
     }
     this.spanRecorder.add(this);
   }

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

@@ -1,8 +1,9 @@
-import { getGlobalObject } from '@sentry/utils';
+import { getGlobalObject, logger, timestampWithMs, isInstanceOf } from '@sentry/utils';
 
 import { SpanStatus } from '../../spanstatus';
 
 import { getActiveTransaction } from './utils';
+import { IdleTransaction } from '../../idletransaction';
 
 const global = getGlobalObject<Window>();
 
@@ -13,12 +14,16 @@ const global = getGlobalObject<Window>();
 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();
+      const activeTransaction = getActiveTransaction() as IdleTransaction;
       if (document.hidden && activeTransaction) {
+        logger.log(`[Tracing] Transaction: ${SpanStatus.Cancelled} -> since tab moved to the background`);
         activeTransaction.setStatus(SpanStatus.Cancelled);
         activeTransaction.setTag('visibilitychange', 'document.hidden');
-        activeTransaction.finish();
+        if (isInstanceOf(activeTransaction, IdleTransaction)) {
+          activeTransaction.finishIdleTransaction(timestampWithMs());
+        } else {
+          activeTransaction.finish();
+        }
       }
     });
   }