01 / 03session #8241
Record context
A rolling browser event stream captures the state leading up to the issue.
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.
report submitted · evidence attached
User report · checkout
Coupon fails at checkout
“SAVE20 is accepted, but the total stays the same.”
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 clicks, inputs, navigation, and DOM changes.
- Mark submission and trim the replay around it.
- Keep the original state when the bug is hard to reproduce.
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 console output and stack traces to replay.
- Link failed requests to the state that triggered them.
- Add account, feature flag, and release metadata.
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 elements or mask text and inputs by selector.
- Leave cross-origin payment frames blank.
- Apply the report’s access and retention rules to replay.
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.
Choose the backend that fits your product
Use managed infrastructure or operate the replay pipeline yourself.
Start with rrweb Cloud
Use managed capture and replay, then attach Cloud recording ids and timestamps to reports in your own issue workflow.
rrweb Cloud uses 80% less bandwidth and storage.
Build on open source
Store tickets and recordings together on your own infrastructure, with the access and retention model your product already uses.
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.