INTEGRITY Документация

← Browser Run / browser-run / features

Запись Session

Бета

Когда автоматизация браузера завершается сбоем или ведёт себя не так, как ожидалось, бывает сложно понять, что произошло. Запись сессии фиксирует изменения DOM, события мыши и клавиатуры и переходы между страницами в виде структурированных JSON-событий, а не видео, поэтому она занимает мало места и её удобно просматривать. В основе записи лежит rrweb ↗ и подключаются по желанию для каждого сеанса.

Включение записи сессии

Передайте recording: true к puppeteer.launch() или playwright.launch():

import puppeteer from "@cloudflare/puppeteer";

interface Env {
	MYBROWSER: Fetcher;
}

export default {
	async fetch(request: Request, env: Env): Promise<Response> {
		const browser = await puppeteer.launch(env.MYBROWSER, { recording: true });
		const page = await browser.newPage();

		await page.goto("https://example.com");
		// ... your automation steps ...

		const sessionId = browser.sessionId();
		await browser.close();

		return new Response(`Session recorded: ${sessionId}`);
	},
};
import { launch } from "@cloudflare/playwright";

interface Env {
	MYBROWSER: Fetcher;
}

export default {
	async fetch(request: Request, env: Env): Promise<Response> {
		const browser = await launch(env.MYBROWSER, { recording: true });
		const page = await browser.newPage();

		await page.goto("https://example.com");
		// ... your automation steps ...

		const sessionId = browser.sessionId();
		await browser.close();

		return new Response(`Session recorded: ${sessionId}`);
	},
};

Включение через эндпоинт CDP

При подключении к Browser Run из любого окружения с помощью Эндпоинт CDP, добавьте recording=true в качестве параметра запроса к URL-адресу WebSocket:

wss://api.cloudflare.com/client/v4/accounts/<ACCOUNT_ID>/browser-rendering/devtools/browser?recording=true&keep_alive=600000

Например, чтобы включить запись сессии в MCP-клиенте, добавьте recording=true к --wsEndpoint URL-адрес в конфигурации клиента:

{
	"mcpServers": {
		"browser-rendering": {
			"command": "npx",
			"args": [
				"-y",
				"chrome-devtools-mcp@latest",
				"--wsEndpoint=wss://api.cloudflare.com/client/v4/accounts/<ACCOUNT_ID>/browser-rendering/devtools/browser?recording=true&keep_alive=600000",
				"--wsHeaders={\"Authorization\":\"Bearer <API_TOKEN>\"}"
			]
		}
	}
}

Для других MCP-клиентов и использования CDP с Puppeteer или Playwright см. в Документация по CDP.

Просмотр записей

После закрытия сеанса его запись становится доступна в панели управления Cloudflare в разделе Browser Run > Запуски. Выберите значок записи рядом с сессией, чтобы открыть просмотрщик записи, где можно перемещаться по временной шкале и воспроизводить произошедшее во время сессии.

Если в рамках сессии было открыто несколько вкладок, в правом верхнем углу области воспроизведения появляется выпадающий список для выбора вкладки. С его помощью можно переключаться между записанными вкладками и просматривать активность каждой из них по отдельности.

Перейдите в Запуски Browser Run ↗

Получение записи через API

Запись можно также получить программно по идентификатору сессии. Используйте browser.sessionId() чтобы получить ID сессии перед закрытием браузера, а затем передать его в конечную точку recordings.

curl https://api.cloudflare.com/client/v4/accounts/<ACCOUNT_ID>/browser-rendering/recording/<SESSION_ID> \
  -H "Authorization: Bearer <API_TOKEN>"

Успешный ответ выглядит примерно так:

{
	"sessionId": "e26d4660-5b78-4761-b82f-c6b5bad5a925",
	"duration": 4380,
	"events": {
		"target-1": [],
		"target-2": []
	}
}

Ключи в events (например, target-1, target-2) являются Цели CDP ↗. В контексте записи сессии каждая цель обычно соответствует вкладке браузера. У сессии, открывшей несколько вкладок, будет по одной цели на вкладку, и значение каждой цели представляет собой независимый массив событий rrweb для этой вкладки.

Воспроизведение записи

Каждое значение в events это стандартный массив событий rrweb, который можно передать напрямую в rrweb-player ↗ чтобы самостоятельно развернуть интерфейс воспроизведения с полосой прокрутки по времени и элементами управления воспроизведением.

Вкладки воспроизводятся независимо: чтобы воспроизвести сессию с несколькими вкладками, отрисуйте отдельный плеер для каждого target или постройте интерфейс, позволяющий пользователю переключаться между target (аналогично селектору вкладок в просмотрщике записей dashboard).

Лимиты

ограничения rrweb

Запись сессий использует rrweb ↗, который записывает состояние DOM и события, а не пиксели. Этот подход лёгкий, но имеет следующие ограничения: