01 / 03session #8241
Record context
A rolling browser event stream captures the state leading up to the issue.
Build your own bug reporting
Bug reporting with session replay built in
A screenshot captures one frame. A session replay carries the clicks, page states, console output, and network context before the failure. Build it into your own reporting flow, and every ticket arrives with the session that explains it, stored in your issue system rather than a bug-tool vendor’s cloud.
issue BR-1842 · evidence attached
Coupon fails at checkout
open · web@4.18.2
app.acme.com/checkout
Coupon rejectedconsoleTypeError: total
networkPOST /coupon 500
browserChrome 138
clickcoupon500report
The reproduction steps are already in the recording
A session is an ordered event stream. The report can list meaningful interactions and open playback just before the failure, without asking the reporter to reconstruct what they did.
- Capture navigation, clicks, inputs, and DOM changes with millisecond timestamps.
- Mark the report submission as a custom event and trim the playback window around it.
- Keep the original page state even when the issue is difficult to reproduce later.
reproduction · extracted from session
The steps are already recorded
open /pricing00:04
choose Pro00:09
apply coupon00:14
submit00:18
Give your engineers the context they ask for next
Add console and network plugins to the same recording. The ticket can show the release, browser, failed request, and visible page state at one timestamp.
- Attach stack traces and console output beside the replay timeline.
- Link failed requests to the interface state that triggered them.
- Carry account, feature flag, and release metadata in your report model.
report context · BR-1842
Developer context stays attached
release web@4.18.2
browser Chrome 138
console TypeError: total
network POST /coupon 500
Jump to 00:18 in replay
Capture the failure without collecting the secret
Mask sensitive fields in the browser before events leave the page. Your report keeps the layout and interaction sequence while private values remain placeholders.
- Block whole elements or mask text and input values by selector.
- Keep cross-origin payment iframes blank, as the browser security model requires.
- Apply retention and ticket-access rules to the recording as well as the report.
capture policy · browser
Sensitive values leave as placeholders
email "customer@masked"
card "•••• •••• •••• 4242"
notes "[masked]"
Masking applied before transport
Turn report submission into a join point
The recorder runs before the bug appears. When the user submits a report, your product stores the ticket and recording id together. Put the replay inside the issue with embedded playback, then send confirmed failures into your observability workflow.
02 / 03bug BR-1842
Submit report
The ticket stores the session id, timestamp, comment, and product metadata.
03 / 03open at 00:18
Debug in place
Your issue UI opens the replay at the reported moment with related evidence.
Build on rrweb your way
The same open recorder works with your infrastructure or ours.
Own the full pipeline
Store tickets and recordings together on your own infrastructure, with the access and retention model your product already uses.
Use rrweb Cloud for replay
Use managed capture and replay, then attach Cloud recording ids and timestamps to reports in your own issue workflow.
Frequently asked questions
What is a bug report with session replay?
It is a bug report linked to the browser state and interaction sequence that led to the issue. Engineers can open the recording at the reported moment and inspect console or network context when those plugins are enabled. Backend causes still belong in server logs and traces.
Can I build my own bug reporting tool on rrweb?
Yes. rrweb supplies the MIT-licensed recorder, event format, and replayer. Your product stores the recording, joins it to a ticket by session id and timestamp, enforces access, and presents the relevant replay segment in the issue UI.
Can rrweb create written reproduction steps?
The event stream contains the ordered interactions needed to derive steps. Your product decides how to group raw events into labels such as “opened pricing” or “submitted coupon” and can link each step to its replay timestamp.
What data should a bug recording mask?
Mask passwords, payment details, personal text, and any domain-specific sensitive fields before transport. Then restrict access and retention for the remaining recording according to the report’s purpose.
Can I put replay inside my existing issue tracker?
Yes. Embed the rrweb replayer in your issue UI or link to a hosted player using the recording id and timestamp stored with the ticket.
Why rrweb over a packaged bug-reporting SaaS?
A hosted bug tool gives you a widget and a dashboard on its own domain, priced per seat, with recordings held in its cloud. rrweb gives you the open recorder, event format, and replayer, so you build capture into your own reporting flow, store tickets and recordings together, and keep the data under your access model. Choose the SaaS when a standalone tool is enough; choose rrweb when the replay has to live inside the product and issue system you already run.