Troubleshooting "Uncaught RangeError: Maximum Call Stack Size Exceeded"

Recently, we encountered an '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 reports 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 facilitates engineers to understand thread dumps in a single view.

Fig: Flame Graph generated by fastThread tool

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

If JSON gets deeply nested, then the flame graph isn’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 is thrown, as depicted in the screenshot below.

Fig: Uncaught RangeError: Maximum call stack size exceeded thrown by Microsoft Edge Browser

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 was originating from the 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, 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.