August 16th, 2017 • By Jason Skowronski
In the screenshot below, we see a timeline showing a complete story of how the user encountered an error. First they loaded the page, typed their email address into the sign up form, validated the email, navigated to an onboarding page, and then the error occurred. This gives clear context on what caused the error and which component needs to be fixed.
If you’re a web developer, you know it can be difficult to reproduce unusual errors and problems reported by users. There are many variables including inconsistent browser environments, unexpected user behaviors, network calls, state changes in the application, and more. Reproducing problems costs your team time in development, QA and support. Unfortunately, if your team cannot reproduce the problem it’s often put on the back burner which can leave users hanging with no resolution.
Having enough contextual information can save you time because you can quickly see the cause of the problem without having to manually test different scenarios or debug your code. It also improves time to resolution because you don’t have to ask for the user for clarification about what they were doing, the complete context will be tracked automatically and available instantly.
Rollbar helps you fix impactful issues faster by giving you additional context, including the following data:
|Page load events||Tells you when the DOM content loaded and the full page loaded, to help distinguish errors before and after page load|
|User behavior||What users clicked on, typed into input boxes, or navigated routes in single page apps|
|Console messages||Log events and error messages that occurred just before the error|
|Network activity||XHR and fetch calls to APIs on own server or a third party’s|
|Rollbar exceptions and messages||If other exceptions or messages occurred leading up to this one, we'll include links to them in the telemetry timeline|
An example of how to use custom Rollbar messages is to you can track is the full response data from API calls. This is particularly useful for seeing the status code from the server, which could indicate a problem processing the request due to rate limiting, authentication problems, and more.
Additionally, if you track a unique identifier such as a transaction ID you will be able to trace the error to a specific request on the server side. This provides you additional information to debug server-side problems with database connections, business logic, etc.
Unlike with logs, you don’t have to worry about having too much debug information tracked through breadcrumbs because the information is only sent in the case of an error. Providing enough debug information may help you fix edge cases even if you can’t easily reproduce it in your own browser.
npm update --save rollbar
You can see the telemetry data in the Rollbar application on the error item view. The first tab is the Traceback tab, and the telemetry data will be shown at the bottom when data is available for the error item. You will be able to see more by clicking on the Occurrences tab. Seeing commonalities between multiple occurrences can help you identify what common conditions could be associated with the root cause.