global error handling with middle ware still requires catch

[fhanggi]

Hello
Sorry for the long question.
I summarize my "issue" first and then include some code
I have RTKQ error middle ware. it handles a custom error code (481) we get back from our apis and also any other error code like 500, etc
We were hoping that we now do not need any more catch code in our components and all error handling is taken care of in the middle ware

However when i use an unwrap/then in my component i still need a catch even if i do nothing in that catch. the reason for that is to avoid these errors in the console
Uncaught (in promise) {status: 'FETCH_ERROR', error: 'TypeError: Failed to fetch'}

i understand that when i use unwrap i get a promise and hence i seem to have to add a catch even if i do nothing in it and the middleware already took care of the error.

my question is there some way to avoid having to add that catch?

here some code. first the custom error middleware. then code that does the unwrap/then/catch where i wish i did not have to add that catch.

import { isRejectedWithValue } from "@reduxjs/toolkit";
import history from "../history";
import { createApplicationNotification } from "../redux/AppNotificationSlice";

export function rtkQueryErrorHandler(api) {
  return (next) => (action) => {
    if (isRejectedWithValue(action)) {
      const status = action.payload?.status;
      const errorMessage = action.error?.message;
      const url = action.meta?.baseQueryMeta?.request?.url;
      if (status && ![481, 482].includes(status)) {
        const errorInfo = {
          message: `Request failed with status ${status} | error: ${errorMessage} | url: ${url}`,
          status: status,
          showHeader: false
        };
        //navigate to the global error page
        history.push("/error", { error: errorInfo });
        return next(action);
      }

      if (status && [481, 482].includes(status)) {
        console.log(action.payload);
        const errorInfo = action.payload.data;
        console.log(errorInfo);
        if (status === 481 && errorInfo.detail) {
          const errorDetails = errorInfo.detail.split("|");
          const errorTypes = errorInfo.type.split("|");
          errorDetails.forEach((errorDetail, index) => {
            api.dispatch(createApplicationNotification(errorDetail, errorTypes[index]));
          });
        }
        return next(action);
      }
    }

    return next(action);
  };
}

sample code with "useless" catch

    triggerFetchTruckByTruckId(truckId)
      .unwrap()
      .then((data) => {
        if (!data || Object.values(data).length === 0) {
          serverErrorRef.current = "Truck does not exist";
        } else {
          //put the truck id into session storage
          setSessionStorageItem("truck", JSON.stringify(Object.values(data)[0]));
          history.replace(from);
        }
      })
      .catch((e) => {
        console.log("error", e);
      });

[EskiMojo14]

by calling unwrap, you are explicitly creating a promise that throws when the request fails. your middleware cannot do anything about this, it's entirely unrelated.

if you don't want it to throw, don't call unwrap:

triggerFetchTruckByTruckId(truckId)
      .then((res) => {
        if (!("data" in res)) return;
        const { data } = res;
        if (!data || Object.values(data).length === 0) {
          serverErrorRef.current = "Truck does not exist";
        } else {
          //put the truck id into session storage
          setSessionStorageItem("truck", JSON.stringify(Object.values(data)[0]));
          history.replace(from);
        }
      })

[fhanggi]

Thank you!

So basically this if statement
if (!("data" in res)) return;
is the "same" as that catch and just ignores the error

we think we may go with the catch and a comment since the .then alone with the if seems a bit less intuitive

  .catch(() => {
    // errors are handled in middleware. catch is needed to avoid unhandled promise rejection in console
  });