From 590627443426da5aecec0a695a6638e62d3fe935 Mon Sep 17 00:00:00 2001 From: zcy Date: Wed, 20 Nov 2024 17:38:51 +0100 Subject: [PATCH 1/4] Observe only when document presents;Add e2e test for rum crash --- .../view/viewMetrics/trackScrollMetrics.ts | 4 ++- test/e2e/lib/framework/createTest.ts | 32 +++++++++++++++++++ test/e2e/lib/framework/index.ts | 2 +- test/e2e/scenario/rum/init.scenario.ts | 10 +++++- 4 files changed, 45 insertions(+), 3 deletions(-) diff --git a/packages/rum-core/src/domain/view/viewMetrics/trackScrollMetrics.ts b/packages/rum-core/src/domain/view/viewMetrics/trackScrollMetrics.ts index f9379b2a14..ea2c47fc21 100644 --- a/packages/rum-core/src/domain/view/viewMetrics/trackScrollMetrics.ts +++ b/packages/rum-core/src/domain/view/viewMetrics/trackScrollMetrics.ts @@ -102,7 +102,9 @@ export function createScrollValuesObservable( const observerTarget = document.scrollingElement || document.documentElement const resizeObserver = new ResizeObserver(monitor(throttledNotify.throttled)) - resizeObserver.observe(observerTarget) + if (observerTarget instanceof Element) { + resizeObserver.observe(observerTarget) + } const eventListener = addEventListener(configuration, window, DOM_EVENT.SCROLL, throttledNotify.throttled, { passive: true, }) diff --git a/test/e2e/lib/framework/createTest.ts b/test/e2e/lib/framework/createTest.ts index 91ec8eb2ea..fca574fb7c 100644 --- a/test/e2e/lib/framework/createTest.ts +++ b/test/e2e/lib/framework/createTest.ts @@ -1,3 +1,4 @@ +import * as fs from 'fs' import type { LogsInitConfiguration } from '@datadog/browser-logs' import type { RumInitConfiguration } from '@datadog/browser-rum-core' import { DefaultPrivacyLevel } from '@datadog/browser-rum' @@ -14,6 +15,7 @@ import type { SetupFactory, SetupOptions } from './pageSetups' import { DEFAULT_SETUPS, npmSetup } from './pageSetups' import { createIntakeServerApp } from './serverApps/intake' import { createMockServerApp } from './serverApps/mock' +import { RUM_BUNDLE } from './sdkBuilds' const DEFAULT_RUM_CONFIGURATION = { applicationId: APPLICATION_ID, @@ -228,3 +230,33 @@ async function tearDownTest({ intakeRegistry }: TestContext) { }) await deleteAllCookies() } + +export async function injectRumWithPuppeteer() { + const ddRUM = fs.readFileSync(RUM_BUNDLE, 'utf8') + const puppeteerBrowser = await browser.getPuppeteer() + let injected = true + + await browser.call(async () => { + const page = await puppeteerBrowser.newPage() + await page.evaluateOnNewDocument( + ` + if (location.href !== 'about:blank') { + ${ddRUM} + window.DD_RUM._setDebug(true) + window.DD_RUM.init({ + applicationId: ${APPLICATION_ID}, + clientToken: ${CLIENT_TOKEN}, + }) + window.DD_RUM.startView() + } + ` + ) + page.on('console', (msg) => { + if (msg.type() === 'error') { + injected = false + } + }) + await page.goto('https://webdriver.io') + }) + return injected +} diff --git a/test/e2e/lib/framework/index.ts b/test/e2e/lib/framework/index.ts index 27ce98ee34..6b539d11e6 100644 --- a/test/e2e/lib/framework/index.ts +++ b/test/e2e/lib/framework/index.ts @@ -1,4 +1,4 @@ -export { createTest } from './createTest' +export { createTest, injectRumWithPuppeteer } from './createTest' export { bundleSetup, html } from './pageSetups' export { IntakeRegistry } from './intakeRegistry' export { getTestServers, waitForServersIdle } from './httpServers' diff --git a/test/e2e/scenario/rum/init.scenario.ts b/test/e2e/scenario/rum/init.scenario.ts index 2b72007984..3efa1e76a7 100644 --- a/test/e2e/scenario/rum/init.scenario.ts +++ b/test/e2e/scenario/rum/init.scenario.ts @@ -1,8 +1,16 @@ import type { Context } from '@datadog/browser-core' import type { IntakeRegistry } from '../../lib/framework' -import { flushEvents, createTest } from '../../lib/framework' +import { flushEvents, createTest, injectRumWithPuppeteer } from '../../lib/framework' import { withBrowserLogs } from '../../lib/helpers/browser' +describe('Inject RUM with Puppeteer', () => { + // S8s tests inject RUM with puppeteer evaluateOnNewDocument + it('should not throw error', async () => { + const isInjected = await injectRumWithPuppeteer() + expect(isInjected).toBe(true) + }) +}) + describe('API calls and events around init', () => { createTest('should display a console log when calling init without configuration') .withRum() From 7e29f6e3e9760796aab47c593cbc31960555f12f Mon Sep 17 00:00:00 2001 From: zcy Date: Fri, 22 Nov 2024 11:01:55 +0100 Subject: [PATCH 2/4] Do not run puppeteer inject test in browserstack --- test/e2e/scenario/rum/init.scenario.ts | 12 ++---------- test/e2e/scenario/rum/s8sInject.scenario.ts | 8 ++++++++ test/e2e/wdio.bs.conf.ts | 2 +- 3 files changed, 11 insertions(+), 11 deletions(-) create mode 100644 test/e2e/scenario/rum/s8sInject.scenario.ts diff --git a/test/e2e/scenario/rum/init.scenario.ts b/test/e2e/scenario/rum/init.scenario.ts index 3efa1e76a7..85306e8e9f 100644 --- a/test/e2e/scenario/rum/init.scenario.ts +++ b/test/e2e/scenario/rum/init.scenario.ts @@ -1,16 +1,8 @@ -import type { Context } from '@datadog/browser-core' +import { type Context } from '@datadog/browser-core' import type { IntakeRegistry } from '../../lib/framework' -import { flushEvents, createTest, injectRumWithPuppeteer } from '../../lib/framework' +import { flushEvents, createTest } from '../../lib/framework' import { withBrowserLogs } from '../../lib/helpers/browser' -describe('Inject RUM with Puppeteer', () => { - // S8s tests inject RUM with puppeteer evaluateOnNewDocument - it('should not throw error', async () => { - const isInjected = await injectRumWithPuppeteer() - expect(isInjected).toBe(true) - }) -}) - describe('API calls and events around init', () => { createTest('should display a console log when calling init without configuration') .withRum() diff --git a/test/e2e/scenario/rum/s8sInject.scenario.ts b/test/e2e/scenario/rum/s8sInject.scenario.ts new file mode 100644 index 0000000000..72a3208cdf --- /dev/null +++ b/test/e2e/scenario/rum/s8sInject.scenario.ts @@ -0,0 +1,8 @@ +import { injectRumWithPuppeteer } from '../../lib/framework' +describe('Inject RUM with Puppeteer', () => { + // S8s tests inject RUM with puppeteer evaluateOnNewDocument + it('should not throw error in chrome', async () => { + const isInjected = await injectRumWithPuppeteer() + expect(isInjected).toBe(true) + }) +}) diff --git a/test/e2e/wdio.bs.conf.ts b/test/e2e/wdio.bs.conf.ts index 5b48fa81ac..3e369cd75f 100644 --- a/test/e2e/wdio.bs.conf.ts +++ b/test/e2e/wdio.bs.conf.ts @@ -7,7 +7,7 @@ export const config: Options.Testrunner = { ...baseConfig, specFileRetries: 1, - + exclude: [...baseConfig.exclude!, './scenario/rum/s8sInject.scenario.ts'], capabilities: browserConfigurations.map((configuration) => // See https://www.browserstack.com/automate/capabilities?tag=selenium-4 // Make sure to look at the "W3C Protocol" tab From 42a00850ce91b2f01eed8b1d44758a33e0875efc Mon Sep 17 00:00:00 2001 From: Cy Zheng Date: Mon, 25 Nov 2024 13:41:06 +0100 Subject: [PATCH 3/4] Fix import --- test/e2e/scenario/rum/init.scenario.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/e2e/scenario/rum/init.scenario.ts b/test/e2e/scenario/rum/init.scenario.ts index 85306e8e9f..2b72007984 100644 --- a/test/e2e/scenario/rum/init.scenario.ts +++ b/test/e2e/scenario/rum/init.scenario.ts @@ -1,4 +1,4 @@ -import { type Context } from '@datadog/browser-core' +import type { Context } from '@datadog/browser-core' import type { IntakeRegistry } from '../../lib/framework' import { flushEvents, createTest } from '../../lib/framework' import { withBrowserLogs } from '../../lib/helpers/browser' From 9f78ec5669f0f7f6e15f6a61c4eeb2ce61252d2c Mon Sep 17 00:00:00 2001 From: zcy Date: Mon, 25 Nov 2024 14:15:54 +0100 Subject: [PATCH 4/4] Move puppeteer inject helper out of createTest --- .../view/viewMetrics/trackScrollMetrics.ts | 2 +- test/e2e/lib/framework/createTest.ts | 32 ----------------- test/e2e/lib/framework/index.ts | 3 +- test/e2e/scenario/rum/s8sInject.scenario.ts | 35 ++++++++++++++++++- 4 files changed, 37 insertions(+), 35 deletions(-) diff --git a/packages/rum-core/src/domain/view/viewMetrics/trackScrollMetrics.ts b/packages/rum-core/src/domain/view/viewMetrics/trackScrollMetrics.ts index ea2c47fc21..11b70fde20 100644 --- a/packages/rum-core/src/domain/view/viewMetrics/trackScrollMetrics.ts +++ b/packages/rum-core/src/domain/view/viewMetrics/trackScrollMetrics.ts @@ -102,7 +102,7 @@ export function createScrollValuesObservable( const observerTarget = document.scrollingElement || document.documentElement const resizeObserver = new ResizeObserver(monitor(throttledNotify.throttled)) - if (observerTarget instanceof Element) { + if (observerTarget) { resizeObserver.observe(observerTarget) } const eventListener = addEventListener(configuration, window, DOM_EVENT.SCROLL, throttledNotify.throttled, { diff --git a/test/e2e/lib/framework/createTest.ts b/test/e2e/lib/framework/createTest.ts index fca574fb7c..91ec8eb2ea 100644 --- a/test/e2e/lib/framework/createTest.ts +++ b/test/e2e/lib/framework/createTest.ts @@ -1,4 +1,3 @@ -import * as fs from 'fs' import type { LogsInitConfiguration } from '@datadog/browser-logs' import type { RumInitConfiguration } from '@datadog/browser-rum-core' import { DefaultPrivacyLevel } from '@datadog/browser-rum' @@ -15,7 +14,6 @@ import type { SetupFactory, SetupOptions } from './pageSetups' import { DEFAULT_SETUPS, npmSetup } from './pageSetups' import { createIntakeServerApp } from './serverApps/intake' import { createMockServerApp } from './serverApps/mock' -import { RUM_BUNDLE } from './sdkBuilds' const DEFAULT_RUM_CONFIGURATION = { applicationId: APPLICATION_ID, @@ -230,33 +228,3 @@ async function tearDownTest({ intakeRegistry }: TestContext) { }) await deleteAllCookies() } - -export async function injectRumWithPuppeteer() { - const ddRUM = fs.readFileSync(RUM_BUNDLE, 'utf8') - const puppeteerBrowser = await browser.getPuppeteer() - let injected = true - - await browser.call(async () => { - const page = await puppeteerBrowser.newPage() - await page.evaluateOnNewDocument( - ` - if (location.href !== 'about:blank') { - ${ddRUM} - window.DD_RUM._setDebug(true) - window.DD_RUM.init({ - applicationId: ${APPLICATION_ID}, - clientToken: ${CLIENT_TOKEN}, - }) - window.DD_RUM.startView() - } - ` - ) - page.on('console', (msg) => { - if (msg.type() === 'error') { - injected = false - } - }) - await page.goto('https://webdriver.io') - }) - return injected -} diff --git a/test/e2e/lib/framework/index.ts b/test/e2e/lib/framework/index.ts index 6b539d11e6..35e8a53f9d 100644 --- a/test/e2e/lib/framework/index.ts +++ b/test/e2e/lib/framework/index.ts @@ -1,7 +1,8 @@ -export { createTest, injectRumWithPuppeteer } from './createTest' +export { createTest } from './createTest' export { bundleSetup, html } from './pageSetups' export { IntakeRegistry } from './intakeRegistry' export { getTestServers, waitForServersIdle } from './httpServers' export { flushEvents } from './flushEvents' export { waitForRequests } from './waitForRequests' export { LARGE_RESPONSE_MIN_BYTE_SIZE } from './serverApps/mock' +export { RUM_BUNDLE } from './sdkBuilds' diff --git a/test/e2e/scenario/rum/s8sInject.scenario.ts b/test/e2e/scenario/rum/s8sInject.scenario.ts index 72a3208cdf..b13c1d76fc 100644 --- a/test/e2e/scenario/rum/s8sInject.scenario.ts +++ b/test/e2e/scenario/rum/s8sInject.scenario.ts @@ -1,4 +1,7 @@ -import { injectRumWithPuppeteer } from '../../lib/framework' +import * as fs from 'fs' +import { RUM_BUNDLE } from '../../lib/framework' +import { APPLICATION_ID, CLIENT_TOKEN } from '../../lib/helpers/configuration' + describe('Inject RUM with Puppeteer', () => { // S8s tests inject RUM with puppeteer evaluateOnNewDocument it('should not throw error in chrome', async () => { @@ -6,3 +9,33 @@ describe('Inject RUM with Puppeteer', () => { expect(isInjected).toBe(true) }) }) + +async function injectRumWithPuppeteer() { + const ddRUM = fs.readFileSync(RUM_BUNDLE, 'utf8') + const puppeteerBrowser = await browser.getPuppeteer() + let injected = true + + await browser.call(async () => { + const page = await puppeteerBrowser.newPage() + await page.evaluateOnNewDocument( + ` + if (location.href !== 'about:blank') { + ${ddRUM} + window.DD_RUM._setDebug(true) + window.DD_RUM.init({ + applicationId: ${APPLICATION_ID}, + clientToken: ${CLIENT_TOKEN}, + }) + window.DD_RUM.startView() + } + ` + ) + page.on('console', (msg) => { + if (msg.type() === 'error') { + injected = false + } + }) + await page.goto('https://webdriver.io') + }) + return injected +}