React Redux API中间件Catch中调用on_error参数未定义问题

Hey there! Let's figure out why your on_error function is getting undefined as a parameter even though you can see the error in debug. I’ve run into similar issues with Redux middleware and Axios, so here are some common fixes and checks to try:

First, Verify What You’re Actually Passing to on_error #

Debuggers can sometimes be tricky—even if you see the error variable has content, double-check what you’re actually sending to on_error. Add a quick log right before calling the function in your middleware:

// In middleware/api.js
.catch(error => {
  console.log("Middleware error object:", error); // Confirm this has data
  console.log("About to send to on_error:", error); // Make sure this isn't undefined
  on_error(error);
})

Also, add a log inside your action’s on_error function to see what it’s receiving:

// In your action file
const on_error = (err) => {
  console.log("on_error received:", err); // Check if this logs undefined
  // Rest of your error handling
};

This will tell you if the issue is in the middleware’s parameter passing or somewhere else.

Fix Axios Error Structure Confusion #

Axios wraps errors in a specific object structure, and accessing the wrong property can lead to undefined. For example:

• If the server returns a non-2xx status, the error details are in error.response.data
• For network errors (no response from server), error.response will be undefined, and you’ll need to use error.message

Instead of passing the raw error object directly, normalize it first to avoid unexpected undefined values:

.catch(error => {
  let normalizedError;
  if (error.response) {
    // Server returned an error response
    normalizedError = {
      status: error.response.status,
      message: error.response.data.message || "Unknown server error",
      details: error.response.data
    };
  } else if (error.request) {
    // Request was sent but no response received
    normalizedError = {
      message: "No response from server",
      request: error.request
    };
  } else {
    // Error setting up the request
    normalizedError = {
      message: error.message,
      rawError: error
    };
  }
  on_error(normalizedError);
})

This way, you’ll always pass a structured object to on_error, never undefined.

Double-Check Action Payload Prop Spelling #

It sounds silly, but typos happen! Make sure the on_error key in your action payload matches exactly what you’re destructuring in the middleware. For example:

// Correct dispatch
dispatch({
  type: "API_CALL",
  payload: {
    method: "GET",
    url: "/api/resource",
    on_success: handleSuccess,
    on_error: handleError // Match the exact key name in middleware
  }
});

If you accidentally wrote onError instead of on_error, the destructured on_error variable would be undefined—but since you said you can call the function, this is less likely. Still worth a quick check!

Ensure Async/Await Error Handling (If Using) #

If your middleware uses async/await instead of .then()/.catch(), make sure you’re properly catching errors:

const apiMiddleware = store => next => async action => {
  if (action.type !== "API_CALL") return next(action);
  
  const { method, url, data, on_success, on_error } = action.payload;
  try {
    const response = await axios({ method, url, data });
    on_success(response.data);
  } catch (error) {
    // Axios will always throw an Error object here—never undefined
    on_error(error);
  }
};

Avoid wrapping the await call in an extra layer that might swallow the error.

Give these steps a try—9 times out of 10, the issue is either a misstructured error object or a small oversight in passing parameters. Let me know if you still run into trouble!

内容的提问来源于stack exchange，提问作者ssalvatori