INTEGRITY Dokumentace

← Browser Run / browser-run / features

Nahrávání Session

Beta

Když automatizace prohlížeče selže nebo se chová neočekávaně, může být obtížné zjistit, co se stalo. Nahrávání relace zaznamenává změny DOM, události myši a klávesnice a navigaci na stránkách jako strukturované JSON události, nikoli jako video, takže je odlehčené a snadné na kontrolu. Nahrávky jsou poháněny technologií rrweb ↗ a jsou volitelné pro jednotlivé relace.

Povolte nahrávání relace

Předejte recording: true na puppeteer.launch() nebo 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}`);
	},
};

Povolte pomocí endpointu CDP

Při připojování k Browser Run z libovolného prostředí pomocí Koncový bod CDP, přidejte recording=true jako parametr dotazu k adrese URL WebSocket:

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

Chcete-li například povolit nahrávání relace v klientovi MCP, přidejte recording=true do --wsEndpoint URL adresu v konfiguraci klienta:

{
	"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>\"}"
			]
		}
	}
}

Informace o dalších klientech MCP a používání CDP s Puppeteer nebo Playwright najdete v Dokumentace CDP.

Zobrazení nahrávek

Po uzavření relace je její záznam k dispozici v Cloudflare dashboardu v části Browser Run > Spuštění. Kliknutím na ikonu záznamu vedle relace otevřete prohlížeč záznamů, kde můžete procházet časovou osu a přehrát si, co se během relace dělo.

Pokud relace otevřela více karet, prohlížeč záznamů zobrazí v pravém horním rohu oblasti přehrávání rozbalovací seznam pro výběr karty. Pomocí něj můžete přepínat mezi zaznamenanými kartami a prohlížet aktivitu každé z nich zvlášť.

Přejděte na Browser Run Runs ↗

Získejte záznam přes API

Nahrávku můžete také získat programově pomocí ID relace. Použijte browser.sessionId() k zachycení ID relace před zavřením prohlížeče a poté jej předejte koncovému bodu recordings.

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

Úspěšná odpověď vypadá podobně jako v následujícím příkladu:

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

Klíče v events (například target-1, target-2) jsou Cíle CDP ↗. V kontextu záznamu relace obvykle každý cíl odpovídá kartě prohlížeče. Relace, která otevřela více karet, bude mít jeden cíl na kartu, přičemž hodnota každého cíle je nezávislé pole událostí rrweb pro danou kartu.

Přehrajte záznam

Každá hodnota v events je standardní pole událostí rrweb a lze jej předat přímo do rrweb-player ↗ k vlastnímu hostování rozhraní pro přehrávání s časovou osou a ovládacími prvky přehrávání.

Karty se přehrávají nezávisle na sobě. Pokud chcete přehrát relaci s více kartami, vykreslete pro každý cíl samostatný přehrávač, nebo vytvořte uživatelské rozhraní, které uživateli umožní mezi cíli přepínat, podobně jako selektor karet v prohlížeči záznamů v dashboardu.

Limity

omezení nástroje rrweb

Záznam relace využívá rrweb ↗, která zaznamenává stav DOM a události namísto pixelů. Tento přístup je nenáročný, má ale následující omezení: