Comment enregistrer les erreurs à partir des réducteurs

Question

Je suis nouveau sur Redux et je ne sais pas comment enregistrer les messages d'erreur sur la console. J'utilise React, Redux Toolkit et TypeScript.

Voici un exemple de réducteur que j'ai écrit :

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

Comme vous pouvez le voir, si le montant que je transmets est inférieur à 1 ou supérieur au montant des ressources disponibles, une erreur est générée. J'aimerais que cette erreur soit enregistrée sur la console afin de pouvoir la vérifier dans les outils de développement, mais lorsque je transmets un numéro invalide, rien n'est enregistré. Pour y parvenir, j'ai essayé d'ajouter un middleware personnalisé qui next(action)包装在try / catch块中，catch块调用console.error(err) J'ai également essayé d'encapsuler mon moteur de rendu de composant racine dans un try/catch pour obtenir le même résultat - en enregistrant toutes les erreurs non gérées dans l'application.

La recherche sur Google ne m'a pas aidé, alors quelqu'un peut-il me donner quelques idées ? Je suppose que quelque chose dans Redux ou dans Redux Toolkit détecte l'erreur, mais je ne sais pas ce qu'il fait avec les informations.

Answer 1

La documentation de React Redux fournit quelques exemples de middleware, dont le "crash reporter".

Une implémentation simple peut ressembler à ceci :

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,
});

Démo