When a visitor clicks the bug report button and submits, Yaplet assembles a structured report in the background. You receive far more context than a written description alone could provide. Here's everything that's collected.
Screenshot
A screenshot of what the visitor could see — the browser window at its current scroll position, not the whole page. The visitor adds it themselves with the Add Screenshot button on the last step of the report form, and can annotate it with a drawing tool before submitting: circling the problem area, adding arrows, or blacking out something private. Technically Yaplet copies the page's structure and re-renders it as an image on our servers rather than photographing the browser, which means whatever is currently typed into inputs travels with it. Password fields are excluded automatically; add the class gl-mask to any other field whose contents must not be sent.
Screen recording
An optional recording the visitor can start from the report form. The browser asks them which screen, window or tab to share, so it can capture more than your page. The recording is silent — the microphone is never captured and no audio is recorded. Recording stops automatically after 2 minutes.
Session replay
A playback of the browsing that led up to the report — mouse movements, clicks, scrolls and page changes, reconstructed as a video-like replay. This shows you exactly what the visitor did before the bug happened, without them needing to describe it. Session replay is off unless you switch it on for the widget; see Session replay — what it is and how to enable it.
Console logs
The last 500 messages your own code wrote with console.log, console.warn, console.error or console.info, each trimmed to 1,000 characters. Messages the browser itself prints — uncaught exceptions, CORS errors, failed file loads — are not included, so log the ones you care about explicitly. The same list also records a click trail: for every click, the element's tag, id, class and the first 40 characters of its visible text. If your buttons or links show customer data, that text is in the report.
Network logs
The last 30 network requests the page made, and for each one the URL, method, status code and timing — and the request headers, the request body and the response body. Authentication headers (Authorization, Cookie) are stripped automatically and never sent. Anything larger than about 150 KB is replaced with a placeholder instead of being sent, and requests to Yaplet's own API are excluded. Because request and response bodies routinely carry personal data, tokens and order details, use Yaplet.setNetworkLogsBlacklist([...]) to exclude whole hosts and Yaplet.setNetworkLogPropsToIgnore([...]) to strip named fields and headers before anything is sent.
Page and event history
Every page the visitor opened during their session, recorded with the full web address including anything in the query string, plus the start of the session and any events you record yourself with Yaplet.trackEvent. The last 500 entries are kept. Your team reads this alongside the console and network entries in the ticket's Event log.
Browser metadata
Automatically captured browser details:
- Browser name and version (e.g. Chrome 124, Safari 17)
- Full browser user-agent string
- Operating system (Windows, macOS, iOS, Android, Linux)
- Viewport dimensions (inner width and height)
- Current page URL at the time of the report
- User language setting
- How long the visitor's session had been running
Device metadata
Physical and display characteristics of the visitor's device:
- Screen width and height
- Device pixel ratio (important for retina/HiDPI display bugs)
- Mobile flag (whether the visitor was on a mobile device)
Custom metadata
Values your code attaches with Yaplet.setTicketAttribute() arrive with the report and show up among the ticket's answers — the current user ID, subscription plan, active experiment variant, cart value, or any application state relevant to debugging. For lasting facts about the person rather than this one report, pass custom data to Yaplet.identify() instead; see Send custom metadata with bug reports.
Linked chat conversation
If the visitor also has an open or recent chat conversation in Yaplet, the bug report ticket is linked to it. This means you can read the full chat context alongside the technical data — invaluable when the visitor already described the issue in their own words.