Session Replays are one of the most powerful features of Browserbase. It allows you to replay a Session to inspect the actions performed and network requests, page by page.
To learn more about how Session Replays works, we’ll walk through a quickstart guide to understand how Session Replays can be involved in your development workflow.
Let’s get started in viewing your first session replay immediately.
A replay of each Session is featured in the Sessions page. This replay is a capture of the webpage, not a video, and can be inspected with your Chrome DevTools.
Here are some key takeaways:
A high usage of memory or CPUs might result in longer runs and more billed minutes. Look at the logs or open a Live Session URL to pinpoint the root issue.
In case of high proxy bandwidth usage, inspect the network requests using the Timeline described below.
Note that the replay length may not match the total session duration. This is
because session timing starts when the browser begins running, while the
replay recording only begins when the first page loads. The replay is a
reconstruction of the DOM using rrweb
events.
Logs emitted by the Web Console API (ex: console.log()), making debugging remote Sessions as easy as using your browser
Some example of console logs:
browser-solving-started
browser-solving-completed
browserbase-keeping-connection-alive
Starting recording
You’ll also be able to see other logs as expected from a browser, like [DOM] Updated style of [body] or [Network] Request finished loading: GET "https://example.com/style.css"
Session logs contain detailed information captured during a Browserbase session. This includes browser events, network requests, and other runtime data.
These logs provide insights into what occurred during the session’s execution.
To retrieve the logs of a session, you can use the Sessions API or the logs.list() method in the Browserbase SDK.
// Get the session logs for the given session idconst logs = await bb.sessions.logs.list(session.id);console.log(logs);
// Get the session logs for the given session idconst logs = await bb.sessions.logs.list(session.id);console.log(logs);
# Get the session logs for the given session idlogs = bb.sessions.logs.list(session.id)print(logs)
These logs retrieved using the Browserbase SDK are the same as the ones
featured in the Events tab of the Session Replay.
Let’s say you have a session ID and you want to retrieve the recordings for that session. You can do so by using the recording.retrieve() method in the Browserbase SDK.
// Get the session replay for the given session idconst replay = await bb.sessions.recording.retrieve(session.id);console.log(replay);
// Get the session replay for the given session idconst replay = await bb.sessions.recording.retrieve(session.id);console.log(replay);
# Get the session replay for the given session idreplay = bb.sessions.recording.retrieve(session.id)print(replay)
Often times, you’ll want to integrate a recording player in your application. This is a simple process that can be done in a few steps.
Since session recordings are a culmination of rrweb events captured during the session, you can integrate a recording player into your application to replay these events.
If using a frontend framework like Next.js, you can use the rrwebPlayer component for displaying the session replay in your application.
You can create a reusable component that accepts session recording events as props and renders the rrweb player:
import rrwebPlayer from "rrweb-player";import "rrweb-player/dist/style.css";// Initialize the player with your session recordingnew rrwebPlayer({ target: document.body, props: { events: recording.events, width: 1024, height: 576, },});
The iframe approach requires you to host a separate page that initializes the
rrweb player. Make sure to handle proper session authentication and access
control.