Start / Docs

Dokumentation

Wie DiffMon bei Monitoring, Alerts, Sicherheit und API-Integration funktioniert.

Browser Render

Überwachen Sie JS-gerenderte Seiten mit deterministischen Wait-Strategien und Diffs des gerenderten DOMs, wenn ein einfacher Fetch nicht ausreicht.

Browser Render

Browser Render ist für Seiten gedacht, bei denen simple_fetch sinnvolle Änderungen verpasst, weil der DOM clientseitig aufgebaut wird.

Planverfügbarkeit: Pro und höher.

Wann Sie es einsetzen sollten

  • SPA-Routen, bei denen Inhalte erst nach JavaScript-Ausführung erscheinen.
  • Seiten mit Framework-Hydration, bei denen das Quell-HTML unvollständig ist.
  • Ziele, bei denen simple fetch instabile oder nur teilweise Evidenz liefert.

Wie es funktioniert

  1. Laden Sie die Seite in einem isolierten Browser Context.
  2. Warten Sie mit deterministischen Bedingungen.
  3. Serialisieren Sie den gerenderten DOM.
  4. Wenden Sie Ignore-Regeln an und berechnen Sie Diffs.

So bleiben die Ergebnisse über mehrere Läufe reproduzierbar und das Signal trotzdem hochwertig.

Voraussetzungen

Browser Render wird nur verwendet, wenn alle folgenden Bedingungen erfüllt sind:

  • Ihr Runtime-Capability-Execution-Mode ist browser-enabled.
  • targetType ist url.
  • Der Fetch Mode des Monitors ist content.

Wenn eine Regel nicht erfüllt ist, fällt DiffMon auf simple_fetch zurück und protokolliert den Grund.

Quickstart

  1. Erstellen oder aktualisieren Sie einen URL-Monitor.
  2. Fügen Sie browserOptions für Wait-Strategie und Viewport hinzu.
  3. Starten Sie bei SPAs mit wait_until: "networkidle".
  4. Ergänzen Sie wait_for_selector, wenn die Seite ein klares "ready"-Element hat.
  5. Halten Sie ignoreSelectors auf volatile UI-Bereiche fokussiert.

App-UI (keine API erforderlich)

Sie können Browser Render direkt in der App konfigurieren:

  1. Öffnen Sie New monitor (/app/monitors/new) oder die Einstellungen eines bestehenden Monitors.
  2. Setzen Sie den Monitortyp auf URL.
  3. Lassen Sie in den Request-Einstellungen den Fetch Mode auf Content.
  4. Aktivieren Sie Use Browser Render (JavaScript/SPA).
  5. Stellen Sie Viewport und Wait-Strategie ein (wait_until, optionaler Selector, optionale Verzögerung).
  6. Speichern Sie die Einstellungen oder erstellen Sie den Monitor.

Wenn Ihr Plan Browser Render nicht enthält, wird der Toggle gesperrt mit einem Upgrade-Hinweis angezeigt.

Sandbox Preview

Sandbox Preview unterstützt Browser Render unter derselben Capability Gate:

  • Pro+-Pläne können die Sandbox im Browser-Modus ausführen.
  • Free/Hobby-Pläne erhalten FEATURE_LOCKED für Browser-Preview-Anfragen.
  • Die Browser-Sandbox wendet SSRF-/Resource-Policy-Prüfungen und Browser-Wait-Einstellungen an.
  • Sandbox-Läufe werden unabhängig von Monitor-Läufen gemessen und rate-limitiert.

API-v1-Felder

Verwenden Sie bei Create-/Update-Anfragen browserOptions:

  • viewport: { width, height }
  • wait.wait_until: load | domcontentloaded | networkidle
  • wait.wait_for_selector: CSS-Selector
  • wait.wait_delay_ms: feste Settling-Verzögerung (max. 5000)
  • navigationTimeoutMs
  • totalRunTimeoutMs

In Monitor-Antworten wird der gespeicherte Wert als browserOptionsJson zurückgegeben.

  • Unbekannte Keys werden in Public API v1 abgelehnt.
  • Browser Options sind nur für targetType="url" mit Content-Checks gültig.
  • Options werden gespeichert, die Ausführung hängt aber weiterhin von Runtime-Entitlements und Eligibility ab.
  • viewport erfordert bei Angabe sowohl width als auch height.

API-Beispiele

Einen Monitor mit Browser-Render-Optionen erstellen:

JSON
{
  "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
  }
}

Nur die Wait-Strategie patchen:

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

Troubleshooting

  • BROWSER_WAIT_CONDITION_FAILED: Der Selector erschien nicht vor dem Timeout.
  • BROWSER_NAVIGATION_TIMEOUT: Die Seite hat die Navigation nicht rechtzeitig abgeschlossen.
  • BROWSER_POLICY_BLOCKED: Die Anfrage wurde durch SSRF-/Protocol-Policy blockiert.
  • BROWSER_CONTENT_TOO_LARGE: Das serialisierte HTML hat das Capture-Limit überschritten.

Best Practices

  • Starten Sie bei statischen Seiten mit simple_fetch.
  • Wechseln Sie nur bei Routen auf Browser Render, die es wirklich benötigen.
  • Halten Sie Ignore-Regeln auf bekannte volatile Bereiche fokussiert.
  • Kombinieren Sie Browser Render mit Webhook-Routing für Incident-Automation.

Zugehörige Dokumentation