Passing props to react-error-boundary FallbackComponent

Question

I am trying to use https://github.com/bvaughn/react-error-boundary It has an example

function ErrorFallback({error, resetErrorBoundary}) {
  return (
    <div role="alert">
      <p>Something went wrong:</p>
      <pre>{error.message}</pre>
      <button onClick={resetErrorBoundary}>Try again</button>
    </div>
  )
}

As I understand, the parameter names error and resetErrorBoundary are predefined, aren’t they?

I want to pass my application specific parameters, can I do it like

function ErrorFallback({error, resetErrorBoundary, myProp1,myProp2}) ?

Will they be automatically populated, if parent component pass them as {...props} ?

Answer 1

You can use fallbackRenderer

<ErrorBoundary
      fallbackRender={(props) => <ErrorFallback 
                      error={props.error} 
                      resetErrorBoundary={props.resetErrorBoundary} 
                      someCustomProp={false} />}
>

or just use spread

<ErrorBoundary
      fallbackRender={(props) => <ErrorFallback someCustomProp={false} {...props} />}