Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Effective Debugging and Error Handling for JavaScript

DZone's Guide to

Effective Debugging and Error Handling for JavaScript

Debugging your JavaScript with the proper tools can help you identify and log errors quickly. Find some debugging solutions and best practices here.

· Performance Zone ·
Free Resource

xMatters delivers integration-driven collaboration that relays data between systems, while engaging the right people to proactively resolve issues. Read the Monitoring in a Connected Enterprise whitepaper and learn about 3 tools for resolving incidents quickly.

Over the past few decades, JavaScript has evolved from a simple browser-based scripting to an advanced programing language, becoming an integral part of modern web applications. The advancement of web browsers, standardization, browser and third-party debugging and error handling solutions, enables both JavaScript development and error investigations in production more productive.











Debugging is a process for testing, finding the errors and reducing them from happening in future. Debugging JavaScript either requires having support for JavaScript debugger keyword, breakpoint support with web browser tools, or third-party tools. These tools range from browser plugins like Augury which is an Angular development and debugging extension for Chrome, third-party tools & more. It is also possible to use 'debugger' keyword support (depending on the browser type and version) and to freeze the code at a given point and investigate the issue. Let us look at few popular debugging and error handling tools.

Effective Debugging

Chrome Browser Tools

This is my favorite tool for JavaScript development. One of the features I often used is to map the local file system to the loaded file in JavaScript development environment so that it is possible to debug the file using breakpoints of debugger keyword while saving the changes to the files directly in Sources section in the browser. In addition, it is possible to use the console.log command to log any variables or text to the Chrome browser console to investigate any issues.

Postman

This is a tool, that is mostly used in debugging HTTP requests to servers. It can be used as an extension to browser tools to investigate server invocations to verify the request and response data. This helps to differentiate the issues that relate to JavaScript and server side.

Third-Party Services

There is a large number of emerging third-party services, that support JavaScript debugging and error handling, such as Bugsnag’s error monitoring platform. These tools provide insights of what's going on with the code running in various user's browsers so that it is possible to notify the development team with details of the issues with errors being logged. The main advantage of these types of services is that they provide the debugging and error handling remotely as a service so that it is possible to capture this valuable information to easily investigate an issue.

Online and Desktop IDEs

Using Integrated Development Environments (IDEs) is the most popular ways to debug JavaScript Applications today. With the tight integration with browser tools, it is now possible to debug the code either from Online or Desktop IDEs, where it is possible to use the features like error logging, using keywords to break the code and using breakpoints. The advantage of this approach over the rest of the tools is that it is possible to investigate the issue from all the angles including the backend code.

Effective Error Handling and Logs

Handling Log Levels

When developing JavaScript applications it is important to have different levels of logging enabled. For example, when the application runs in testing or staging environments, it is possible to enable detailed logging including application flow, important variables & etc. while in production environments only to log errors. To achieve these, either a third-party JavaScript library or a custom implementation is required to manage log-levels.

Log Transport

Since JavaScripts runs on client's browser, an error occurred remotely needs to be transferred to a new environment so that the development or ops team can investigate by accessing the logs.

Log Formats

It is also important to have a format which is possible to be extended in future to support any new log data formats as well as to keep uniformity across different logging messages.

Exception Handling

This is one of the key areas, where it is required to effectively handle the errors and show users with sufficient information about the situation and pass that information to the developer. This can also be handled based on Log Levels.



Discovering, responding to, and resolving incidents is a complex endeavor. Read this narrative to learn how you can do it quickly and effectively by connecting AppDynamics, Moogsoft and xMatters to create a monitoring toolchain.

Topics:
javascript ,debugging ,error handling ,tools ,performance ,error logging

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}