Console, network and more

The devtools panel holds what the browser saw while the bug happened. It has up to five tabs: Info, Console, Network, Actions and Backend. It opens on Info. The Console and Network tabs show a count when the capture has errors or failed requests.

Every list follows playback. The row for the current moment is highlighted, rows that come later are dimmed, and clicking a row seeks the player to it.

Info

Info answers “what was this person using”. It lists, in order:

Page, or Pages with a count when the reporter moved between pages. Click a page to jump to when it opened.
App metadata, the values your app passed to window.faylee.metadata(). See App metadata. When there is none, workspace admins see a prompt that opens the snippet.
Linked sessions, links to the same session in LogRocket, Fullstory, Sentry Replay, PostHog or Datadog RUM when the page ran one of them.
Device: when it was captured, with the time zone, the system, the browser, the window size, and the network in words, such as “Fast · 10+ Mbps · 50 ms”.
Backend errors, when your workspace has connected Sentry but no errors matched yet. See Backend.
More details, folded, with the rest of the environment, such as the language, the screen and the color scheme.
Performance. See Performance.

Console

Console lists everything the page logged, plus uncaught errors.

The level filter shows All, Errors, Warnings, Info or Verbose. Beside it, three toggles add page events to the list, so you can read the log in context:

Page navigations
Network errors, on by default
User activity

The Filter box matches the text of each line. Expand an entry to see its full arguments and its stack.

Original stack traces

A production page usually throws from a minified bundle, so its stack reads like main.4f3a.js:1:20931. After a recording is uploaded, Faylee looks for the source maps of the scripts in each stack and resolves the frames to your original source, the way browser devtools do.

On the recording page, an uncaught error then shows its original file and line, and an expanded stack opens on the original frames, such as at submit (src/checkout/CheckoutForm.tsx:14:17). A switch above the stack goes between Original source and Minified. Frames that could not be resolved stay minified and are dimmed.

Faylee finds a map the way a browser does: from the SourceMap or X-SourceMap response header, then the //# sourceMappingURL= comment at the end of the script, then the script’s address with .map added. This covers uncaught errors and console.error calls that carried a stack.

Only maps your site serves publicly are found. Many production sites don’t publish source maps. Scripts or maps behind a login, a VPN or an address allowlist can’t be reached, and their frames stay minified.
The script is fetched after upload, not at the moment the page was recorded. If you deploy in between and the script keeps the same address, the frames can resolve against the new build. Bundles with a content hash in their file name are not affected.
The function name is a best guess from the map. It can name the wrong function when a minifier reused short names in nested scopes. File, line and column are exact.
You can’t upload private source maps to Faylee yet.
Original stacks show to workspace members on the recording page. Share and embed pages show the stacks as the browser wrote them.

Network

Network lists every request the page made, with these columns: number, status, method, name, domain, type, size, duration, a waterfall and the time. On a narrow panel, domain, type and size are hidden. The playhead runs through the waterfall.

The type filter shows All, Fetch/XHR, WS/SSE, JS, CSS, Media, Font, Doc or Other. Errors only keeps the requests that failed, whether they failed in transport, returned an error status, or returned GraphQL errors. The filter box matches the URL or the GraphQL operation name.

Request details

Click a request to open its details under the list. The top of the details shows:

The status, method and resource type.
The full URL, with a button to copy it.
Why it failed, when the request never got a response, using the reason the browser reported.
Blocked by CORS, with the reason, when Faylee can tell from the headers that a cross-origin request or its preflight was refused.
The GraphQL operation and any GraphQL errors, for GraphQL requests.

Three tabs follow:

Headers: the request and response headers. When a header carries a trace id, a Backend trace section lists it first with a copy button.
Payload: the request body. For GraphQL, the query and its variables are shown apart.
Response: the response body.

Trace ids

Faylee reads trace ids from these request and response headers, so you can find the same request in your backend’s logs:

Header	System
`traceparent`	W3C trace context
`x-request-id`, `x-correlation-id`	Request id
`x-amzn-trace-id`	AWS
`sentry-trace`	Sentry
`x-datadog-trace-id`	Datadog
`cf-ray`	Cloudflare

Copy as cURL and HAR export

cURL in the request details copies the request as a curl command, so you can run it again from a terminal. HAR at the top of the panel downloads every request in the recording as a HAR file, which browser devtools and proxy tools can open. The Download menu in the player controls offers the same HAR file.

WebSockets and EventSource

Choose WS/SSE to see WebSocket and EventSource connections. When the capture has any, the list changes to a connection list on the left and that connection’s messages on the right, each on the recording’s clock. You can show All, Sent or Received messages and filter them by text.

A message’s text is clipped to 4 KB, and binary frames are described by their size. Faylee keeps up to 1000 messages per connection. When a connection had more, the oldest are left out and the panel says how many.

Actions

Actions lists every click, key, input and page change as numbered steps to reproduce, such as Click the "Pay" button or Go to /checkout. Typing into a hidden field reads as Type a hidden value into the field, without the value.

Copy copies the steps as a numbered list, ready to paste into a ticket.
Playwright copies a Playwright test that repeats the actions.

Hover a step to copy its element as a CSS selector, a Playwright locator, or its test id when the element has one.

Backend

When your workspace has connected Sentry, Faylee looks up the errors your backend reported for the recording’s failed requests. It matches requests by their traceparent or sentry-trace header, so requests without one of those can’t be matched.

The Backend tab appears only when Sentry returned errors for the recording. Click an error’s time to jump to that moment. Look up again asks Sentry once more, for example when the error arrived in Sentry late. When nothing matched, the Backend errors row in Info says so and offers the same button.

See Sentry for connecting it.

Performance

The end of the Info tab shows how fast the page was for the reporter and what blocked it.

Card	Metric
Largest paint	LCP
Slowest interaction	INP
Layout shift	CLS
First paint	FCP
Server response	TTFB
Peak memory	The most memory the page used, in MB

Each Web Vital is colored by Google’s thresholds as good, needs improvement or poor. A dash means the browser did not report that metric during the capture.

Long tasks lists every time the main thread was blocked for 50 ms or more, with its length. Click one to jump to it. When there were none, the section says that nothing blocked the main thread.