如何記錄來自於reducers內部的錯誤

Question

我對Redux還不太熟悉，有點困惑如何將錯誤訊息記錄到控制台中。我正在使用React、Redux Toolkit和TypeScript。

這是我寫的一個reducer的範例：

// Reducer
const removeResourceReducer = (state: ResourceCounts, action: ResourceAction) => {
  const { id, amount } = action.payload;
  assertIsPositive(amount);
  const has = state[id] ?? 0;
  if (amount > has) {
    throw new Error(`Trying to take ${amount} ${id} from global resources only containing ${has}`);
  }
  state[id] = has - amount;
  if (state[id] === 0) {
    delete state[id];
  }
  return state;
}

// Assertion functions
export const assert = (condition: any, msg: string): asserts condition => {
  if (!condition) {
    throw new Error(`Assertion Error: ${msg}`);
  }
}

export const assertIsPositive = (num: number) => {
  return assert(num > 0, `Expected a positive number, but got ${num}`);
}

如你所見，如果我傳入的數量小於1或大於可用資源的數量，就會拋出錯誤。我希望將這個錯誤記錄到控制台中，以便在開發工具中進行檢查，但是當我傳入一個無效的數字時，沒有任何日誌記錄。為了實現這一點，我嘗試新增了一個自訂中間件，將next(action)包裝在try / catch區塊中，catch區塊呼叫console.error(err)，我還嘗試將我的根組件渲染器包裝在try / catch中，以獲得相同的結果-記錄應用程式中的任何未處理錯誤。

Google搜尋沒有幫助我，所以有人能給我一些想法嗎？我猜Redux或Redux Toolkit中的某些東西捕獲了錯誤，但我不知道它對資訊做了什麼。

Answer 1

React Redux文件提供了一些中間件範例，其中之一是"crash reporter"。

一個簡單的實作可以像下面這樣：

const errorLogger = store => next => action => {
  try {
    return next(action);
  } catch(error) {
    // log the error/send to analytics/crashlytics/etc
    throw error;
  }
};

configureStore({
  reducer: rootReducer,
  middleware: getDefaultMiddleware =>
    getDefaultMiddleware().concat(
      errorLogger,
    ),
  preloadedState,
});

Demo