Deciphering Error Messages and Performance Leaks

Of course, no good language is complete without a means to detect and diagnose problems in your code. JavaScript provides rich error messages that are incredibly powerful and intuitive, but there are a few caveats and tips as you tiptoe through bug-ridden code.

As you probably know, finding a problem in your own code (a "bug") is one of the most frustrating events to occur to a developer. We pride ourselves on our code's ability to do its task, but sometimes we don't account for edge and corner cases. Additionally, error messages give us important information as we're in the process of coding by giving us important diagnostic information. Luckily, there are tools that can help us understand what's going on in our JavaScript.

Let's explore.

The following topics will be covered in this chapter:

...

Technical requirements

Be prepared to work through the Chapter-9 examples from GitHub at https://github.com/PacktPublishing/Hands-on-JavaScript-for-Python-Developers/tree/master/chapter-9/.

We'll be working with the developer tools in the browser, and for the purposes of illustration, the instructions and screenshots will be from Google Chrome. If you're familiar with tools in another browser, however, the concepts are similar. You may also want to have a JSON parsing extension added to Chrome if you haven't already done so.

There are no specific hardware requirements for this chapter.

The Error object

Let's take a look at https://github.com/PacktPublishing/Hands-on-JavaScript-for-Python-Developers/tree/master/chapter-9/error-object. Open the index.html file and examine the JavaScript console. The first function, typoError, is invoked and throws a wonderful error.

It should look like this:

Figure 9.1 - Error console

Now, let's look at the code for our function in index.js:

const typoError = () => {
  cnosole.error('my fault')
}

OK! It's a simple typo, as we've all done: it should be console.error instead of cnosole.error. If you've never made a typo in code… you're a unicorn. The error message we see in the console makes it easy to see what the error is and on what line of code it lives: line 2. Now, something interesting to note is that after calling typoError() toward the end of the file, we also have an invocation to another function but it doesn't fire. We know this because (spoiler alert) it also throws errors...

Using debuggers and other tools

Many web developers choose to use Google Chrome as their browser of choice as it provides a wealth of developer tools out of the box. If Chrome is not your browser of choice, here are a few browsers that have developer tools that are similar.

Safari

Safari ships with developer mode off by default, so if you use Safari, toggle the Develop menu in the Advanced pane in the preferences at the bottom:

Figure 9.7 - Adding the Develop Menu to Safari

Now, you'll have a Develop menu with tools that may render error messages slightly differently than Chrome, but that are still accessible.

Internet Explorer and Microsoft Edge

With all sincerity and only a little bit of prejudice, I would recommend not using Internet Explorer or Microsoft Edge for JavaScript development. It is important to test your code cross-browser, but I find the developer tools provided in IE and Edge to be lacking. For example, let's take a look at the exact same page in Edge&apos...

Accommodating JavaScript's performance limitations

As with any language, there are ways to write JavaScript and better ways to write it. What is not as obvious in other languages, however, is the direct implications of your code for the user experience of a website. Complicated, inefficient code can clog up a browser, eat CPU cycles, and, in some cases, even crash the browser.

Take a look at this simple four-line snippet by Talon Bragg from https://hackernoon.com/crashing-the-browser-7d540beb0478:

txt = "a";
while (1) {
    txt = txt += "a"; // add as much as the browser can handle
}

Warning: do not attempt to run this in a browser! If you're curious about what this does, it will eventually create an out-of-memory exception in the browser that will kill the tab with a message that the page has become unresponsive. Why is this? Our while loop has a simple truthy value for its condition, so it will continue adding "a" to the string text until the memory...

Summary

We all make mistakes when coding, and knowing how to find, diagnose, and debug those problems is a key skill in any language. In this chapter, we've taken a look at how the Error object and the console provide us with rich diagnostic information on where an error occurred, what details are piggybacking on the object, and how to read them. Don't forget that, sometimes, the error may look one way on the surface (our JSON error in The Error Object section), and don't be afraid to experiment with tracing through your code with console statements and breakpoints.

Since JavaScript runs client-side, it's important to keep in mind the performance capacity of your users. There are many best practices when writing JavaScript, such as reusing variables (especially DOM-related ones), so always be sure to keep your code DRY (Don't Repeat Yourself).

In the next chapter, we'll wrap up working with the frontend and understand how JavaScript truly is the ruler of...

Questions

1. What is the root cause of memory problems?
   1. The variables in your program are global.
   2. Inefficient code.
   3. JavaScript's performance limitations.
   4. Hardware inadequacies.

2. When using DOM elements, you should store references to them locally versus always accessing the DOM.
   1. True
   2. False
   3. True when using them more than once
3. JavaScript is pre-processed on the server side, and thus more efficient than Python.
   1. True
   2. False
4. Setting breakpoints can't find memory leaks.
   1. True
   2. False
5. It's a good idea to store all variables in the global namespace as they're more efficient to reference.
   1. True
   2. False

Further reading

For more information, you can use the following links:

• Isolating Memory Leaks with Chrome's Allocation Timeline: https://blog.logrocket.com/isolating-memory-leaks-with-chromes-allocation-timeline-244fa9c48e8e/
• Garbage Collection: https://en.wikipedia.org/wiki/Garbage_collection_(computer_science)
• JavaScript Performance: https://www.w3schools.com/js/js_performance.asp
• Memory Problems: https://developers.google.com/web/tools/chrome-devtools/memory-problems
• Node.js Memory Leak Detection: https://medium.com/tech-tajawal/memory-leaks-in-nodejs-quick-overview-988c23b24dba