Error monitoring and logging techniques in JavaScript

JavaScript error monitoring and logging are critical to maintaining application stability and performance. In this article, we’ll explore advanced techniques that can help you effectively monitor and log errors in your JavaScript code. We'll cover global error handlers, try/catch blocks, stack traces, logging libraries, custom error classes, error reporting and notifications, and error tracking in production.

Global error handler

Global error handlers allow you to catch and handle errors that occur while your JavaScript application is running. By leveraging window.onerror and window.onunhandledrejection, you can log or report errors and exceptions.

Example

window.onerror = function(message, url, line, column, error) {
   console.error("An error occurred:", message);
   console.error("URL:", url);
   console.error("Line:", line);
   console.error("Column:", column);
   console.error("Error object:", error);
};

window.onunhandledrejection = function(event) {
   console.error("Unhandled promise rejection:", event.reason);
};

illustrate

The provided code sets a global error handler in JavaScript. window.onerror catches unhandled errors and logs the error message, script URL, line and column numbers, and error object. window.onunhandledrejection captures unhandled Promise rejections and logs the rejection reason. These handlers help identify and log errors that occur while the web page is running.

Output

An error occurred: ReferenceError: someVariable is not defined
URL: https://example.com/js/app.js
Line: 42
Column: 15
Error object: ReferenceError: someVariable is not defined

Try/Catch Block

Using try/catch blocks allows you to handle specific exceptions and gracefully recover from errors that might occur within a block of code.

Example

try {
   // Code that might throw an error
   const result = someFunction();
   console.log("Result:", result);
} catch (error) {
   console.error("An error occurred:", error);
}

illustrate

The provided code uses try/catch blocks to handle potential errors in JavaScript. The try block contains code that may raise an error, and if an error occurs, the catch block is executed, which logs the error message using console.error().

Output

An error occurred: TypeError: someFunction is not a function

Stack trace

Stack traces provide valuable information about the sequence of function calls that caused the error. They help understand the source of errors and diagnose problems efficiently.

Example

function foo() {
   bar();
}

function bar() {
   throw new Error("Something went wrong");
}

try {
   foo();
} catch (error) {
   console.error("Error stack trace:", error.stack);
}

illustrate

The code defines two functions: foo() and bar(). When foo() is called, it calls bar(), which intentionally throws an error using throw new Error().

The code is contained in a try/catch block. When an error is thrown inside the try block, the catch block catches the error and stores the error object in the error variable.

The catch block logs the stack trace of the error using the console.error() and error.stack properties.

Output

Error stack trace: Error: Something went wrong
   at bar (script.js:5:9)
   at foo (script.js:2:3)
   at script.js:10:3

Record library

Logging libraries like Sentry, Rollbar, and LogRocket provide advanced error monitoring capabilities. They simplify error tracking, aggregation, and reporting, and often provide integration with frameworks and services.

Example

// Using Sentry logging library
Sentry.init({
   dsn: 'your-sentry-dsn',
   // Other configuration options
});

try {
   // Code that might throw an error
} catch (error) {
   Sentry.captureException(error);
}

illustrate

The code initializes the Sentry log library and sets up error capture. Within the try block, you can place code that may throw errors. If an error occurs, the catch block uses Sentry.captureException() to send the error to Sentry for recording and analysis.

Custom error class

Extending the built-in Error class allows you to create custom error classes with additional properties and methods. This makes error handling more informative and easier.

Example

Consider the code shown below .

class MyCustomError extends Error {
   constructor(message, customProperty) {
      super(message);
      this.customProperty = customProperty;
   }
}

try {
   throw new MyCustomError("Something went wrong.", "Custom data");
} catch (error) {
   console.error("Custom property:", error.customProperty);
}

illustrate

This code defines a custom error class MyCustomError that extends Error. Inside the try block, it throws a MyCustomError instance with a specific error message and custom properties. In the catch block, it logs the custom properties of the caught error object.

Output

Custom property: Custom data

Error reporting and notification

Integrate your error monitoring system with notification services like email or chat platforms to receive real-time alerts when critical errors occur.

Example

Consider the code shown below.

function sendErrorNotification(error) {
   // Code to send an error notification via email or chat
}

try {
   // Code that might throw an error
} catch (error) {
   sendErrorNotification(error);
}

illustrate

The code defines a function sendErrorNotification(), which accepts an error parameter and contains the logic to send error notifications, such as via email or chat.

In a try block you can place code that may throw an error. If an error occurs, the catch block is executed and the sendErrorNotification() function is called with the error object as a parameter to trigger the error notification process.

This code demonstrates how to handle errors by calling a custom function to send an error notification when an error occurs within a try block. It allows proactive notification and response to errors, helping to troubleshoot and resolve issues promptly.

in conclusion

Effective error monitoring and logging techniques are critical to maintaining the stability and performance of JavaScript applications. You can detect, diagnose, and resolve issues more efficiently by leveraging global error handlers, try/catch blocks, stack traces, logging libraries, custom error classes, error reporting and notifications, and error tracing in production. Remember to strike a balance between logging details and data sensitivity, and review logs regularly to proactively maintain and improve your application.

The above is the detailed content of Error monitoring and logging techniques in JavaScript. For more information, please follow other related articles on the PHP Chinese website!