Bagaimana untuk log ralat dari dalam pengurang

Question

Saya baru menggunakan Redux dan sedikit keliru tentang cara untuk log mesej ralat ke konsol. Saya menggunakan React, Redux Toolkit dan TypeScript.

Ini adalah contoh pengurang yang saya tulis:

// 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}`);
}

Seperti yang anda lihat, jika jumlah yang saya luluskan kurang daripada 1 atau lebih besar daripada jumlah sumber yang ada, ralat akan dilemparkan. Saya ingin ralat ini dilog masuk ke konsol supaya saya boleh menyemaknya dalam alat dev, tetapi apabila saya memasukkan nombor yang tidak sah tiada apa-apa yang dilog. Untuk mencapai matlamat ini, saya cuba menambah perisian tengah tersuai yang akan next(action)包装在try / catch块中，catch块调用console.error(err) Saya juga cuba membungkus pemapar komponen akar saya dalam percubaan/tangkap untuk mendapatkan hasil yang sama - mengelog sebarang ralat yang tidak dikendalikan dalam aplikasi.

Googling tidak membantu saya, jadi bolehkah sesiapa memberi saya idea? Saya rasa sesuatu dalam Redux atau Redux Toolkit menangkap ralat, tetapi saya tidak tahu apa yang ia lakukan dengan maklumat.

Answer 1

Dokumentasi React Redux menyediakan beberapa contoh perisian tengah, salah satunya ialah "pelapor ranap".

Pelaksanaan mudah boleh kelihatan seperti ini:

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