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 Catch a ReferenceError with onerror?
JavaScript's onerror event provides a global way to catch errors, including ReferenceErrors, that occur during script execution. This is particularly useful for handling errors that might not be caught by traditional try-catch blocks.
What is ReferenceError?
A ReferenceError occurs when trying to access a variable or object that doesn't exist. This commonly happens with misspelled variable names or accessing variables before they're declared.
Example of ReferenceError
<!DOCTYPE html>
<html>
<body>
<div id="result"></div>
<script>
try {
let sum = a + 2; // 'a' is not defined
document.getElementById("result").innerHTML = sum;
} catch(e) {
document.getElementById("result").innerHTML = "Error: " + e.message;
}
</script>
</body>
</html>
Error: a is not defined
What is onerror?
The onerror event handler is a global error catcher that fires when JavaScript errors occur. It captures errors that might escape try-catch blocks or occur in different execution contexts.
Syntax
window.onerror = (message, source, lineno, colno, error) => {
// Handle error
};
Parameters
message: A string containing the error message
source: A string with the URL of the script where the error occurred
lineno: Line number where the error occurred
colno: Column number where the error occurred
error: The Error object (contains stack trace and other details)
Catching ReferenceError with onerror
<!DOCTYPE html>
<html>
<head>
<title>Catching ReferenceError with onerror</title>
</head>
<body>
<h4>How to catch a ReferenceError with onerror?</h4>
<div id="result"></div>
<script>
window.onerror = (message, source, lineno, colno, error) => {
let errorInfo = `
Error: ${message}<br>
Line: ${lineno}<br>
Column: ${colno}<br>
Type: ${error.name}
`;
document.getElementById("result").innerHTML = errorInfo;
return true; // Prevents default browser error handling
};
// This will trigger a ReferenceError
let sum = undefinedVariable + 2;
</script>
</body>
</html>
Error: undefinedVariable is not defined Line: 15 Column: 19 Type: ReferenceError
Using addEventListener for Error Handling
Modern JavaScript also supports using addEventListener for more flexible error handling:
<!DOCTYPE html>
<html>
<body>
<div id="output"></div>
<script>
window.addEventListener('error', (event) => {
document.getElementById("output").innerHTML =
`Caught ${event.error.name}: ${event.error.message}`;
});
// Trigger ReferenceError
console.log(nonExistentVariable);
</script>
</body>
</html>
Caught ReferenceError: nonExistentVariable is not defined
Key Differences
| Method | Scope | Return Value Effect |
|---|---|---|
try-catch |
Local block only | N/A |
window.onerror |
Global | true prevents browser error display |
addEventListener('error') |
Global | preventDefault() to suppress |
Conclusion
The onerror event provides a global safety net for catching ReferenceErrors and other JavaScript errors. Use it alongside try-catch for comprehensive error handling in your applications.
225 Views
