The Session Live Debug URLs can be used to integrate a live view of ongoing automation within your application.

For example, an application enabling users to configure advanced health checks based on pages’ content can benefit from allowing the users to see the health check recording in case of false positives.

​
Integrating a live Session iframe within your application

1

Store the Session ID of each automation run

Store the Session ID of each running Session by creating a Session using the Session API to store it and pass it to the connect URL as follows:

import { chromium } from "playwright-core";

async function createSession() {
  const response = await fetch(`https://www.browserbase.com/v1/sessions`, {
    method: "POST",
    headers: {
      "x-bb-api-key": `${process.env.BROWSERBASE_API_KEY}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      projectId: process.env.BROWSERBASE_PROJECT_ID,
    }),
  });
  const json = await response.json();
  return json;
}

(async () => {
  const { id } = await createSession();

  // TODO:  store the Session `id` to database

  const browser = await chromium.connectOverCDP(
    // we connect to the Session created via the API
    `wss://connect.browserbase.com?apiKey=${process.env.BROWSERBASE_API_KEY}&sessionId=${sessionId}`,
  );

  // ...
})();
2

Request a debug connection URL by using the Session ID

If a user tries to access the live view of a running automation, retrieve the Session Live Debug URLs as follows:

  async function retrieveDebugConnectionURL(sessionId: string) {
    const response = await fetch(
      `https://www.browserbase.com/v1/sessions/${sessionId}/debug`,
      {
        method: "GET",
        headers: {
          'x-bb-api-key': `${process.env.BROWSERBASE_API_KEY}`,
        },
      },
    );
    const json = await response.json();
    return json.debuggerFullscreenUrl;
  }

  const debugConnectionURL = await retrieveDebugConnectionURL()

  // forward `debugConnectionURL` to the front-end

Let’s forward the debugConnectionURL to the front end to create the final live view with an iframe.

3

Integrate an iframe within your front-end

The front-end can now display a live running Session by loading the debugConnectionURL in a read-only iframe:

<iframe
  src="{debugConnectionURL}"
  sandbox="allow-same-origin allow-scripts"
  style="pointer-events: none;"
/>
To enable your end users to interact with the live Session, remove the style='pointer-events: none;' line.

Was this page helpful?