Browser SDK
Use @pydantic/logfire-browser to send browser errors, request traces, and
performance measurements to Logfire. Session replay is an optional integration.
npm install @pydantic/logfire-browser
Create a frontend application in your project’s settings. Copy its generated base URL and token into your browser setup:
import * as logfire from '@pydantic/logfire-browser'
const frontendOptions = {
// Copy these values from the frontend application page.
baseUrl: 'https://logfire-us.pydantic.dev',
token: '<frontend-application-token>',
}
logfire.configureFrontend(frontendOptions)
The restricted frontend application token can send data only for that application. It cannot read project data or report as another service. Never put a normal Logfire write token in browser code. A backend proxy is not required for this setup.
Call configureFrontend() once, before the application registers event listeners
or makes requests. The package is ESM for modern browsers. For SSR or SSG applications,
run it only in browser runtime code.
See the Next.js guide for client-side initialization.
The default setup enables automatic request and interaction tracing, uncaught error and unhandled rejection capture, and Web Vitals spans and metrics. Replay remains off until you add the optional integration.
For errors and replay without performance data, use
profile: 'errors'.
It keeps failed traces with their surrounding context and uploads replays when
an error occurs. Install the replay package and use the complete example in
that guide.
For performance data, keep the default profile. Use Browser performance to adjust Web Vitals, resource timing, or main-thread diagnostics.
If your app uses a router, set a route name
so pages such as /projects/123 and /projects/456 share a page group.
Standard request URL attributes exclude credentials, query strings, and fragments by default. Page URL attributes and replay capture have their own controls. Review those settings and any attributes your application adds before sending sensitive data. Replay text masking does not redact every part of the document.
Reload the instrumented page and interact with it. In Logfire, select the frontend application and a time range that includes the page load. The Frontend guide shows where to find page loads, requests, errors, and Web Vitals.
If you chose the errors profile, trigger a test error. Healthy requests and clicks are intentionally absent from that profile’s exports.
If data is missing, check the browser’s network panel for authentication, CSP, or content-blocker failures. Confirm that configuration runs in the browser and uses the selected frontend application’s token.
While troubleshooting locally, add diagLogLevel to the original configuration
call. Do not configure the SDK a second time while it is active:
logfire.configureFrontend({
...frontendOptions,
diagLogLevel: logfire.DiagLogLevel.ALL,
})
Only enable verbose diagnostic logging in development.
Errors and data volume — Capture errors, record error-triggered replays, and choose sampling or manual log levels.
Routes, users, and sessions — Set route templates, identify users, and add session context.
Browser performance — Configure Web Vitals, resource timing detail, and Long Animation Frame reporting.
Session replay — Record sessions, review privacy controls, and understand recording lifetime and upload limits.
Advanced configuration — Customize instrumentation and transport, add processors, or manage SDK cleanup.
Python telemetry proxy — Forward traces, logs, and metrics through an authenticated Python backend. These helpers do not forward replay.