# 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
<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:

```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.