یکی از ساده ترین راه ها برای گرفتن و مدیریت همه error ها، استفاده از کتابخانه React Error Boundary است. گرچه React Error Boundary فقط مخصوص کامپوننت های از نوع class هست، اما برای کامپوننت های functional می توانید بصورت زیر استفاده کنید:

ابتدا React Error Boundary را ایمپورت کنید (اگر نصبش نکردید با دستور npm install React Error Boundary –force نصبش کنید):

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

حالا بصورت زیر از آن استفاده کنید:

import * as React from 'react'
import ReactDOM from 'react-dom'
import {ErrorBoundary} from 'react-error-boundary'


function ErrorHandler({error}) {
  return (
    <div role="alert">
      <p>An error occurred:</p>
      <pre>{error.message}</pre>
    </div>
  )
}

function City({name}) {
    return <div>Hello, visit {name.toUpperCase()}</div>
}

function Country({capital}) {
    return <div>Hello, visit {capital.toUpperCase()}</div>
}

function App() {
  return (
    <ErrorBoundary FallbackComponent={ErrorHandler}>
      <Country />
      <City />
    </ErrorBoundary>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

*ErrorHandler کامپوننتی است که برای نمایش خطا استفاده می کنیم (می توانید هر طور خواستید طراحی اش کنید)

* با کمک try ، catch هم می تواند خطاها را مدیریت کرد. این لینک را ببینید.