Promise Error Handling With .catch in JavaScript

Promise Error Handling With .catch in JavaScript

.catch handles promise rejections and thrown errors. Here is how it works and how to recover from errors.

Basic .catch

fetchP("/api")
  .then((data) => render(data))
  .catch((err) => console.error("Error:", err));
``
`.catch` catches rejections from the original promise and thrown errors from any `.then` above it.

### .catch Catches Throws

```js
fetchP("/api")
  .then((data) => {
    if (!data.ok) throw new Error("bad data");
    return process(data);
  })
  .catch((err) => console.error(err)); // catches the throw
``
### .then's Second Argument vs .catch

```js
// .then's second arg: only catches rejections from the original promise
promise.then(onFulfilled, onRejected);

// .catch: catches rejections AND throws from any .then above it
promise.then(onFulfilled).catch(onRejected);
``
`.catch` is more comprehensive. Prefer it over the second argument.

### Recovering From Errors

After `.catch`, the chain continues with the value returned by `.catch`:

```js
fetchP("/api")
  .then((data) => process(data))
  .catch((err) => {
    console.error(err);
    return "fallback"; // recover with a fallback value
  })
  .then((result) => render(result)); // receives "fallback"
``
If `.catch` does not throw, the chain continues as fulfilled.

### Re-throwing From .catch

```js
fetchP("/api")
  .then((data) => process(data))
  .catch((err) => {
    console.error(err);
    throw err; // re-throw to propagate
  })
  .then((result) => render(result)) // skipped
  .catch((err) => console.error("final:", err)); // catches the re-thrown error
``
### .finally (Cleanup)

```js
showSpinner();
fetchP("/api")
  .then((data) => render(data))
  .catch((err) => handleError(err))
  .finally(() => hideSpinner());
``
`.finally` runs regardless of outcome. Does not receive the value or error. Good for cleanup.

### Unhandled Rejections

If a promise rejects and there is no `.catch`, it is an **unhandled rejection**. In Node.js, this can crash the process. In browsers, it is a warning.

```js
// bad: no .catch
fetchP("/api").then((data) => render(data)); // if it rejects, unhandled

// good: .catch
fetchP("/api").then((data) => render(data)).catch((err) => handleError(err));
``
### The Takeaway

`.catch` catches rejections and throws from any `.then` above it. After `.catch`, the chain continues with the returned value (recovery). Re-throw to propagate. `.finally` runs for cleanup. Always add `.catch` (or use try/catch with async/await) to avoid unhandled rejections.