Re-render ErrorFallback from onError handler output

[maurocarrero]

• react-error-boundary version: 3.0.2
• node version: 12.19.0
• npm version: 6.14.8

This is not a failure but instead a question about a possible use case.

<ErrorBoundary
    FallbackComponent={ErrorFallback}
    onError={defaultErrorHandler}
  >
    <Content store={store} />
  </ErrorBoundary>,

1. I have a set an ErrorBoundary at the root of the application.
2. Once the boundary catches the error, I will render the fallback and trigger onError to log information to the server.
3. In onError handler among the error itself, I also want to send something else, for instance the exact timestamp of the error.
4. I want to render this same timestamp value in Fallback, so the user is also able to look at the error and report it manually with the same exact information: error and timestamp.
5. If I use it as below I don't have a connection between onError handler and ErrorFallback component.

Is there a way to do this with current implementation?

Suggested solution:

1. Re-render ErrorFallback once with returned output of onError handler:

Something like:

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

Thanks!

[marcosvega91]

Hi @maurocarrero thanks for reaching us 😄 .

A possible not really clean way is to do as below, using two ErrorBoundary

import * as React from "react";
import { ErrorBoundary as ReactErrorBoundary } from "react-error-boundary";

function ErrorComponent({ error }) {
  return <div>Error {error.timestamp}</div>;
}

class ErrorWithTimestamp extends Error{
  constructor(message,timestamp){
    super(message)
    this.timestamp = timestamp
  }
}

function ErrorBoundary({ children }) {
  const throwErrorWithTimestamp = (error) => {
    throw new ErrorWithTimestamp(error.message, new Date().getTime())
    
  };

  const handleError = (error) => {
    console.log(error.timestamp);
  };

  return (
    <ReactErrorBoundary
      FallbackComponent={ErrorComponent}
      onError={handleError}
    >
      <ReactErrorBoundary FallbackComponent={ErrorComponent} onError={throwErrorWithTimestamp}>
        {children}
      </ReactErrorBoundary>
    </ReactErrorBoundary>
  );
}

export default ErrorBoundary;

[maurocarrero]

Hi @marcosvega91, useful and clean solution.
I was wondering though, if this might be included as an additional feature in the library.
Thank you.

[marcosvega91]

Happy that is working for you ☺️. I'll close the issue for now. If someone else needs this feature in the feature we'll evaluate it. Thanks a lot 👍😉