Browser Swarm Docs
  • ๐Ÿš€Welcome
    • What is Browser Swarm?
  • Understanding Headless Browsers
  • Quickstart Guide
  • Framework Compatibility
  • ๐ŸŒŸ Core Concepts
    • Starting a Browser Task
  • Interacting with Browser Tasks
  • Task Lifecycle Management
  • โš™๏ธAdvanced Features
    • Stealth Automation
  • Proxy Integration
  • Real-Time Monitoring
  • Responsive Viewports
  • Session Debugging & Replay
  • File Handling (Downloads & Uploads)
  • Capturing Screenshots & PDFs
  • Persistent Contexts
  • Extension Support
  • Session Tagging & Metadata
  • ๐ŸŽฏPractical Examples
    • Automating Form Interactions
  • Efficient Data Scraping
  • Automated Web Testing
  • Cost Optimization Strategies
  • Handling Extended Tasks
  • Selecting Execution Regions
  • Monitoring Resource Usage
  • Leveraging Task Metadata
  • Pricing and Subscription
  • Account and Team Management
  • Managing Limits and Concurrency
  • Authentication Automation
  • Security Best Practices
  • ๐Ÿ”ŒEcosystem Integrations
    • Integration Overview
  • ๐Ÿ’ปDeveloper Resources
    • APIs and SDKs Overview
  • Node.js Integration
  • Python Integration
  • Browser Task API
  • Project Management API
  • Context Management API
  • Browser Extensions API
  • ๐Ÿ™‹โ€โ™‚๏ธSupport & Resources
    • Getting Help
  • Dashboard Overview
  • FAQs & Troubleshooting
Powered by GitBook
On this page
  • ๐ŸŽฅ Session Replay Overview
  • ๐Ÿ” Inspecting Sessions with Session Inspector
  • ๐Ÿ“ฆ Retrieving Session Recordings
  • ๐ŸŽฎ Integrating the Recording Player
  • ๐Ÿ–ผ๏ธ Embedding Replays via Iframe
  • ๐Ÿงช Working with Session Events
  • ๐Ÿ“Š Accessing Session Logs

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

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);
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

const logs = await bs.sessions.logs.list(session.id);
console.log(logs);
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.

PreviousResponsive ViewportsNextFile Handling (Downloads & Uploads)

Last updated 1 month ago