我對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中的某些東西捕獲了錯誤,但我不知道它對資訊做了什麼。
P粉8721016732024-04-06 11:19:17
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, });