Seeing the error message and stack trace is important, but it is equally important to understand the context that led to the error. To that end, TrackJS provides a unique solution called the Telemetry Timeline.
Here’s a sample of what it might look like:
You can use console.log, console.info, console.error etc. These logs messages will be buffered and emitted with the error for helpful debugging context. If the message is a stringified JSON object, we will format and highlight it for easier debugging.
The tracker script will also watch the network for AJAX requests. Query string parameters are helpfully broken apart for legibility.
Please check out the tips and tricks section for options to enhance this by also logging headers and request/response bodies. (By default we do not track those things since there are privacy implications)
The tracker script monitors input fields for changes and records that information in the timeline. Don’t worry, we never track the actual user input, just characteristics about it, and the attributes of the element they interact with. HTML attributes are also broken apart for easier reading.
In single page applications, navigation is typically accomplished with the HTML5 history API. We record pushState and popState events, and include them in the timeline so you can see where user’s were throughout their browsing session.
Recreating the Error
When we put all these timeline events together in descending chronological order, we get an excellent set of reproduction steps. The goal is to help you find and fix the errors your users are seeing, after all.
In the timeline below, we can see the user encountered an error. However, before that error occurred, we can see that the console was active, because they were entering text in to a text box and clicking a button. This additional context makes it easy to find and fix the offending code.