Telemetry Timeline

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.

You can think of it as a Black Box like in an airplane, but for JavaScript errors. We keep a running log of things emitted to the console, the state of network requests made by the page, and the actual interactions from the user. When an error occurs we put all this information in a timeline to give you the best possible chance to reproduce and fix the error.

Here’s a sample of what it might look like:

Console Events

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.

Network Events

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)

Visitor Events

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.