/logfire-frontend

name: logfire-frontend
description: Set up and troubleshoot Pydantic Logfire frontend observability and session replays in JavaScript/TypeScript browser applications. Use for browser errors, RUM, Web Vitals, replay recording, privacy controls, or reducing browser telemetry volume. Supports browser entrypoints, React/Vite, and the client side of Next.js; use logfire-instrumentation for server-side telemetry.

Set Up Frontend Observability and Session Replays

The application uses `@pydantic/logfire-browser` and, when replay is requested, `@pydantic/logfire-session-replay`. Configure one browser provider; preserve an existing OpenTelemetry provider, proxy, and application initialization pattern.

Confirm the browser application

Read repository instructions, the application manifest, browser entrypoint, router, and existing instrumentation. For Next.js, distinguish client code from server instrumentation before changing either. Respect dependency constraints; check the installed SDK's types before using a capture or sampling option.

Preserve the exact origin, organization, and project supplied by the user or setup handoff. Browser-only setup does not require a CLI login, a local SDK credential, or an ordinary project write token. Use existing native MCP access for verification when available; otherwise use the Logfire UI.

Create or select the frontend application under **Frontend → Applications** and use its generated regional URL and restricted frontend token. A normal project write token, server environment variable, or `.logfire` credential is unsuitable for browser code. The frontend application owns service identity. If no supported public API/tool can manage it, use the UI; do not invent a private endpoint.

Match capture to the request

Read [browser setup](./references/setup.md), then the applicable section of [capture profiles](./references/capture-profiles.md):

• **Full frontend observability:** automatic page/request/interaction spans and

Web Vitals. Add replay only when requested.

• **Errors and replays with automatic instrumentation:** retain traces with

Logfire error-level events or OpenTelemetry error status, while keeping replay independently enabled. This also retains other spans in a qualifying trace.

• **Minimal errors and replays:** disable automatic spans and Web Vitals and

explicitly report application errors. Use when the user requires lower browser instrumentation overhead or strictly limits the signals collected.

Preserve existing approved replay rates and masking. Trace sampling, replay sampling, and metric capture are separate decisions. Do not promise that `minLevel` filters automatic spans, that a trace sampler retains an entire browser session, or that every handled application failure is captured automatically.

Session replay is Early Access; check availability for the target organization and keep an existing application rollout flag. Mask text and inputs, leave console capture off, and block sensitive regions before recording them. Review attributes and URLs separately from visible-text masking. Add normalized route templates and opaque user IDs only when useful; names and emails are optional personal data.

Verify the selected behavior

Use [verification and troubleshooting](./references/verification.md) to exercise the real browser application, check the signals retained and omitted, query fresh errors in the exact project, and play the matching recording. For a sampling profile, test successful requests and the failure types the user cares about; inspect actual exported spans rather than assuming how HTTP status maps to error severity.

Run the application's normal typecheck/build and focused tests. Report browser execution, telemetry ingestion, and replay playback separately. A successful build, flush, upload response, or generated link does not prove all three. Return the verified project/application, capture policy, and a clean relevant UI link. If account reads or browser playback are unavailable, mark those parts unverified and state what evidence is missing.

For server-side Node.js or Next.js setup, use [application instrumentation](../logfire-instrumentation/SKILL.md).