See what your users’ browsers see
The Midline browser SDK reports uncaught errors, failed network calls and Web Vitals from real visitors, on the same stream as your API’s requests. A broken checkout page and the failing request behind it appear side by side.
What the SDK captures
It instruments the page rather than a framework, so it works the same under React, Vue, Angular, Svelte, Next.js or no framework at all. It has no dependencies.
- Errors: uncaught errors and unhandled promise rejections. An error a framework catches itself is one captureException call away.
- Failed calls: fetch and XMLHttpRequest calls that answer 4xx or 5xx, or never connect.
- Web Vitals: LCP, INP, CLS, FCP and TTFB, reported once when the page is first hidden.
- Pageviews, for visitor counts and funnels.
- Console errors and warnings, if you ask. Off by default.
Browser keys are public by design
Anything in a bundle can be read, so browser keys (pk_) are made to be seen. The server accepts one only from the origins listed on it and answers every other origin with a 403. A server key (ak_) sent from a browser is refused, and the SDK will not start with one, so a secret cannot slip into a bundle.
Linked to the backend
Same-origin calls carry a W3C traceparent header, so a failed call in the page and the request behind it share a trace id.
Careful with visitor data
The SDK never sends cookies, page query strings or request and response bodies, and is limited to 120 events a minute.
Next.js
The browser SDK covers the client side. Server-side code on Next.js reports over the HTTP ingest API with a server key that stays on the server.
import * as Midline from "midline-agent/browser";
Midline.init({
apiKey: import.meta.env.VITE_MIDLINE_BROWSER_KEY, // pk_... browser key
service: "checkout-web",
environment: import.meta.env.MODE,
release: import.meta.env.VITE_RELEASE,
});
Questions
Which Web Vitals does Midline track?
LCP (Largest Contentful Paint), INP (Interaction to Next Paint), CLS (Cumulative Layout Shift), FCP and TTFB, reported from real visitors once, when the page is first hidden.
Is it safe to put the key in my frontend code?
Yes, if it is a browser key. Browser keys (pk_) are public by design and only accepted from the origins you list. Server keys (ak_) are refused from a browser.
Which frameworks are supported?
React, Vue, Angular, Svelte, Next.js and plain JavaScript. The SDK works on the page itself, so it is not tied to a framework.
Does it collect personal data?
It never sends cookies, page query strings or request and response bodies. Session ids should be opaque values, never an email address or a real user id.
Browser SDK · API keys · Projects and stacks
Start free