0

I have a standard componentDidCatch in my component, which is typed like below and calls an external Logging library from within:

  componentDidCatch(error: Error, info: React.ErrorInfo) {
    Logger.logErrorMessage(error.message, info);
  }

However the 3rd party logging library logErrorMessage function is typed something like:

type ArbitraryValue = undefined | string | number | boolean | ArbitraryObject;

interface ArbitraryObject {
  [p: string]: ArbitraryValue;
}

...


logErrorMessage(message: string, info: ArbitraryObject): void;

The TS error message displays the following

.../ErrorBoundary.tsx:38:82 - error TS2345: Argument of type 'ErrorInfo' is not assignable to parameter of type 'ArbitraryObject'.
  Index signature is missing in type 'ErrorInfo'.

38     Logger.logErrorMessage(error, info);
                                     ~~~~

What is the best way to get my info parameter of componentDidCatch to adhere to the ArbitraryObject interface of logErrorMessage? Optimally without having to change the Logger library source.

Afs35mm
  • 549
  • 2
  • 8
  • 21
  • Suggestion: just have `ArbitraryObject` extend `React.ErrorInfo`? The latter only appears to have a single property member named `componentStack`. – miqh Jun 24 '20 at 00:58
  • `ArbitraryObject` is part of the `Logger` library that I only consume. – Afs35mm Jun 24 '20 at 01:23
  • Ah, gotcha. I don't think the compiler will be happy with an `as ArbitraryObject` cast, so the only other thing I can think of is to not pass `info` directly and create a new object to erase the `React.ErrorInfo` interface (i.e. pass `{ ...info }` instead). – miqh Jun 24 '20 at 01:56

0 Answers0