Observability

Debug and monitor your browser sessions with logs, metrics, and real-time inspection

Overview

Browserbase provides comprehensive observability tools to debug and monitor your browser sessions. Access these tools through the Session Inspector in the Dashboard or retrieve data programmatically via the API.

The Session Inspector is accessible by clicking any session in the Dashboard.

Dashboard

Video Recordings

Every session is automatically captured as a video recording, supporting up to 10 tabs. Video recordings are available in the Session Inspector for playback and debugging.

Session Recording

Learn more about video recordings, multitab support, and embedding rrweb DOM replays in your application.

Live View

Debug running sessions in real-time using the Live Debug URL.

The Copy Debug URL button appears in the Session Inspector when a session is actively running.

For more on Live View, see Session Live View.

Status Bar

The Status Bar displays session metadata and status information.

Property	Description
Session ID	Unique identifier for the session
Status	Current status and termination reason if applicable
Started	Session start timestamp
Region	Region where the session ran
Duration	Total session length
Proxy Bandwidth	Data transferred through proxy (MB). Only displayed when proxies are enabled.
Settings	Session configuration (e.g., keepAlive, context)
User Metadata	Custom metadata attached to the session
Extension ID	Identifier for any browser extension used
Expires	When the session data expires and is deleted

Events and Pages

The Events view shows a timeline of activity during the session.

This view includes:

• Pages loaded during the session
• CDP events (Runtime.*, Page.*, Input.*, Log.*)
• Network requests and responses

Stagehand

The Stagehand tab provides inspection tools for sessions created with Stagehand.

Click any row to expand details:

Available information:

• Token usage
• Execution time
• Extraction schemas
• Execution results

For extract calls, switch between JSON and Zod schema formats:

DOM

Inspect the Document Object Model to see element state, attributes, and structure during the session.

Console Logs

View browser console logs emitted by the Web Console API (console.log(), console.error(), etc.). These are logs generated by JavaScript running on the page.

Common console messages:

• browser-solving-started / browser-solving-completed - Captcha solving events
• Starting recording - Recording initialization

Network Logs

View all HTTP network requests and responses captured via Chrome DevTools Protocol (Network events).

Use network logs to:

• Debug failed requests
• Analyze proxy bandwidth usage
• Identify slow or blocked resources

Session Logs API

Retrieve session logs programmatically for automated processing or custom tooling. The Session Logs API returns CDP (Chrome DevTools Protocol) events including console logs, network activity, and page lifecycle events.

Node.js

import { Browserbase } from "@browserbasehq/sdk";

const bb = new Browserbase({ apiKey: process.env.BROWSERBASE_API_KEY! });

const logs = await bb.sessions.logs.list(sessionId);
console.log(logs);

Python

from browserbase import Browserbase
import os

bb = Browserbase(api_key=os.environ["BROWSERBASE_API_KEY"])

logs = bb.sessions.logs.list(session_id)
print(logs)

cURL

curl https://api.browserbase.com/v1/sessions/<session-id>/logs \
  -H "X-BB-API-Key: $BROWSERBASE_API_KEY"

See Sessions API for more details.

HAR Recording

HAR (HTTP Archive) files capture detailed network activity for offline analysis. Use Playwright’s tracing feature to record HAR data locally.

Node.js

import { Browserbase } from "@browserbasehq/sdk";
import { chromium } from "playwright-core";

const bb = new Browserbase({ apiKey: process.env.BROWSERBASE_API_KEY! });

const session = await bb.sessions.create({
  projectId: process.env.BROWSERBASE_PROJECT_ID!,
});

const browser = await chromium.connectOverCDP(session.connectUrl);
const context = browser.contexts()[0];
const page = context.pages()[0];

// Start HAR recording
const harFile = `recording-${Date.now()}.har`;
await context.routeFromHAR(harFile, {
  url: "**/*",
  update: true,
  updateContent: "embed",
  updateMode: "full"
});

// Start tracing for local network capture
await context.tracing.start({
  screenshots: true,
  snapshots: true,
  sources: true
});

await page.goto("https://news.ycombinator.com");

// Stop tracing and save
const traceFile = `trace-${Date.now()}.zip`;
await context.tracing.stop({ path: traceFile });

await page.close();
await browser.close();

console.log(`HAR: ${harFile}, Trace: ${traceFile}`);

Python

from browserbase import Browserbase
from playwright.sync_api import sync_playwright
import os
import time

bb = Browserbase(api_key=os.environ["BROWSERBASE_API_KEY"])

session = bb.sessions.create(project_id=os.environ["BROWSERBASE_PROJECT_ID"])

with sync_playwright() as p:
    browser = p.chromium.connect_over_cdp(session.connect_url)
    context = browser.contexts[0]
    page = context.pages[0]

    # Start HAR recording
    har_file = f"recording-{int(time.time())}.har"
    context.route_from_har(har_file, url="**/*", update=True,
                           update_content="embed", update_mode="full")

    # Start tracing for local network capture
    context.tracing.start(screenshots=True, snapshots=True, sources=True)

    page.goto("https://news.ycombinator.com")

    # Stop tracing and save
    trace_file = f"trace-{int(time.time())}.zip"
    context.tracing.stop(path=trace_file)

    page.close()
    browser.close()

print(f"HAR: {har_file}, Trace: {trace_file}")

View trace files with: npx playwright show-trace trace-file.zip

HAR files created with routeFromHAR are stored on the remote instance. Use tracing to capture network data locally.

Capturing Browser Console Logs

You can capture browser console logs programmatically during your session using Playwright’s console event listener. This gives you real-time access to console.log(), console.error(), and other Web Console API calls as they happen.

Node.js

import { Browserbase } from "@browserbasehq/sdk";
import { chromium } from "playwright-core";

const bb = new Browserbase({ apiKey: process.env.BROWSERBASE_API_KEY! });

const session = await bb.sessions.create({
  projectId: process.env.BROWSERBASE_PROJECT_ID!,
});

const browser = await chromium.connectOverCDP(session.connectUrl);
const context = browser.contexts()[0];
const page = context.pages()[0];

// Capture console logs
page.on("console", (msg) => {
  console.log(`[${msg.type()}] ${msg.text()}`);
});

await page.goto("https://news.ycombinator.com");

await page.close();
await browser.close();

Python

from browserbase import Browserbase
from playwright.sync_api import sync_playwright
import os

bb = Browserbase(api_key=os.environ["BROWSERBASE_API_KEY"])

session = bb.sessions.create(project_id=os.environ["BROWSERBASE_PROJECT_ID"])

with sync_playwright() as p:
    browser = p.chromium.connect_over_cdp(session.connect_url)
    context = browser.contexts[0]
    page = context.pages[0]

    # Capture console logs
    page.on("console", lambda msg: print(f"[{msg.type}] {msg.text}"))

    page.goto("https://news.ycombinator.com")

    page.close()
    browser.close()

Debugging Tips

Issue	Solution
Session terminated unexpectedly	Check Status Bar for termination reason
Selector not found	Use DOM view to inspect element state at failure point
Network request failed	Check Network tab for status codes and response details
Anti-bot detection	Review console logs for solving events, check Stealth Mode

Questions? Contact us at [e-mail]