---
title: 'Playwright Browser Monitoring'
description: 'Synthetic browser checks with third-party attribution as OTel span attributes. Filmstrips, Web Vitals anomaly detection, and insight packs from 14 global locations.'
canonical_url: 'https://yorkermonitoring.com/features/browser-monitoring'
---

# Browser monitoring with dependency intelligence

**See what's breaking, and what's causing it**

Browser checks that go beyond pass/fail. Third-party domains attributed as OTel span attributes, Web Vitals anomaly-scored, and every step captured, all flowing into your OTel backend as a rich insight pack.

Yorker is OTel-native synthetic monitoring for developers and SRE teams, built by Reverse Sweep Ltd.

[Start Free](/sign-up) | [Read Docs](/docs)

## How it works

### 01. Playwright runs in a real browser

Your script runs in a real Chromium instance in an isolated, single-use browser environment on a global location. No headless shortcuts: full browser, full network stack, real third-party requests.

### 02. Every request classified and attributed

Third-party requests classified by domain. Payload bytes, request latency, and blocking vs non-blocking measured per domain, per check run, and across your monitor portfolio.

### 03. OTel insight pack emitted

Web Vitals, anomaly scores, third-party attribution, filmstrip screenshot URLs, and W3C traceparent emitted as a single OTLP insight pack to your backend.

## Third-party attribution, automatic

Every request hostname compared to the page hostname. Domain, payload bytes, and request latency tracked per-check and across your monitor portfolio. When a tag manager script starts behaving differently, you know which monitors are affected, before users file support tickets.

- Third-party domains identified and classified automatically
- Payload bytes tracked per domain per run
- Cross-monitor shared dependency detection
- Anomaly scored against per-domain baselines
- Emitted as structured OTel span attributes (count, total bytes, domains)

### Third-party domains on Checkout Flow

| Domain | Payload | Latency | Status |
| --- | --- | --- | --- |
| `cdn.tagmanager.net` | 847 KB | 324ms | anomaly |
| `analytics.google.com` | 42 KB | 89ms | ok |
| `fonts.googleapis.com` | 12 KB | 31ms | ok |
| `cdn.stripe.com` | 156 KB | 78ms | ok |

### Cross-monitor dependency view

| Monitor | LCP | 3P Impact |
| --- | --- | --- |
| Checkout Flow | 3.2s | +2.1σ |
| Product Detail | 2.9s | +1.8σ |
| Homepage | 3.6s | +2.4σ |
| Search Results | 2.7s | +1.3σ |

**Shared dependency detected**: `cdn.tagmanager.net` across 4 monitors, never deployed.

## Filmstrip evidence

Every step in your Playwright script captured and stored. Screenshot URLs embedded directly in OTel spans. Pull up the filmstrip from inside Grafana or your incident runbook, with no context switch to a separate monitoring dashboard required.

When your checkout breaks at 2am, the on-call engineer opens the alert, clicks the screenshot URL in the span, and sees exactly what the user saw, in the same tool they already have open.

### Screenshot URLs in OTel spans

| Step | Time |
| --- | --- |
| Step 1: Page load | 0ms |
| Step 2: Login form | 1,240ms |
| Step 3: Product added | 2,890ms |
| Step 4: Checkout | 4,120ms |

URLs embedded in OTLP spans, accessible from any tool in your stack.

## Web Vitals, anomaly-scored

LCP, FCP, CLS, and TTFB tracked against 14-day rolling baselines, calculated per location and per hour of day. The `synthetics.check.completed` log event fires every run; when behavior drifts, deviation in σ is attached as a log attribute: your backend knows "+2.1σ on LCP from Tokyo at 14:00 UTC", not just a raw number.

No fixed thresholds to maintain. No manual tuning when your app ships a performance improvement. The baseline adapts, and alerts fire when behavior deviates from what's normal for that check, that location, and that time of day.

### Web Vitals: Checkout Flow / Tokyo

| Metric | Current | Baseline | Deviation |
| --- | --- | --- | --- |
| LCP | 3.2s | 1.4s | +2.1σ |
| FCP | 1.1s | 0.9s | +0.4σ |
| CLS | 0.02 | 0.01 | +0.6σ |
| TTFB | 420ms | 280ms | +1.2σ |

## Unlike isolated browser check runners

- Most tools run browser checks in isolation. Yorker tracks third-party domains across your entire monitor portfolio, so a failing CDN shows up across all affected monitors simultaneously, not as four separate unrelated alerts.
- Filmstrip screenshots are stored and linked in OTel spans, not locked in a proprietary dashboard. Pull them up from any tool in your stack: Grafana, a PagerDuty runbook, or a Slack alert.
- Web Vitals are anomaly-scored against per-location, per-hour-of-day baselines, not compared to a fixed threshold you have to maintain and tune as your app evolves.

## Related features

- **[OpenTelemetry](/features/opentelemetry)**: The full OTel insight pack that every browser check emits into your backend.
- **[Alerting](/features/alerting)**: Multi-location correlation and cross-monitor pattern detection.
- **[SLO Tracking](/features/slo-tracking)**: Error budgets on browser checks and third-party dependencies.

## Frequently asked questions

### Can I run Playwright scripts as monitors?

Yes. Yorker wraps Playwright as a library dependency: you write standard Playwright TypeScript scripts and declare them as browser monitors in your `yorker.config.yaml`. Any script that runs in Playwright runs as a Yorker monitor. No proprietary API, no forked Playwright version.

### How does third-party dependency attribution work?

Every network request during a browser check run is compared against the page's hostname. Requests to different hostnames are classified as third-party. Yorker tracks the domain, payload bytes, and request latency per third-party domain per run, then emits them as structured OTel span attributes (`synthetics.third_party.count`, `synthetics.third_party.total_bytes`, `synthetics.third_party.domains`). Cross-monitor correlation fires when two or more browser checks fail within five minutes sharing the same third-party domain.

### What Web Vitals does Yorker capture?

LCP (Largest Contentful Paint), FCP (First Contentful Paint), CLS (Cumulative Layout Shift), and TTFB (Time to First Byte) are tracked per check run. Each metric is anomaly-scored against a 14-day rolling baseline, calculated per location and per hour of day, and emitted as a log attribute on the `synthetics.check.completed` event.

### Where are filmstrip screenshots stored?

Screenshots are stored in S3-compatible object storage and the URL is embedded directly in the OTel span as the `synthetics.screenshot.url` attribute. You can open the screenshot from any tool that can read your OTel backend, such as Grafana, HyperDX, or a PagerDuty runbook, without switching to a separate monitoring dashboard.

### How many global locations are available for browser checks?

Fourteen hosted locations. Browser checks run in isolated, single-use Playwright + Chromium environments, so every run starts from a clean slate with no state carried over. You select which locations to run from when you define your monitor; multi-location checks run in parallel.

## Put your first check live in one command.

Free tier includes 10,000 HTTP + MCP checks and 1,500 browser checks per month. No credit card required.

```
npx @yorker/cli init
```

[Start Free](/sign-up) | [Read Docs](/docs)