- JavaScript Errors
- Errors Will Happen!
- Example
- JavaScript try and catch
- JavaScript Throws Errors
- The throw Statement
- Input Validation Example
- HTML Validation
- The finally Statement
- Syntax
- Example
- The Error Object
- Error Object Properties
- Error Name Values
- Eval Error
- Range Error
- Example
- Reference Error
- Example
- Syntax Error
- Example
- Type Error
- Example
- URI (Uniform Resource Identifier) Error
- Example
- Non-Standard Error Object Properties
- Complete Error Reference
- What are the Different Types of Errors in JavaScript?
- What are Errors in JavaScript?
- The try. catch. finally Statement
- Examples of errors in JavaScript
- The onerror() Method
- Conclusion
- See Also
JavaScript Errors
The try statement defines a code block to run (to try).
The catch statement defines a code block to handle any error.
The finally statement defines a code block to run regardless of the result.
The throw statement defines a custom error.
Errors Will Happen!
When executing JavaScript code, different errors can occur.
Errors can be coding errors made by the programmer, errors due to wrong input, and other unforeseeable things.
Example
In this example we misspelled «alert» as «adddlert» to deliberately produce an error:
try adddlert(«Welcome guest!»);
>
catch(err) document.getElementById(«demo»).innerHTML = err.message;
>
JavaScript catches adddlert as an error, and executes the catch code to handle it.
JavaScript try and catch
The try statement allows you to define a block of code to be tested for errors while it is being executed.
The catch statement allows you to define a block of code to be executed, if an error occurs in the try block.
The JavaScript statements try and catch come in pairs:
JavaScript Throws Errors
When an error occurs, JavaScript will normally stop and generate an error message.
The technical term for this is: JavaScript will throw an exception (throw an error).
JavaScript will actually create an Error object with two properties: name and message.
The throw Statement
The throw statement allows you to create a custom error.
Technically you can throw an exception (throw an error).
The exception can be a JavaScript String , a Number , a Boolean or an Object :
If you use throw together with try and catch , you can control program flow and generate custom error messages.
Input Validation Example
This example examines input. If the value is wrong, an exception (err) is thrown.
The exception (err) is caught by the catch statement and a custom error message is displayed:
Please input a number between 5 and 10:
function myFunction() const message = document.getElementById(«p01»);
message.innerHTML = «»;
let x = document.getElementById(«demo»).value;
try <
if(x.trim() == «») throw «empty»;
if(isNaN(x)) throw «not a number»;
x = Number(x);
if(x < 5) throw "too low";
if(x > 10) throw «too high»;
>
catch(err) message.innerHTML = «Input is » + err;
>
>
HTML Validation
The code above is just an example.
Modern browsers will often use a combination of JavaScript and built-in HTML validation, using predefined validation rules defined in HTML attributes:
You can read more about forms validation in a later chapter of this tutorial.
The finally Statement
The finally statement lets you execute code, after try and catch, regardless of the result:
Syntax
try <
Block of code to try
>
catch(err) <
Block of code to handle errors
>
finally <
Block of code to be executed regardless of the try / catch result
>
Example
function myFunction() <
const message = document.getElementById(«p01»);
message.innerHTML = «»;
let x = document.getElementById(«demo»).value;
try <
if(x.trim() == «») throw «is empty»;
if(isNaN(x)) throw «is not a number»;
x = Number(x);
if(x > 10) throw «is too high»;
if(x < 5) throw "is too low";
>
catch(err) <
message.innerHTML = «Error: » + err + «.»;
>
finally <
document.getElementById(«demo»).value = «»;
>
>
The Error Object
JavaScript has a built in error object that provides error information when an error occurs.
The error object provides two useful properties: name and message.
Error Object Properties
Property | Description |
---|---|
name | Sets or returns an error name |
message | Sets or returns an error message (a string) |
Error Name Values
Six different values can be returned by the error name property:
Error Name | Description |
---|---|
EvalError | An error has occurred in the eval() function |
RangeError | A number «out of range» has occurred |
ReferenceError | An illegal reference has occurred |
SyntaxError | A syntax error has occurred |
TypeError | A type error has occurred |
URIError | An error in encodeURI() has occurred |
The six different values are described below.
Eval Error
An EvalError indicates an error in the eval() function.
Newer versions of JavaScript do not throw EvalError. Use SyntaxError instead.
Range Error
A RangeError is thrown if you use a number that is outside the range of legal values.
For example: You cannot set the number of significant digits of a number to 500.
Example
let num = 1;
try num.toPrecision(500); // A number cannot have 500 significant digits
>
catch(err) document.getElementById(«demo»).innerHTML = err.name;
>
Reference Error
A ReferenceError is thrown if you use (reference) a variable that has not been declared:
Example
let x = 5;
try x = y + 1; // y cannot be used (referenced)
>
catch(err) document.getElementById(«demo»).innerHTML = err.name;
>
Syntax Error
A SyntaxError is thrown if you try to evaluate code with a syntax error.
Example
try <
eval(«alert(‘Hello)»); // Missing ‘ will produce an error
>
catch(err) <
document.getElementById(«demo»).innerHTML = err.name;
>
Type Error
A TypeError is thrown if you use a value that is outside the range of expected types:
Example
let num = 1;
try num.toUpperCase(); // You cannot convert a number to upper case
>
catch(err) document.getElementById(«demo»).innerHTML = err.name;
>
URI (Uniform Resource Identifier) Error
A URIError is thrown if you use illegal characters in a URI function:
Example
try <
decodeURI(«%%%»); // You cannot URI decode percent signs
>
catch(err) <
document.getElementById(«demo»).innerHTML = err.name;
>
Non-Standard Error Object Properties
Mozilla and Microsoft define some non-standard error object properties:
fileName (Mozilla)
lineNumber (Mozilla)
columnNumber (Mozilla)
stack (Mozilla)
description (Microsoft)
number (Microsoft)
Do not use these properties in public web sites. They will not work in all browsers.
Complete Error Reference
For a complete reference of the Error object, go to our Complete JavaScript Error Reference.
What are the Different Types of Errors in JavaScript?
In the above example, an opening bracket is missing in the code, which invokes the Syntax error constructor.
- Reference Error — In a case where a variable reference can’t be found or hasn’t been declared, then a Reference error occurs.
- Type Error — An error occurs when a value is used outside the scope of its data type.
- Evaluation Error — Current JavaScript engines and EcmaScript specifications do not throw this error. However, it is still available for backward compatibility. The error is called when the eval() backward function is used, as shown in the following code block:
- RangeError — There is an error when a range of expected values is required, as shown below:
- URI Error — When the wrong character(s) are used in a URI function, the error is called.
- Internal Error — In the JS engine, this error occurs most often when there is too much data and the stack exceeds its critical size. When there are too many recursion patterns, switch cases, etc., the JS engine gets overwhelmed.
Output: Its output will be like InternalError .
What are Errors in JavaScript?
JavaScript code can encounter different errors when it is executed. Errors can be caused by programming mistakes, incorrect input, or other unforeseeable events.
Errors in programming can be divided into two types. These are:
- Program Error: — In this case, the program might need to handle this error through its error handlers. An example could be network disconnection, timeout error, etc.
- Developer Error: — The programmer has caused an error. It can be a syntax error, a logical error, a semantic error, etc.
The try. catch. finally Statement
Exception handling has been added to JavaScript in recent versions. Exceptions are handled by JavaScript’s try. catch. finally construct and throw operator.
Syntax
Examples of errors in JavaScript
After the try block, there must either be a catch block or a finally block (or both). The catch block is executed if an exception occurs in the try block. After try/catch, finally is executed unconditionally. Let’s see an example:
Output: The below statements will be shown in an alert box.
The throw statement can be used to raise built-in exceptions or your customized ones.
Output: The below statement will be shown in an alert box.
The onerror() Method
In JavaScript, error handling was simplified by the onerror event handler. If there is an exception on the page, the error event will be fired on the window object.
There are three pieces of information provided by the onerror event handler that identifies the error’s exact nature.
Error message − A message similar to the one displayed by the browser when an error occurs. URL − The file where the error occurred.
Line number− This is the line number in the URL where the error occurred.
Conclusion
- An error is a statement that interferes with the proper operation of the program.
- There are 7 types of JavaScript errors: Syntax error , Reference Error , Type Error , Evaluation Error , RangeError , URI Error and Internal Error .
- Errors in Javascript can be handled using the try. catch. finally construct as well as the throw operator .
- The article allows you to easily identify the source of an error, whether it occurs in your terminal or browser .