Browser Render

Monitorujte JS-renderované stránky s deterministickým čekáním a diffy renderovaného DOMu, když jednoduchý fetch nestačí.

Browser Render

Browser Render je určený pro stránky, kde simple_fetch nezachytí smysluplné změny, protože se DOM skládá až na straně klienta.

Dostupnost plánu: Pro a vyšší.

Kdy ho použít

• SPA routy, kde se obsah objeví až po spuštění JavaScriptu.
• Stránky s framework hydrací, kde je zdrojové HTML neúplné.
• Cíle, u kterých simple fetch vrací nestabilní nebo jen částečný důkaz.

Jak funguje

1. Načte stránku v izolovaném browser contextu.
2. Počká pomocí deterministických podmínek.
3. Serializuje renderovaný DOM.
4. Aplikuje ignore pravidla a spočítá diffy.

Tím zůstávají výsledky reprodukovatelné napříč běhy a zároveň si zachovávají dobrý signál.

Způsobilost

Browser Render se použije jen tehdy, když platí vše z následujícího:

• Runtime capability execution mode má povolený browser.
• targetType je url.
• Fetch mode monitoru je content.

Pokud některé pravidlo neplatí, DiffMon se vrátí k simple_fetch a zaloguje proč.

Quickstart

1. Vytvořte nebo upravte URL monitor.
2. Přidejte browserOptions pro wait strategii a viewport.
3. U SPA začněte s wait_until: "networkidle".
4. Přidejte wait_for_selector, když má stránka jasný "ready" element.
5. Udržujte ignoreSelectors zaměřené na volatilní části UI.

UI aplikace (bez API)

Browser Render můžete nakonfigurovat přímo v aplikaci:

1. Otevřete New monitor (/app/monitors/new) nebo nastavení existujícího monitoru.
2. Nastavte typ monitoru na URL.
3. V nastavení Request ponechte fetch mode na Content.
4. Zapněte Use Browser Render (JavaScript/SPA).
5. Nastavte viewport a wait strategii (wait_until, volitelný selector, volitelné zpoždění).
6. Nastavení uložte nebo monitor vytvořte.

Pokud váš plán Browser Render neobsahuje, přepínač se zobrazí jako zamčený s výzvou k upgradu.

Sandbox preview

Sandbox preview podporuje Browser Render pod stejnou capability gate:

• Plány Pro+ mohou spouštět sandbox v browser režimu.
• Free/Hobby plány dostanou pro browser preview požadavky FEATURE_LOCKED.
• Browser sandbox aplikuje SSRF/resource policy kontroly a browser wait nastavení.
• Sandbox běhy se metrují a rate limitují nezávisle na bězích monitoru.

Pole API v1

U create/update požadavků použijte browserOptions:

• viewport: { width, height }
• wait.wait_until: load | domcontentloaded | networkidle
• wait.wait_for_selector: CSS selector
• wait.wait_delay_ms: pevná settle prodleva (max 5000)
• navigationTimeoutMs
• totalRunTimeoutMs

V odpovědích monitoru se uložená hodnota vrací jako browserOptionsJson.

• Neznámé klíče jsou v public API v1 odmítnuté.
• Browser options jsou validní jen pro targetType="url" s content kontrolami.
• Options se uloží, ale spuštění stále závisí na runtime entitlementech a způsobilosti.
• viewport při zadání vyžaduje obě hodnoty width i height.

API příklady

Vytvoření monitoru s Browser Render options:

{
  "name": "Pricing Page",
  "targetType": "url",
  "targetUrl": "https://example.com/pricing",
  "checkIntervalMinutes": 5,
  "selectSelectors": "#app",
  "ignoreSelectors": ".timestamp\n.tracking-id",
  "browserOptions": {
    "viewport": { "width": 1280, "height": 720 },
    "wait": {
      "wait_until": "networkidle",
      "wait_for_selector": "#app .pricing-table",
      "wait_delay_ms": 250
    },
    "navigationTimeoutMs": 20000,
    "totalRunTimeoutMs": 30000
  }
}

Patch pouze wait strategie:

{
  "browserOptions": {
    "wait": {
      "wait_until": "domcontentloaded",
      "wait_delay_ms": 100
    }
  }
}

Troubleshooting

• BROWSER_WAIT_CONDITION_FAILED: selector se neobjevil před timeoutem.
• BROWSER_NAVIGATION_TIMEOUT: stránka nedokončila navigaci včas.
• BROWSER_POLICY_BLOCKED: požadavek zablokovala SSRF/protocol policy.
• BROWSER_CONTENT_TOO_LARGE: serializované HTML překročilo limit zachycení.

Best practices

• Pro statické stránky začněte se simple_fetch.
• Na Browser Render přejděte jen u rout, které ho opravdu potřebují.
• Ignore pravidla držte zaměřená na známé volatilní oblasti.
• Pro incident automation kombinujte Browser Render s webhook routingem.

Související dokumentace

• Website monitoring
• Smart Schema Validation
• Webhooks
• Pricing and limits