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
Selected Reading
What is onerror() Method in JavaScript?
The onerror event handler was the first feature to facilitate error handling in JavaScript. The error event is fired on the window object whenever an exception occurs on the page.
Syntax
window.onerror = function(message, source, lineno, colno, error) {
// Handle the error
return true; // Prevents default browser error handling
};
Parameters
The onerror handler receives five parameters:
- 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 (if available)
Example: Basic Error Handling
Here's a complete example demonstrating the onerror method:
<html>
<head>
<script>
window.onerror = function(message, source, lineno, colno, error) {
alert("Error caught: " + message + " at line " + lineno);
return true; // Prevent default error handling
};
function myFunc() {
// This will cause an error
undefinedVariable.someMethod();
}
</script>
</head>
<body>
<p>Click the button to trigger an error:</p>
<form>
<input type="button" value="Click Me" onclick="myFunc();" />
</form>
</body>
</html>
Advanced Example: Logging Error Details
<html>
<head>
<script>
window.onerror = function(message, source, lineno, colno, error) {
console.log("Error Details:");
console.log("Message: " + message);
console.log("Source: " + source);
console.log("Line: " + lineno);
console.log("Column: " + colno);
if (error) {
console.log("Stack: " + error.stack);
}
return false; // Allow default error handling
};
function causeError() {
throw new Error("This is a custom error!");
}
</script>
</head>
<body>
<p>Open console and click to see detailed error logging:</p>
<button onclick="causeError()">Cause Error</button>
</body>
</html>
Return Value
The onerror handler can return:
- true: Prevents the default browser error handling
- false or nothing: Allows default error handling to proceed
Modern Alternative: addEventListener
You can also use addEventListener for more modern error handling:
<script>
window.addEventListener('error', function(event) {
console.log('Error caught:', event.error.message);
console.log('Line:', event.lineno);
});
// Trigger an error
setTimeout(function() {
nonExistentFunction();
}, 1000);
</script>
Key Points
- onerror catches JavaScript runtime errors globally
- It provides detailed information about where and why errors occurred
- Returning true prevents default browser error dialogs
- Modern applications often prefer try/catch blocks or addEventListener
Conclusion
The onerror method provides a simple way to handle JavaScript errors globally. While useful for debugging and error logging, modern error handling often combines onerror with try/catch blocks for comprehensive error management.
Updated on: 2026-03-15T23:18:59+05:30
2K+ Views
Advertisements