componentDidCatch: document & decompose info parameter

[brandonbloom]

Some quick googling didn't show any explanation of the info parameter for componentDidCatch(error, info). The only key in that object that I've seen so far is componentStack, which is useful, but is already composed. If I want to do some custom rendering of that information, I have to parse it.

I'd love to see info.componentStack become a more general info.text string and then have componentStack be broken down to an array of frames. Something like [{component, createdBy}].

[bvaughn]

This is a new feature, to be introduced in 16 final. We'll add documentation for it soon but probably not until we release an RC.

I don't expect the 2nd parameter, (the one containing componentStack), to change in the short-term for what it's worth. We went with a named parameter for that because it gives us the option to add more information in a backwards-compatible way.

[brandonbloom]

I was not proposing to change it from an object with keys, I was proposing to add/rename keys so as to include the trace as decomposable data.

// example call from framework to my component
that.componentDidCatch(err, {
  text: 'Something Bad Happened\nat Foo (Bar) \n...',
  componentStack: [
    {component: 'Foo', createdBy: 'Bar'},
    ...
  ]
})

[bvaughn]

Understood! I was just offering an explanation for why we used a named-parameter for a single param 😄 and why there wasn't any docs entry for this yet (since it's only available in beta).

ReactFiberComponentTreeHook has all of the info you mention so it wouldn't be hard to pass it along. (And I think this issue is great to keep around for one of us to follow-up on.)

[bvaughn]

Related:

• https://tc39.github.io/proposal-error-stacks/
• https://esdiscuss.org/topic/error-stack-strawman

[bvaughn]

Having given this more thought, I'm thinking the following change might be nice:

type Source = {
  fileName: string,
  lineNumber: number,
};

type StackFrame = {
  name: string | null,
  ownerName: string | null,
  source: Source | null,
};

// Passed to the function injected via ReactFiberErrorLogger.injection.injectDialog:
// injectedFunction(capturedError: CapturedError);
type CapturedError = {
  componentName: ?string,
  componentStack: string,
  componentStackFrames: Array<StackFrame>,
  error: mixed,
  errorBoundary: ?Object,
  errorBoundaryFound: boolean,
  errorBoundaryName: string | null,
  willRetry: boolean,
};

// Passed to the componentDidCatch lifecycle hook:
// componentDidCatch(error: Error, info: ErrorInfo);
type ErrorInfo = {
  componentStack: string,
  componentStackFrames: Array<StackFrame>,
};

Since this proposal is backwards compatible with the beta method signature, I'm going to take a stab at it.

[gaearon]

Closing in favor of #10461 which has more activity.

[bvaughn]

This issue is #10461 😄

[gaearon]

Oh man.

[gaearon]

#10922