Session Debugging & Replay

Browser Swarm offers comprehensive tools to debug and replay your browser automation sessions. By capturing detailed session data, you can analyze interactions, identify issues, and optimize your automation workflows.

---

🎥 Session Replay Overview

Every Browser Swarm session is automatically recorded, capturing a reconstruction of the Document Object Model (DOM) and user interactions. This replay is not a video but a dynamic reconstruction using rrweb events, allowing for in-depth inspection of session behavior.

---

🔍 Inspecting Sessions with Session Inspector

The Session Inspector provides a suite of tools to analyze your sessions:

• Timeline: Visualize the sequence of events and interactions during the session.

• DOM View: Examine the HTML structure and changes over time.

• Console Logs: Review logs emitted during the session, such as console.log() outputs.

• Network Events: Inspect HTTP requests and responses, including headers and payloads.

These tools enable you to pinpoint issues and understand session behavior in detail.

---

📦 Retrieving Session Recordings

You can programmatically retrieve session recordings using the Browser Swarm SDK.

Example

Node.js

import { BrowserSwarm } from 'browser-swarm-sdk';

const bs = new BrowserSwarm({ apiKey: process.env.BROWSER_SWARM_API_KEY });

const recording = await bs.sessions.recording.retrieve(session.id);
console.log(recording);

Python

from browser_swarm import BrowserSwarm
import os

bs = BrowserSwarm(api_key=os.environ["BROWSER_SWARM_API_KEY"])

recording = bs.sessions.recording.retrieve(session.id)
print(recording)

These recordings contain the rrweb events needed to reconstruct the session for replay.

---

🎮 Integrating the Recording Player

To replay sessions within your application, you can integrate the rrweb player.

Using rrweb Player in JavaScript

import rrwebPlayer from 'rrweb-player';
import 'rrweb-player/dist/style.css';

new rrwebPlayer({
  target: document.body,
  props: {
    events: recording.events,
    width: 1024,
    height: 576,
    skipInactive: true,
    showController: true,
    autoPlay: false,
  },
});

This setup allows you to control playback, navigate through the session, and analyze specific interactions.

---

🖼️ Embedding Replays via Iframe

For a simpler integration, you can embed the replay using an iframe:

<iframe
  src="/replay/${sessionId}"
  width="100%"
  height="600px"
  frameborder="0"
  allow="fullscreen"
></iframe>

Ensure that the /replay/${sessionId} route serves a page initializing the rrweb player with the corresponding session events.

---

🧪 Working with Session Events

The rrweb player emits events that you can listen to for enhanced control:

const player = new rrwebPlayer({
  target: document.body,
  props: { events: recording.events },
});

player.addEventListener('play', () => console.log('Started'));
player.addEventListener('pause', () => console.log('Paused'));
player.addEventListener('finish', () => console.log('Finished'));

// Control playback
player.goto(5000); // Jump to 5 seconds
const currentTime = player.getCurrentTime();

// Destroy player when done
player.destroy();

These controls facilitate precise navigation and analysis of session recordings.

---

📊 Accessing Session Logs

Session logs provide detailed information about browser events, network requests, and other runtime data. You can retrieve these logs using the SDK:

Example

Node.js

const logs = await bs.sessions.logs.list(session.id);
console.log(logs);

Python

logs = bs.sessions.logs.list(session.id)
print(logs)

These logs are instrumental in diagnosing issues and understanding session behavior.

---

By leveraging Browser Swarm's session debugging and replay capabilities, you can gain deep insights into your automation workflows, swiftly identify issues, and enhance the reliability of your browser automation tasks.