fix sr api inconsistencies

metal-messiah · metal-messiah · commit 8e5921e08309 · 2025-10-06T09:13:45.000-06:00
diff --git a/src/features/session_replay/aggregate/index.js b/src/features/session_replay/aggregate/index.js
@@ -136,7 +136,7 @@ export class Aggregate extends AggregateBase {
       if (!this.agentRef.runtime.isRecording) this.recorder.startRecording(TRIGGERS.SWITCH_TO_FULL, this.mode) // off --> full
       this.syncWithSessionManager({ sessionReplayMode: this.mode })
     } else {
-      this.initializeRecording(MODE.FULL, true)
+      this.initializeRecording(MODE.FULL, true, TRIGGERS.SWITCH_TO_FULL)
     }
   }
 
diff --git a/src/features/session_replay/shared/recorder.js b/src/features/session_replay/shared/recorder.js
@@ -57,7 +57,11 @@ export class Recorder {
       this.stopRecording()
     }, this.srFeatureName, this.ee)
 
-    registerHandler(RRWEB_DATA_CHANNEL, (event, isCheckout) => { this.audit(event, isCheckout) }, this.srFeatureName, this.ee)
+    /** If Agg is already drained before importing the recorder (likely deferred API call pattern),
+     * registerHandler wont do anything. Just set up the on listener directly */
+    const processReplayNode = (event, isCheckout) => { this.audit(event, isCheckout) }
+    if (this.srInstrument.featAggregate?.drained) this.ee.on(RRWEB_DATA_CHANNEL, processReplayNode)
+    else registerHandler(RRWEB_DATA_CHANNEL, processReplayNode, this.srFeatureName, this.ee)
   }
 
   get trigger () {
diff --git a/tests/assets/rrweb-api-record-no-call.html b/tests/assets/rrweb-api-record-no-call.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<!--
+  Copyright 2020 New Relic Corporation.
+  PDX-License-Identifier: Apache-2.0
+-->
+<html>
+<head>
+  <title>RUM Unit Test</title>
+  <style>
+    .left{
+      position: absolute; left: 50px; top: 200px;
+    }
+    .right {
+      position: absolute; right: 50px; top: 200px;
+    }
+  </style>
+  <link rel="stylesheet" type="text/css" href="style.css">
+  {init}
+  {config}
+  <script>
+    localStorage.clear()
+    NREUM.init.privacy.cookies_enabled = true
+    NREUM.init.session_replay.enabled = true
+    window.addEventListener('load', () => {console.log("loaded")})
+  </script>
+  {loader}
+</head>
+<body>
+  this is a page that provides several types of elements with selectors that session_replay can interact with based on how it is configured
+  <hr />
+  <hr />
+  <textarea id="plain"></textarea>
+  <textarea id="ignore" class="nr-ignore"></textarea>
+  <textarea id="block" class="nr-block"></textarea>
+  <textarea id="mask" class="nr-mask"></textarea>
+  <textarea id="nr-block" data-nr-block></textarea>
+  <textarea id="other-block" data-other-block></textarea>
+  <input type="password" id="pass-input">
+  <input type="text" id="text-input">
+  <hr />
+  <button onclick="moveImage()">Click</button>
+  <img src="https://upload.wikimedia.org/wikipedia/commons/d/d7/House_of_Commons_Chamber_1.png" />
+  <a href="./rrweb-instrumented.html" target="_blank">New Tab</a>
+  <script>
+    function moveImage(){
+      document.querySelector("img").classList.toggle("left")
+      document.querySelector("img").classList.toggle("right")
+    }
+  </script>
+</body>
+</html>
diff --git a/tests/specs/session-replay/sr-api.e2e.js b/tests/specs/session-replay/sr-api.e2e.js
@@ -1,26 +1,66 @@
+import { testBlobReplayRequest } from '../../../tools/testing-server/utils/expect-tests'
 import { srConfig, getSR } from '../util/helpers'
 
 describe('Replay API', () => {
+  let sessionReplaysCapture
+  beforeEach(async () => {
+    sessionReplaysCapture = await browser.testHandle.createNetworkCaptures('bamServer', { test: testBlobReplayRequest })
+  })
   afterEach(async () => {
     await browser.destroyAgentSession()
   })
 
-  it('recordReplay called before page load does not start a replay (no entitlements yet)', async () => {
+  it('recordReplay called before page load starts a replay', async () => {
+    await browser.enableSessionReplay(0, 0)
+    const [sessionReplayHarvests] = await Promise.all([
+      sessionReplaysCapture.waitForResult({ totalCount: 1 }),
+      browser.url(await browser.testHandle.assetURL('rrweb-api-record-before-load.html', srConfig()))
+        .then(() => browser.waitForFeatureAggregate('session_replay'))
+    ])
+
+    await browser.pause(1000)
+    await expect(getSR()).resolves.toMatchObject({
+      initialized: true,
+      mode: 1
+    })
+    expect(sessionReplayHarvests.length).toBeGreaterThanOrEqual(1)
+  })
+
+  it('recordReplay called after page load starts a replay', async () => {
     await browser.enableSessionReplay(0, 0)
-    await browser.url(await browser.testHandle.assetURL('rrweb-api-record-before-load.html', srConfig()))
+
+    browser.url(await browser.testHandle.assetURL('rrweb-api-record-no-call.html', srConfig()))
       .then(() => browser.waitForFeatureAggregate('session_replay'))
 
+    await browser.pause(5000)
+
+    await expect(getSR()).resolves.toMatchObject({
+      initialized: true,
+      mode: 0
+    })
+
+    const [sessionReplayHarvests] = await Promise.all([
+      sessionReplaysCapture.waitForResult({ totalCount: 1 }),
+      browser.execute(function () {
+        newrelic.recordReplay()
+      })
+    ])
+
     await browser.pause(1000)
     await expect(getSR()).resolves.toMatchObject({
       initialized: true,
       mode: 1
     })
+    expect(sessionReplayHarvests.length).toBeGreaterThanOrEqual(1)
   })
 
   it('pauseReplay called before page load stops the replay', async () => {
     await browser.enableSessionReplay(100, 0)
-    await browser.url(await browser.testHandle.assetURL('rrweb-api-pause-before-load.html', srConfig()))
-      .then(() => browser.waitForFeatureAggregate('session_replay'))
+    const [sessionReplayHarvests] = await Promise.all([
+      sessionReplaysCapture.waitForResult({ timeout: 10000 }),
+      browser.url(await browser.testHandle.assetURL('rrweb-api-pause-before-load.html', srConfig()))
+        .then(() => browser.waitForFeatureAggregate('session_replay'))
+    ])
 
     await browser.pause(1000) // give time for the features to drain fully
     await expect(getSR()).resolves.toMatchObject({
@@ -29,11 +69,12 @@ describe('Replay API', () => {
       events: expect.any(Array),
       mode: 0
     })
+    expect(sessionReplayHarvests).toHaveLength(0)
   })
 
   it('Paused replays can be restarted on next page load of same session', async () => {
     const url = await browser.testHandle.assetURL('rrweb-instrumented.html', srConfig())
-    await browser.url(url).then(() => browser.waitForSessionReplayRecording())
+    await browser.url(url).then(() => browser.waitForAgentLoad())
     let replayState = await getSR()
     expect(replayState.mode).toEqual(1)
 
@@ -52,5 +93,7 @@ describe('Replay API', () => {
     }).then(() => browser.pause(500))
     replayState = await getSR() // record should be able to restart replay on this same session on a hard page load
     expect(replayState.mode).toEqual(1)
+    const sessionReplayHarvests = await sessionReplaysCapture.waitForResult({ totalCount: 1 })
+    expect(sessionReplayHarvests.length).toBeGreaterThanOrEqual(1)
   })
 })

Original file line number	Diff line number	Diff line change
`@@ -136,7 +136,7 @@ export class Aggregate extends AggregateBase {`
`136`	`136`	`if (!this.agentRef.runtime.isRecording) this.recorder.startRecording(TRIGGERS.SWITCH_TO_FULL, this.mode) // off --> full`
`137`	`137`	`this.syncWithSessionManager({ sessionReplayMode: this.mode })`
`138`	`138`	`} else {`
`139`		`- this.initializeRecording(MODE.FULL, true)`
	`139`	`+ this.initializeRecording(MODE.FULL, true, TRIGGERS.SWITCH_TO_FULL)`
`140`	`140`	`}`
`141`	`141`	`}`
`142`	`142`