# 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
{% tabs %}
{% tab title="Node.js" %}
```javascript
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);
```
{% endtab %}
{% tab title="Python" %}
```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)
```
{% endtab %}
{% endtabs %}
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
```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:
```html
```
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:
```javascript
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
{% tabs %}
{% tab title="Node.js" %}
```javascript
const logs = await bs.sessions.logs.list(session.id);
console.log(logs);
```
{% endtab %}
{% tab title="Python" %}
```javascript
logs = bs.sessions.logs.list(session.id)
print(logs)
```
{% endtab %}
{% endtabs %}
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.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://browserswarm.gitbook.io/docs/session-debugging-and-replay.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.