如何记录Redux Reducer中抛出的错误

问题原因 #

Redux Toolkit的configureStore默认会自动捕获Reducer执行过程中抛出的错误，避免错误冒泡导致整个应用崩溃，但默认不会将这些错误输出到控制台，所以你看不到错误日志。

解决方案 #

方案一：添加自定义错误日志中间件 #

通过自定义中间件捕获Reducer执行时的错误并打印，确保错误能输出到控制台：

import { configureStore } from '@reduxjs/toolkit';

// 自定义错误日志中间件
const errorLoggingMiddleware = () => (next) => (action) => {
  try {
    return next(action);
  } catch (err) {
    console.error('Redux Reducer Error:', err);
    // 可选：如果希望错误继续传播（比如让React错误边界捕获），可以重新抛出
    throw err;
  }
};

export const store = configureStore({
  reducer: {
    resources: removeResourceReducer, // 你的reducer
  },
  middleware: (getDefaultMiddleware) =>
    // 将自定义中间件添加到默认中间件链中
    getDefaultMiddleware().concat(errorLoggingMiddleware),
});

方案二：开启Redux DevTools的错误日志功能 #

在configureStore中配置DevTools选项，让其自动记录并打印错误：

export const store = configureStore({
  reducer: { /* 你的reducers */ },
  devTools: {
    logErrors: true, // 开启错误日志输出
  },
});

方案三：遵循Redux最佳实践，不在Reducer中抛错 #

Redux的Reducer应该是纯函数，不应该包含抛出错误这类副作用逻辑。建议将参数校验、错误判断逻辑移到Action Creator（如Thunk）中：

import { createAsyncThunk, createSlice, getState } from '@reduxjs/toolkit';
import type { RootState } from './store';

// 用Thunk处理校验逻辑
export const removeResource = createAsyncThunk(
  'resources/remove',
  async (payload: { id: string; amount: number }, { rejectWithValue, getState }) => {
    // 前置校验
    if (payload.amount <= 0) {
      return rejectWithValue(`Expected a positive number, but got ${payload.amount}`);
    }
    const currentState = getState() as RootState;
    const has = currentState.resources[payload.id] ?? 0;
    if (payload.amount > has) {
      return rejectWithValue(`Trying to take ${payload.amount} ${payload.id} from global resources only containing ${has}`);
    }
    return payload;
  }
);

// 创建Slice处理状态更新
const resourcesSlice = createSlice({
  name: 'resources',
  initialState: {} as ResourceCounts,
  reducers: {},
  extraReducers: (builder) => {
    builder.addCase(removeResource.fulfilled, (state, action) => {
      const { id, amount } = action.payload;
      const has = state[id] ?? 0;
      state[id] = has - amount;
      if (state[id] === 0) {
        delete state[id];
      }
    });
    builder.addCase(removeResource.rejected, (state, action) => {
      // 打印错误日志
      console.error('Remove Resource Error:', action.payload);
    });
  },
});

export default resourcesSlice.reducer;

为什么之前的尝试失败？ #

• 自定义中间件未生效：可能是中间件写法错误（如未正确返回next(action)），或未将其添加到configureStore的middleware数组中。
• 根组件try/catch无效：Redux Store会自动捕获Reducer的错误，不会将错误冒泡到React渲染树，因此根组件的try/catch无法捕获这类错误。

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