Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to write a global error handler in JavaScript?
Global error handlers in JavaScript allow you to catch unhandled exceptions and errors that occur anywhere in your application. This is essential for debugging and providing better user experience.
Using window.onerror
The window.onerror event handler catches JavaScript runtime errors, including syntax errors and uncaught exceptions.
Syntax
window.onerror = function(message, source, lineno, colno, error) {
// Handle the error
return true; // Prevents default browser error handling
};
Parameters
| Parameter | Description |
|---|---|
message |
Error message |
source |
URL of the script where error occurred |
lineno |
Line number where error occurred |
colno |
Column number where error occurred |
error |
Error object with stack trace |
Example
<!DOCTYPE html>
<html>
<head>
<title>Global Error Handler</title>
</head>
<body>
<h1>Global Error Handler Demo</h1>
<div id="output"></div>
<script>
// Set up global error handler
window.onerror = function(message, source, lineno, colno, error) {
const errorInfo = `
Error Message: ${message}
Source: ${source}
Line: ${lineno}
Column: ${colno || 'N/A'}
Stack: ${error ? error.stack : 'N/A'}
`;
document.getElementById('output').innerHTML =
'<pre style="color: red; background: #f5f5f5; padding: 10px;">' +
errorInfo + '</pre>';
return true; // Suppress default browser error dialog
};
// Trigger an error after 1 second
setTimeout(function() {
// This will cause a syntax error
eval("invalid syntax {");
}, 1000);
</script>
</body>
</html>
Using addEventListener for Unhandled Promise Rejections
For modern applications, also handle unhandled promise rejections:
<!DOCTYPE html>
<html>
<head>
<title>Promise Error Handler</title>
</head>
<body>
<div id="promise-output"></div>
<script>
// Handle unhandled promise rejections
window.addEventListener('unhandledrejection', function(event) {
document.getElementById('promise-output').innerHTML =
'<div style="color: red; padding: 10px; background: #ffe6e6;">' +
'Unhandled Promise Rejection: ' + event.reason +
'</div>';
event.preventDefault(); // Prevent console error
});
// Trigger an unhandled promise rejection
setTimeout(function() {
Promise.reject('Something went wrong!');
}, 1500);
</script>
</body>
</html>
Complete Error Handling Setup
// Complete global error handling setup
window.onerror = function(message, source, lineno, colno, error) {
console.error('JavaScript Error:', {
message: message,
source: source,
line: lineno,
column: colno,
stack: error ? error.stack : null
});
// Log to external service or show user-friendly message
return true;
};
window.addEventListener('unhandledrejection', function(event) {
console.error('Unhandled Promise Rejection:', event.reason);
// Handle the rejection
event.preventDefault();
});
Best Practices
Return true from window.onerror to suppress the browser's default error dialog. Use event.preventDefault() for unhandled promise rejections. Always log errors for debugging and consider showing user-friendly error messages instead of technical details.
Conclusion
Global error handlers provide a safety net for catching unhandled errors in JavaScript applications. Use both window.onerror and unhandledrejection events for comprehensive error handling.
2K+ Views
