Fast thread

Recently we encountered ‘Uncaught RangeError: Maximum call stack size exceeded’ error when loading our application in a web browser. In this blog post, let’s discuss what triggered this problem, explore how different browsers respond to it and how we went about solving it.

What triggered ‘Uncaught RangeError’?

Our fastThread web application parses java thread dumps to generate comprehensive report containing insightful metrics and graphs. One of the sections in the report condenses the entire thread dump into a single flame graph, as shown below. This powerful visualization facilitate engineers to understand thread dump in a single view.

To generate this FlameGraph we are using an open-source java script [RL1] library. This library uses a JSON as input. Sometime if thread dump is deeply nested, then the input JSON that we produced also becomes a deeply nested. Here is the sample JSON structure.

If JSON gets deeply nested, then flame graph wasn’t getting loaded in the Microsoft Edge browser (version 119.0.x). In the Microsoft Edge browser console, we were seeing the ‘Uncaught RangeError: Maximum call stack size exceeded’ error thrown as depicted in the below screenshot.

Chrome and FireFox behavior 

Interestingly, this ‘Uncaught RangeError: Maximum call stack size exceeded’ error did not manifest in other widely used browsers such as Google Chrome or Mozilla Firefox. Both Chrome and Firefox successfully loaded the Flame graph without encountering any errors. Thus, the challenge we faced turned out to be specific to the Microsoft Edge browser.

What is the solution (aka hack)?

Since this problem was specific to Microsoft Edge Browser, we weren’t sure about the proper solution. Thus, we came up with this interim workaround (aka hack). If the request were originating from Microsoft Edge browser, then we started to restrict the length of the input JSON. We didn’t allow the JSON nesting structure to go more than 450 iterations. For other browsers we didn’t enforce this restriction. By restricting the iterations count, we wouldn’t be able to present entire thread dump information in the Flame Graph, however it’s better than not loading the Flame Graph at all.

Identifying Browser type using ‘user-agent’ HTTP header

‘user-agent’ is an element that is present in the HTTP header. This element contains the information about the request originating browser type. Since our application was developed in java language, this information was present in the HttpServletRequest object.

The Java code snippet below demonstrates how we identified the browser type using the ‘user-agent’ HTTP header in the HttpServletRequest object:

public class MyServlet extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response) {
         // Get the value of the "User-Agent" header
        String userAgent = request.getHeader("user-agent");
        System.out.println(userAgent);
    }
}

Based on the browser type ‘user-agent’ information will vary. Below are some of the outputs when tried with popular browsers:

Chrome Browser: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.2.4410) Gecko/20110902 Firefox/3.6
Edge Browser : Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36 Edg/119.0.0.0 
Firefox: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/119.0[RL4]

Conclusion

In summary, by implementing a targeted workaround for Microsoft Edge and leveraging the ‘user-agent’ header, we successfully resolved the “Uncaught RangeError” issue, ensuring the seamless loading of the Flame Graph across all browsers in our fastThread web application.