How to implement Error Boundary with React Hooks Component

The questions is whether it is possible to implement Error Boundary as a hook and the answer is no BUT it does not mean that you can not use Error Boundary class components in a project which you use hooks heavily.

Create a Error Boundary class component and wrap your React Functional Components(hooks) with the Error Boundary class component.

You can implement error boundary in react hooks with the help of react-error-boundary package.

npm install --save react-error-boundary

Then:

import {ErrorBoundary} from 'react-error-boundary'

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

const ui = (
  <ErrorBoundary
    FallbackComponent={ErrorFallback}
    onReset={() => {
      // reset the state of your app so the error doesn't happen again
    }}
  >
    <ComponentThatMayError />
  </ErrorBoundary>
)

Please read more on React-error-boundary

*There is no Error Boundaries in hook yet *

componentDidCatch 
and 
getDerivedStateFromError 

There are no Hook equivalents for these methods yet, but they will be added soon.

I wrote react-use-error-boundary to achieve this.

React 16 introduced Error Boundaries. As of React 17, there still is not an equivalent hook for function components.

I liked the API implemented by Preact's useErrorBoundary and attempted to recreate a similar API. If you're interested in building this from scratch you can checkout the code on GitHub.

You can't do that with hooks. Hooks do not have an equivalent of componentDidCatch. See this section of the hook FAQ