Moving right along with our JavaScript Error Handling series, we next come to the Invalid Array Length error. The Invalid Array Length error occurs whenever an Array object has a negative length value or a value larger than the maximum.
Below, we’ll examine what causes an Array Length error and explore how to capture and handle this error.
The Technical Rundown
- All JavaScript error objects are descendants of the Error object, or an inherited object therein.
- The RangeError object is inherited from the Error object.
- The Invalid Array Length error is a specific type of RangeError object.
- The RangeError object is inherited from the Error object.
When Causes an Invalid Array Length Error?
As mentioned above, Invalid Array Length errors occur when JavaScript code attempts to generate an Array or ArrayBuffer object where the first and only parameter, arrayLength, is an invalid number.
The validity of an arrayLength is straightforward. It must obey the following ruleset:
- Be an integer.
- Be between zero and 232-1 (inclusive).
Any other value provided to an Array or ArrayBugger (that is also a number), will throw an Invalid Array Length error.
Let’s see this in action by generating this error for ourselves.
An Example with a Negative Number
In this example, we created a new Array with the arrayLength set to an invalid number, -1.
We’re using a basic try-catch to grab any errors and then a printError function to output our error messages based on whether they are expected or not (explicit or inexplicit).
var printError = function(error, explicit) {
console.log(`[${explicit ? 'EXPLICIT' : 'INEXPLICIT'}] ${error.name}: ${error.message}`);
}
try {
var items = Array(-1);
console.log(`Length is: ${items.length}`);
} catch (e) {
if (e instanceof RangeError) {
printError(e, true);
} else {
printError(e, false);
}
}
Sure enough, our arrayLength is invalid, with the output throwing this:
[EXPLICIT] RangeError: Invalid array length
An Example with a Large Number
We can also try an excessively large number, greater than the 232-1 limit, with the same result:
var printError = function(error, explicit) {
console.log(`[${explicit ? 'EXPLICIT' : 'INEXPLICIT'}] ${error.name}: ${error.message}`);
}
try {
var items = Array(Math.pow(2, 32));
console.log(`Length is: ${items.length}`);
} catch (e) {
if (e instanceof RangeError) {
printError(e, true);
} else {
printError(e, false);
}
}
No matter what, if the output doesn’t fall within the limitations, your code will throw this RangeError:
[EXPLICIT] RangeError: Invalid array length
How to Properly Capture an Array Length Error
While it’s now simple enough to see what causes an Invalid Array Length error, we need to be careful about capturing it properly. Since its base object type is simply a RangeError, if we stick to catching instances of a RangeError only, we’ll also catch any other types of RangeErrors that might occur.
To explicitly capture an Invalid Array Length error in this case, we’ll need a bit of extra code to determine whether the RangeError we’re catching is, in fact, this error.
var printError = function(error, explicit) {
console.log(`[${explicit ? 'EXPLICIT' : 'INEXPLICIT'}] ${error.name}: ${error.message}`);
}
try {
var items = Array(-1);
console.log(`Length is: ${items.length}`);
} catch (e) {
if (e instanceof RangeError) {
if (e.message.toLowerCase().indexOf('invalid array') !== -1) {
printError(e, true);
} else {
printError(e, false);
}
} else {
printError(e, false);
}
}
We’ve now thrown in a simple check within the error .message property to ensure it contains the phrase ‘invalid array’ somewhere in the message text. If so, that is our expected Invalid Array Length error. This means that when a different RangeError is produced, there’s no need to worry that we’re responding to the wrong type.
Skip the Extra Steps With Airbrake and Performance Monitoring
As you saw, there are extra steps when it comes to finding certain types of RangeErrors. With Airbrake Error and Performance Monitoring, you can skip those additional steps and find the error immediately, right down to the line of broken code.
Check out Airbrake’s JavaScript Error Handling tool to take your project to the next level! Or, you can create your free dev account here.
Note: We published this post in December 2016 and recently updated it in April 2022.