Skip to main content
Version: 0.1.0

Recording User Flow Sessions

What a Session Captures​

A session is a complete recording of everything Event Lens saw between Start recording and Stop recording:

  • Every event with full payload.
  • Every correlated network request.
  • Listener counts and memory leak snapshots.
  • Performance budget violations.
  • Breakpoints that were hit.

Sessions are how you reproduce a bug exactly, share it with a teammate, or commit a known-good test case to a repo.

Recording a Session​

Scenario: A user's checkout flow breaks. You want to capture it for a bug report.

Steps​

  1. Go to the Replay tab.
  2. Click Start recording.
  3. Reproduce the buggy flow:
    • Click a product on the home page.
    • Pick a size.
    • Add to cart.
    • Go to checkout.
    • Fill in the shipping address.
    • Fill in payment info.
    • Click Complete order — bug happens here.
  4. Click Stop recording — the entire flow is captured in memory.

Exporting a Session​

  1. Export in the header.
  2. A JSON file is downloaded, e.g. event-lens-2026-05-08T14-03-21.json.
  3. Attach it to a bug report or GitHub issue.

The JSON file contains everything captured. It is plain JSON — anyone with the file can replay your session.

Importing a Session​

Replay a teammate's recording on your own machine:

  1. Import in the header.
  2. Pick the JSON file.
  3. All events, network requests, and the state timeline are restored.
  4. Use Play Session to replay the interactions.

You can also click any individual captured event and replay it in isolation.

Sanitizing Sensitive Data​

Captured event payloads may contain PII or secrets. Event Lens does not redact automatically — you must sanitize before sharing.

Two options​

1. Strip data before firing the event​

The cleanest approach — never let sensitive values reach Event Lens:

const cleanPayload = {
  username: formData.username,
  // password: formData.password   <- don't send
  timestamp: Date.now()
};

dispatchEvent(new CustomEvent('user:login', {
  detail: cleanPayload
}));

2. Edit the captured event in Event Lens​

If the event was already captured with sensitive data:

  • Pick the event in the list.
  • Click Edit.
  • Remove or redact the sensitive field.
  • Save. The exported JSON now reflects the edit.

Risk levels​

Data typeRiskAction
User IDMediumRedact in screenshots, OK in private bug reports
EmailMediumRedact before public sharing
Session tokenHighAlways redact
API keyHighAlways redact
PasswordCriticalNever let into the payload at all
Credit cardCriticalNever let into the payload at all

Tips & Tricks​

  • Pin events you care about — pinned events stay visible during long recordings.
  • Stop early on success — once you reproduce the bug, hit Stop. A 10-minute recording is harder to read than a 30-second one.
  • Name your exports — rename the downloaded JSON to describe the bug (e.g. bug-1234-checkout-fail.json).
  • Treat exports like credentials — anyone with the JSON can see what you captured.

Limitations​

  • Sessions live in memory — closing DevTools or navigating away while recording loses the session.
  • Exports are not encrypted — protect them in transit (private channels, encrypted attachments).
  • Replay timing is approximate — Event Lens replays in order with a configurable delay; it does not perfectly recreate real-time gaps.

See Also​