Instana Adds JavaScript Stack Trace Translation to Website Monitoring

January 30, 2020

Post

The majority of organizations will ship production JavaScript code both minified and bundled into a single source file in order to speed up page load time. When reading JavaScript stack traces in production this is problematic due to the original source code being obfuscated and results in the stack trace becoming unreadable and unusable.

Understanding Sourcemaps

This problem isn’t new, it’s solved by leveraging sourcemaps, and Instana now supports using these sourcemaps to parse where errors occur in the original source file. This helps developers who may not be able to reproduce the error on a development server or locally and will now easily be able to determine, in production, where the issue occurred.

When a javascript error occurs in minified code, typically you’ll see a stack trace which looks similar to the code snippet below. In this example, we can see the error occurred, which appears to be an undefined property, however, these stack traces aren’t of any use because the concatenated and minified code are obfuscated to the point where any context and understanding of the original code is lost.


(fig. 1) Minified JS stack trace

With a translated stack trace and Instana’s End User Monitoring it is now possible to see which user experienced the error, the activity which preceded the error, and where in the original source code the error occurred.

Full Understanding of JavaScript Stack Traces

When a source map exists for your production scripts, Instana will automatically translate the stack trace and present the precise location where the error occurred. In the example below, fig. 2, we can see that the error trace shows the error occuring in ProductDetails.js at 26:11 — without the sourcemap the trace would be reported as the minified and concatenated location in the code where the error occurred, which is impossible for developers to understand or troubleshoot as shown in fig. 3.


(fig. 2): javascript stack trace with source maps in place revealing the error occurred in ProductDetails.js


(fig. 3): stack trace without a source map, it is impossible to know which original source file the error occurred

Understand the Full Context When Issues Occur

With sourcemaps, it’s possible to see which user is impacted by an error, and in turn gives developers the information they need to replicate issues and where to investigate their source code for errors. In the example below, we can see which user is impacted, what actions preceded the error, and the precise location the error occurred. This information is critical when attempting to reproduce errors and debug production issues.

Getting Started

To get started with Instana’s JavaScript Stack Trace Translation, or any of the other amazing supported technologies, Instana offers a free 14 days trial. Sign up right now and see how quickly Instana discovers your technology stack and automatically provides insight never imagined possible. For our existing customers, you can learn how to implement JavaScript Stack Trace Translation by visiting the technical documentation.

Play with Instana’s APM Observability Sandbox

Developer, Engineering
This article is part of a blog series in which we look at back at five years of React usage at Instana. State management is one of the essential aspects of React...
|
Developer, Engineering, Product
Laravel is one of the most beloved web framework for PHP. It was developed as an alternative to CodeIgniter and today is the most popular PHP project on GitHub based on the...
|
Developer, Engineering
This article is part of a blog series in which we look at back at five years of React usage at Instana. Most of the early Instana employees moved to Instana from...
|

Start your FREE TRIAL today!

As the leading provider of Automatic Application Performance Monitoring (APM) solutions for microservices, Instana has developed the automatic monitoring and AI-based analysis DevOps needs to manage the performance of modern applications. Instana is the only APM solution that automatically discovers, maps and visualizes microservice applications without continuous additional engineering. Customers using Instana achieve operational excellence and deliver better software faster. Visit https://www.instana.com to learn more.