So protokollieren Sie Fehler innerhalb von Reduzierern

Question

Ich bin neu bei Redux und etwas verwirrt darüber, wie man Fehlermeldungen in der Konsole protokolliert. Ich verwende React, Redux Toolkit und TypeScript.

Dies ist ein Beispiel für einen Reduzierer, den ich geschrieben habe:

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

Wie Sie sehen können, wird ein Fehler ausgegeben, wenn die Menge, die ich übergebe, kleiner als 1 oder größer als die Menge der verfügbaren Ressourcen ist. Ich möchte, dass dieser Fehler in der Konsole protokolliert wird, damit ich ihn in den Entwicklungstools überprüfen kann, aber wenn ich eine ungültige Zahl übergebe, wird nichts protokolliert. Um dies zu erreichen, habe ich versucht, eine benutzerdefinierte Middleware hinzuzufügen. next(action)包装在try / catch块中，catch块调用console.error(err) Ich habe auch versucht, meinen Root-Komponenten-Renderer in einen Try/Catch zu packen, um das gleiche Ergebnis zu erzielen – alle nicht behandelten Fehler in der Anwendung zu protokollieren.

Googeln hat mir nicht geholfen. Kann mir jemand ein paar Ideen geben? Ich vermute, dass etwas in Redux oder dem Redux Toolkit den Fehler abfängt, aber ich weiß nicht, was es mit den Informationen macht.

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