#20 JavaScript Code Snippets: Error Handling (try, catch, finally, throw, custom errors, async error handling)

try {
 console.log("A");
}
catch {
 console.log("B");
}

No error occurs, so catch is skipped.

try {
 unknown();
}
catch {
 console.log("Caught");
}

The error is handled by catch.

try {
 throw new Error(
  "Oops"
 );
}
catch(error) {
 console.log(
  error.message
 );
}

Error.message contains the supplied message.

try {
 throw "JS";
}
catch(error) {
 console.log(error);
}

JavaScript allows throwing any value.

try {
 console.log("A");
}
finally {
 console.log("B");
}

finally always executes.

try {
 throw new Error(
  "X"
 );
}
catch {
 console.log("Y");
}
finally {
 console.log("Z");
}

catch runs first, then finally.

try {
 JSON.parse("{");
}
catch(error) {
 console.log(
  error.name
 );
}

Invalid JSON throws a SyntaxError.

try {
 null.test();
}
catch(error) {
 console.log(
  error.name
 );
}

Calling a method on null causes a TypeError.

try {
 console.log(x);
}
catch(error) {
 console.log(
  error.name
 );
}

x is not defined.

try {
 throw new TypeError(
  "Wrong"
 );
}
catch(error) {
 console.log(
  error.name
 );
}

The thrown error is a TypeError instance.

try {
 throw new Error(
  "JS"
 );
}
catch(error) {
 console.log(
  typeof error
 );
}

Error instances are objects.

try {
 throw new Error(
  "React"
 );
}
catch(error) {
 console.log(
  error instanceof Error
 );
}

Error objects inherit from Error.

try {
 console.log("A");
 throw new Error();
 console.log("B");
}
catch {
 console.log("C");
}

Execution stops after throw.

try {
 throw new Error();
}
catch {
 console.log("Catch");
}
finally {
 console.log("Finally");
}

finally executes after catch.

try {
 throw "Hello";
}
catch(error) {
 console.log(
  typeof error
 );
}

The thrown value is a string.

class MyError
 extends Error {}

try {
 throw new MyError(
  "Custom"
 );
}
catch(error) {
 console.log(
  error instanceof
  MyError
 );
}

Custom errors inherit from Error.

class MyError
 extends Error {}

try {
 throw new MyError(
  "Oops"
 );
}
catch(error) {
 console.log(
  error.name
 );
}

By default, inherited Error classes have name "Error" unless explicitly changed.

try {
 try {
  throw "A";
 }
 catch {
  console.log("B");
 }
}
catch {
 console.log("C");
}

The inner catch handles the error completely.

try {
 try {
  throw "A";
 }
 catch {
  console.log("B");
  throw "C";
 }
}
catch(error) {
 console.log(error);
}

The inner catch rethrows another error.

try {
 throw "JS";
}
catch(error) {
 throw error;
}

The error is rethrown and remains unhandled.

function test() {
 try {
  return "A";
 }
 finally {
  console.log("B");
 }
}

console.log(
 test()
);

finally executes before the function actually returns.

function test() {
 try {
  return "A";
 }
 finally {
  return "B";
 }
}

console.log(
 test()
);

A return inside finally overrides previous returns.

function test() {
 try {
  throw "A";
 }
 catch {
  return "B";
 }
 finally {
  console.log("C");
 }
}

console.log(
 test()
);

finally executes before the returned value is delivered.

try {
 throw new RangeError(
  "Range"
 );
}
catch(error) {
 console.log(
  error instanceof
  RangeError
 );
}

RangeError is a built-in error type.

try {
 decodeURIComponent(
  "%"
 );
}
catch(error) {
 console.log(
  error.name
 );
}

Invalid URI sequences throw URIError.

try {
 const arr =
  new Array(-1);
}
catch(error) {
 console.log(
  error.name
 );
}

Negative array length causes RangeError.

try {
 eval(
  "if("
 );
}
catch(error) {
 console.log(
  error.name
 );
}

Invalid JavaScript syntax throws SyntaxError.

try {
 throw new Error(
  "JS"
 );
}
catch(error) {
 console.log(
  error.message
 );
}

message contains the supplied text.

try {
 throw new Error(
  "React"
 );
}
catch(error) {
 console.log(
  error.name +
  ": " +
  error.message
 );
}

Both name and message are available.

function test() {
 try {
  throw "A";
 }
 finally {
  return "B";
 }
}

console.log(
 test()
);

A return in finally suppresses the thrown error.

Promise.reject(
 "Error"
)
.catch(error => {
 console.log(error);
});

catch handles rejected promises.

Promise.resolve("JS")
.then(value => {
 console.log(value);
});

Resolved values flow into then().

Promise.resolve()
.then(() => {
 throw "Oops";
})
.catch(error => {
 console.log(error);
});

Errors thrown in then() become rejected promises.

async function test() {
 throw "JS";
}

test().catch(
 error => {
  console.log(error);
 }
);

Thrown values inside async functions become rejected promises.

async function test() {
 return "React";
}

test().then(
 value => {
  console.log(value);
 }
);

Async functions always return promises.

async function test() {
 try {
  throw "A";
 }
 catch(error) {
  console.log(error);
 }
}

test();

The error is handled inside the async function.

async function test() {
 try {
  await Promise.reject(
   "Fail"
  );
 }
 catch(error) {
  console.log(error);
 }
}

test();

await throws the rejection into catch.

async function test() {
 await Promise.resolve();

 return "JS";
}

test().then(
 value => {
  console.log(value);
 }
);

The resolved value is returned after await.

class ValidationError
 extends Error {}

const error =
 new ValidationError(
  "Invalid"
 );

console.log(
 error instanceof
 ValidationError
);

Custom errors preserve inheritance.

class ValidationError
 extends Error {}

const error =
 new ValidationError();

console.log(
 error instanceof
 Error
);

Custom errors are also Error instances.

async function test() {
 try {
  await Promise.reject(
   "A"
  );
 }
 catch(error) {
  throw "B";
 }
}

test().catch(
 error => {
  console.log(error);
 }
);

The catch block throws a new rejection.

Promise.reject("A")
.catch(error => {
 return "B";
})
.then(value => {
 console.log(value);
});

Returning from catch converts the chain back to fulfilled.

Promise.reject("A")
.catch(error => {
 throw "B";
})
.catch(error => {
 console.log(error);
});

Throwing inside catch creates a new rejection.

async function test() {
 try {
  return "A";
 }
 finally {
  return "B";
 }
}

test().then(
 value => {
  console.log(value);
 }
);

finally return overrides the try return.

async function test() {
 try {
  throw "A";
 }
 finally {
  return "B";
 }
}

test().then(
 value => {
  console.log(value);
 }
);

A return inside finally suppresses both returns and thrown errors.