getsentry · AbhiPrasad · Feb 2, 2022 · Jan 21, 2022 · Jan 25, 2022 · Feb 1, 2022
diff --git a/packages/integration-tests/suites/tracing/browsertracing/backgroundtab-custom/init.js b/packages/integration-tests/suites/tracing/browsertracing/backgroundtab-custom/init.js
@@ -0,0 +1,10 @@
+import * as Sentry from '@sentry/browser';
+import { Integrations } from '@sentry/tracing';
+
+window.Sentry = Sentry;
+
+Sentry.init({
+  dsn: 'https://[email protected]/1337',
+  integrations: [new Integrations.BrowserTracing({ idleTimeout: 9000 })],
+  tracesSampleRate: 1,
+});
diff --git a/packages/integration-tests/suites/tracing/browsertracing/backgroundtab-custom/subject.js b/packages/integration-tests/suites/tracing/browsertracing/backgroundtab-custom/subject.js
@@ -0,0 +1,11 @@
+document.getElementById('go-background').addEventListener('click', () => {
+  Object.defineProperty(document, 'hidden', { value: true, writable: true });
+  const ev = document.createEvent('Event');
+  ev.initEvent('visibilitychange');
+  document.dispatchEvent(ev);
+});
+
+document.getElementById('start-transaction').addEventListener('click', () => {
+  window.transaction = Sentry.startTransaction({ name: 'test-transaction' });
+  Sentry.getCurrentHub().configureScope(scope => scope.setSpan(window.transaction));
+});
diff --git a/packages/integration-tests/suites/tracing/browsertracing/backgroundtab-custom/template.hbs b/packages/integration-tests/suites/tracing/browsertracing/backgroundtab-custom/template.hbs
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script src="{{htmlWebpackPlugin.options.initialization}}"></script>
+  </head>
+  <body>
+    <button id="start-transaction">Start Transaction</button>
+    <button id="go-background">New Tab</button>
+    <script src="{{htmlWebpackPlugin.options.subject}}"></script>
+  </body>
+</html>
diff --git a/packages/integration-tests/suites/tracing/browsertracing/backgroundtab-custom/test.ts b/packages/integration-tests/suites/tracing/browsertracing/backgroundtab-custom/test.ts
@@ -0,0 +1,39 @@
+import { expect, JSHandle } from '@playwright/test';
+
+import { sentryTest } from '../../../../utils/fixtures';
+import { getSentryTransactionRequest } from '../../../../utils/helpers';
+
+async function getPropertyValue(handle: JSHandle, prop: string) {
+  return (await handle.getProperty(prop))?.jsonValue();
+}
+
+sentryTest('should finish a custom transaction when the page goes background', async ({ getLocalTestPath, page }) => {
+  const url = await getLocalTestPath({ testDir: __dirname });
+
+  const pageloadTransaction = await getSentryTransactionRequest(page, url);
+  expect(pageloadTransaction).toBeDefined();
+
+  await page.click('#start-transaction');
+  const transactionHandle = await page.evaluateHandle('window.transaction');
+
+  const id_before = await getPropertyValue(transactionHandle, 'span_id');
+  const name_before = await getPropertyValue(transactionHandle, 'name');
+  const status_before = await getPropertyValue(transactionHandle, 'status');
+  const tags_before = await getPropertyValue(transactionHandle, 'tags');
+
+  expect(name_before).toBe('test-transaction');
+  expect(status_before).toBeUndefined();
+  expect(tags_before).toStrictEqual({});
+
+  await page.click('#go-background');
+
+  const id_after = await getPropertyValue(transactionHandle, 'span_id');
+  const name_after = await getPropertyValue(transactionHandle, 'name');
+  const status_after = await getPropertyValue(transactionHandle, 'status');
+  const tags_after = await getPropertyValue(transactionHandle, 'tags');
+
+  expect(id_before).toBe(id_after);
+  expect(name_after).toBe(name_before);
+  expect(status_after).toBe('cancelled');
+  expect(tags_after).toStrictEqual({ finishReason: 'documentHidden', visibilitychange: 'document.hidden' });
+});
diff --git a/packages/integration-tests/suites/tracing/browsertracing/backgroundtab-pageload/subject.js b/packages/integration-tests/suites/tracing/browsertracing/backgroundtab-pageload/subject.js
@@ -0,0 +1,6 @@
+document.getElementById('go-background').addEventListener('click', () => {
+  Object.defineProperty(document, 'hidden', { value: true, writable: true });
+  const ev = document.createEvent('Event');
+  ev.initEvent('visibilitychange');
+  document.dispatchEvent(ev);
+});
diff --git a/packages/integration-tests/suites/tracing/browsertracing/backgroundtab-pageload/template.hbs b/packages/integration-tests/suites/tracing/browsertracing/backgroundtab-pageload/template.hbs
@@ -0,0 +1,10 @@
+<html>
+  <head>
+    <script src='{{htmlWebpackPlugin.options.initialization}}'></script>
+  </head>
+  <body>
+    ]
+    <button id='go-background'>New Tab</button>
+    <script src='{{htmlWebpackPlugin.options.subject}}'></script>
+  </body>
+</html>
diff --git a/packages/integration-tests/suites/tracing/browsertracing/backgroundtab-pageload/test.ts b/packages/integration-tests/suites/tracing/browsertracing/backgroundtab-pageload/test.ts
@@ -0,0 +1,21 @@
+import { expect } from '@playwright/test';
+
+import { sentryTest } from '../../../../utils/fixtures';
+import { getSentryTransactionRequest } from '../../../../utils/helpers';
+
+sentryTest('should finish pageload transaction when the page goes background', async ({ getLocalTestPath, page }) => {
+  const url = await getLocalTestPath({ testDir: __dirname });
+
+  await page.goto(url);
+
+  page.click('#go-background');
+
+  const pageloadTransaction = await getSentryTransactionRequest(page);
+
+  expect(pageloadTransaction.contexts?.trace.op).toBe('pageload');
+  expect(pageloadTransaction.contexts?.trace.status).toBe('cancelled');
+  expect(pageloadTransaction.contexts?.trace.tags).toMatchObject({
+    visibilitychange: 'document.hidden',
+    finishReason: 'documentHidden',
+  });
+});