TraceLensExplain slow real-user interactions

Correlate INP, long frames, React renders, network work, source maps, and release regressions in one local-first debugging workflow.

Get started

Debug an interaction

View on GitHub

Interaction-first

Break responsiveness into input delay, processing, and presentation—and connect the result to overlapping browser work.

React-aware

Place profiler boundaries around product regions and see commit cost beside the interaction that caused it.

ReleaseScope

Compare builds by interaction, route, and component to find where a regression entered the release stream.

Source-mapped

Resolve long-frame script contributions to original source locations and open safe repository links.

Privacy-conscious

Drop query strings, credentials, DOM text, values, bodies, and headers before telemetry leaves the page.

CI-enforced

Turn release telemetry into budgets, GitHub Checks, job summaries, artifacts, and one continuously updated PR comment.

INPInteraction timing

LoAFMain-thread work

ReactRender attribution

OTLPTrace export

One interaction, fully explained

TraceLens is built for the question a score cannot answer: what actually made this interaction slow? Start at a user-visible delay, follow its correlated work, then compare the same signal across releases.

TraceLens Studio interaction view showing a Save settings interaction correlated with browser, React, custom, network, layout, and source-mapped script work

bash

npm install @leracherry/tracelens-browser
npx @leracherry/tracelens-cli@1.0.0 studio

Instrument the browser →

Watch the nine-second Studio tour

Studio demo: interaction list, Save settings detail, then ReleaseScope

Captured from the real Studio UI using synthetic telemetry. Each view is held for three seconds. Collapse this section to hide the animation; the image above is a static alternative. Reproduce the capture.

Contribute · Code of Conduct · Report a vulnerability privately

Make regressions part of the workflow

Define release and route budgets in YAML, evaluate captured telemetry locally, then run the same engine in pull requests.

yaml

- uses: leracherry/tracelens@v1.0.0
  with:
    trace-file: artifacts/tracelens-events.json
    github-token: ${{ secrets.GITHUB_TOKEN }}

Configure the GitHub Action →