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.

Network Events

The tracker script will also watch the network for AJAX requests.

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 also 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.

A Working Example

The following is a simple example of the kinds of things you’d see. The code is just a JsFiddle and you can play with it here: http://jsfiddle.net/sesm0eqa/

Here is the fiddle:

And here is the resulting timeline after the user first failed to enter any information, and then added their name. Note, there was an intentional error but you could have just as easily tracked an event manually with trackJs.track()