1# Browser Rendering Patterns
2 
3## Basic Worker
4 
5```typescript
6import puppeteer from "@cloudflare/puppeteer";
7 
8export default {
9  async fetch(request, env) {
10    const browser = await puppeteer.launch(env.MYBROWSER);
11    try {
12      const page = await browser.newPage();
13      await page.goto("https://example.com");
14      return new Response(await page.content());
15    } finally {
16      await browser.close(); // ALWAYS in finally
17    }
18  }
19};
20```
21 
22## Session Reuse
23 
24Keep sessions alive for performance:
25```typescript
26let sessionId = await env.SESSION_KV.get("browser-session");
27if (sessionId) {
28  browser = await puppeteer.connect(env.MYBROWSER, sessionId);
29} else {
30  browser = await puppeteer.launch(env.MYBROWSER, { keep_alive: 600000 });
31  await env.SESSION_KV.put("browser-session", browser.sessionId(), { expirationTtl: 600 });
32}
33// Don't close browser to keep session alive
34```
35 
36## Common Operations
37 
38| Task | Code |
39|------|------|
40| Screenshot | `await page.screenshot({ type: "png", fullPage: true })` |
41| PDF | `await page.pdf({ format: "A4", printBackground: true })` |
42| Extract data | `await page.evaluate(() => document.querySelector('h1').textContent)` |
43| Fill form | `await page.type('#input', 'value'); await page.click('button')` |
44| Wait nav | `await Promise.all([page.waitForNavigation(), page.click('a')])` |
45 
46## Parallel Scraping
47 
48```typescript
49const pages = await Promise.all(urls.map(() => browser.newPage()));
50await Promise.all(pages.map((p, i) => p.goto(urls[i])));
51const titles = await Promise.all(pages.map(p => p.title()));
52```
53 
54## Playwright Selectors
55 
56```typescript
57import { launch } from "@cloudflare/playwright";
58const browser = await launch(env.MYBROWSER);
59await page.getByRole("button", { name: "Sign in" }).click();
60await page.getByLabel("Email").fill("[email protected]");
61await page.getByTestId("submit-button").click();
62```
63 
64## Incognito Contexts
65 
66Isolated sessions without multiple browsers:
67```typescript
68const ctx1 = await browser.createIncognitoBrowserContext();
69const ctx2 = await browser.createIncognitoBrowserContext();
70// Each has isolated cookies/storage
71```
72 
73## Quota Check
74 
75```typescript
76const limits = await puppeteer.limits(env.MYBROWSER);
77if (limits.remaining < 60000) return new Response("Quota low", { status: 429 });
78```
79 
80## Error Handling
81 
82```typescript
83try {
84  await page.goto(url, { timeout: 30000, waitUntil: "networkidle0" });
85} catch (e) {
86  if (e.message.includes("timeout")) return new Response("Timeout", { status: 504 });
87  if (e.message.includes("Session limit")) return new Response("Too many sessions", { status: 429 });
88} finally {
89  if (browser) await browser.close();
90}
91```
92