feat(browser): Action markers in timeline of session replay

package.json

@@ -10,6 +10,7 @@
   },
   "scripts": {
     "preinstall": "node install-k6.js",
+    "postinstall": "patch-package",
     "start": "electron-forge start -- --remote-debugging-port=9223",
     "start:extension": "STANDALONE_EXTENSION=true vite --config vite.extension.config.mts",
     "watch:extension": "vite --config vite.extension.config.mts",
@@ -68,6 +69,7 @@
     "husky": "^9.0.11",
     "jsdom": "^25.0.0",
     "lint-staged": "^15.2.5",
+    "patch-package": "^8.0.1",
     "ts-node": "^10.9.2",
     "tsconfig-paths": "^4.2.0",
     "vite": "^5.4.21",

patches/rrweb+2.0.0-alpha.18.patch

@@ -0,0 +1,71 @@
+diff --git a/node_modules/rrweb/dist/rrweb.cjs b/node_modules/rrweb/dist/rrweb.cjs
+index d455aa0..86e7de1 100644
+--- a/node_modules/rrweb/dist/rrweb.cjs
++++ b/node_modules/rrweb/dist/rrweb.cjs
+@@ -14576,6 +14576,10 @@ function createPlayerService(context, { getCastFn, applyEventsSynchronously, emi
+         }, 
+         live: {
+           on: {
++            STOP_LIVE: {
++              target: "paused",
++              actions: ["pause"]
++            },
+             ADD_EVENT: {
+               target: "live",
+               actions: ["addEvent"]
+@@ -15702,6 +15706,9 @@ class Replayer {
+   startLive(baselineTime) {
+     this.service.send({ type: "TO_LIVE", payload: { baselineTime } });
+   }
++  stopLive() {
++    this.service.send({ type: "STOP_LIVE" });
++  }
+   addEvent(rawEvent) {
+     const event = this.config.unpackFn ? this.config.unpackFn(rawEvent) : rawEvent;
+     if (indicatesTouchDevice(event)) {
+diff --git a/node_modules/rrweb/dist/rrweb.d.ts b/node_modules/rrweb/dist/rrweb.d.ts
+index 95305d6..66540cb 100644
+--- a/node_modules/rrweb/dist/rrweb.d.ts
++++ b/node_modules/rrweb/dist/rrweb.d.ts
+@@ -182,6 +182,8 @@ declare type PlayerEvent = {
+     };
+ } | {
+     type: 'PAUSE';
++} | {
++    type: 'STOP_LIVE';
+ } | {
+     type: 'TO_LIVE';
+     payload: {
+@@ -299,6 +301,7 @@ export declare class Replayer {
+     resume(timeOffset?: number): void;
+     destroy(): void;
+     startLive(baselineTime?: number): void;
++    stopLive(): void;
+     addEvent(rawEvent: eventWithTime | string): void;
+     enableInteract(): void;
+     disableInteract(): void;
+diff --git a/node_modules/rrweb/dist/rrweb.js b/node_modules/rrweb/dist/rrweb.js
+index 5d38597..13a9d10 100644
+--- a/node_modules/rrweb/dist/rrweb.js
++++ b/node_modules/rrweb/dist/rrweb.js
+@@ -14574,6 +14574,10 @@ function createPlayerService(context, { getCastFn, applyEventsSynchronously, emi
+         },
+         live: {
+           on: {
++            STOP_LIVE: {
++              target: 'paused',
++              actions: ["pause"]
++            }, 
+             ADD_EVENT: {
+               target: "live",
+               actions: ["addEvent"]
+@@ -15700,6 +15704,9 @@ class Replayer {
+   startLive(baselineTime) {
+     this.service.send({ type: "TO_LIVE", payload: { baselineTime } });
+   }
++  stopLive() {
++    this.service.send({ type: "STOP_LIVE" });
++  }
+   addEvent(rawEvent) {
+     const event = this.config.unpackFn ? this.config.unpackFn(rawEvent) : rawEvent;
+     if (indicatesTouchDevice(event)) {

src/handlers/script/index.ts

@@ -83,7 +83,7 @@ export function initialize() {
     })
   })
 
-  ipcMain.on(ScriptHandler.Stop, (event) => {
+  ipcMain.on(ScriptHandler.Stop, () => {
     console.info(`${ScriptHandler.Stop} event received`)
     if (currentTestRun) {
       currentTestRun.stop().catch((error) => {
@@ -92,9 +92,6 @@ export function initialize() {
 
       currentTestRun = null
     }
-
-    const browserWindow = browserWindowFromEvent(event)
-    browserWindow.webContents.send(ScriptHandler.Stopped)
   })
 
   ipcMain.handle(

src/hooks/useBrowserSession.ts

@@ -1,19 +1,131 @@
 import { useCallback, useEffect, useState } from 'react'
 
-import { BrowserReplayEvent } from '@/main/runner/schema'
+import { createReplayEvent } from '@/main/runner/rrweb'
+import { BrowserActionEvent, BrowserReplayEvent } from '@/main/runner/schema'
 
-export function useBrowserReplay() {
-  const [browserReplay, setBrowserReplay] = useState<BrowserReplayEvent[]>([])
+interface BrowserSession {
+  actions: BrowserActionEvent[]
+  replay: BrowserReplayEvent[]
+}
+
+export function useBrowserSession() {
+  const [browserSession, setBrowserSession] = useState<BrowserSession>({
+    actions: [],
+    replay: [],
+  })
+
+  useEffect(() => {
+    return window.studio.script.onBrowserAction((event) => {
+      if (event.type === 'begin') {
+        setBrowserSession((session) => ({
+          ...session,
+          actions: [...session.actions, event],
+          replay: [
+            ...session.replay,
+            createReplayEvent({
+              tag: 'action-begin',
+              payload: {
+                actionId: event.eventId,
+              },
+              timestamp: event.timestamp.started,
+            }),
+          ],
+        }))
+
+        return
+      }
+
+      setBrowserSession((session) => ({
+        ...session,
+        actions: session.actions.map((action) =>
+          action.eventId === event.eventId ? event : action
+        ),
+        replay: [
+          ...session.replay,
+          createReplayEvent({
+            tag: 'action-end',
+            payload: {
+              actionId: event.eventId,
+            },
+            timestamp: event.timestamp.ended,
+          }),
+        ],
+      }))
+    })
+  }, [])
 
   useEffect(() => {
     return window.studio.script.onBrowserReplay((events) => {
-      setBrowserReplay((existing) => [...existing, ...events])
+      setBrowserSession((session) => ({
+        ...session,
+        replay: [...session.replay, ...events],
+      }))
     })
   }, [])
 
-  const resetBrowserReplay = useCallback(() => {
-    setBrowserReplay([])
+  useEffect(() => {
+    return window.studio.script.onScriptStopped(() => {
+      setBrowserSession((session) => {
+        const now = Date.now()
+
+        // Abort all actions that were running when the script stopped.
+        const actions: BrowserActionEvent[] = session.actions.map((action) => {
+          if (action.type !== 'begin') {
+            return action
+          }
+
+          return {
+            ...action,
+            type: 'end',
+            timestamp: {
+              ...action.timestamp,
+              ended: now,
+            },
+            result: {
+              type: 'aborted',
+            },
+          }
+        })
+
+        // Insert action end events for all actions that were running when the script stopped.
+        const actionEnds = session.actions
+          .filter((action) => action.type === 'begin')
+          .map((action) =>
+            createReplayEvent({
+              tag: 'action-end',
+              payload: {
+                actionId: action.eventId,
+              },
+              timestamp: now,
+            })
+          )
+
+        return {
+          ...session,
+          actions,
+          replay: [
+            ...session.replay,
+            ...actionEnds,
+            createReplayEvent({
+              tag: 'recording-end',
+              payload: {},
+              timestamp: now,
+            }),
+          ],
+        }
+      })
+    })
+  }, [])
+
+  const resetBrowserSession = useCallback(() => {
+    setBrowserSession({
+      actions: [],
+      replay: [],
+    })
   }, [])
 
-  return { browserReplay, resetBrowserReplay }
+  return {
+    browserSession,
+    resetBrowserSession,
+  }
 }

src/main/runner/rrweb.ts

@@ -18,9 +18,25 @@ const PageStartEventSchema = z.object({
   }),
 })
 
+const ActionBeginEventSchema = z.object({
+  tag: z.literal('action-begin'),
+  payload: z.object({
+    actionId: z.string(),
+  }),
+})
+
+const ActionEndEventSchema = z.object({
+  tag: z.literal('action-end'),
+  payload: z.object({
+    actionId: z.string(),
+  }),
+})
+
 const CustomReplayEventSchema = z.discriminatedUnion('tag', [
   RecordingEndEventSchema,
   PageStartEventSchema,
+  ActionBeginEventSchema,
+  ActionEndEventSchema,
 ])
 
 const RrwebCustomEventSchema = z.object({
@@ -42,13 +58,20 @@ export function parseReplayEvent(event: unknown) {
   return RrwebCustomEventSchema.parse(event)
 }
 
-export function createReplayEvent<T extends CustomReplayEvent['tag']>(
-  tag: T,
+interface CreateReplayEventOptions<T extends keyof CustomReplayEventMap> {
+  tag: T
   payload: CustomReplayEventMap[T]['payload']
-): BrowserReplayEvent {
+  timestamp?: number
+}
+
+export function createReplayEvent<T extends keyof CustomReplayEventMap>({
+  tag,
+  payload,
+  timestamp,
+}: CreateReplayEventOptions<T>): BrowserReplayEvent {
   return {
     type: EventType.Custom,
-    timestamp: Date.now(),
+    timestamp: timestamp ?? Date.now(),
     data: {
       tag,
       payload,

src/main/runner/schema.ts

@@ -259,7 +259,9 @@ export const ActionBeginEventSchema = ActionEventSchemaBase.extend({
   type: z.literal('begin'),
   timestamp: z.object({
     started: z.number(),
+    ended: z.undefined().optional(),
   }),
+  result: z.undefined().optional(),
 })
 
 export const ActionSuccessSchema = z.object({

src/main/script.ts

@@ -12,7 +12,6 @@ import { ArchiveError, K6Client } from '@/utils/k6/client'
 import { createTrackingServer } from '@/utils/k6/tracking'
 
 import { instrumentScriptFromPath as instrumentScriptFromPath } from './runner/instrumentation'
-import { createReplayEvent } from './runner/rrweb'
 
 export type K6Process = ChildProcessWithoutNullStreams
 
@@ -116,21 +115,13 @@ export const runScript = async ({
     browserWindow.webContents.send(ScriptHandler.Finished, result)
   })
 
-  testRun.on('abort', () => {
-    browserWindow.webContents.send(ScriptHandler.Stopped)
-  })
-
   testRun.on('error', (error) => {
     log.error(error)
 
     browserWindow.webContents.send(ScriptHandler.Failed)
   })
 
   testRun.on('stop', () => {
-    browserWindow.webContents.send(ScriptHandler.BrowserReplay, [
-      createReplayEvent('recording-end', {}),
-    ])
-
     browserWindow.webContents.send(ScriptHandler.Stopped)
 
     trackingServer?.dispose()