Other Errors
Loading "Other Errors"
Run locally for transcripts
π¨βπΌ Recall previously we learned that React doesn't catch all errors for you.
We've got an error in our
onSubmit
handler like this. If you try to submit the
form, you'll notice in the console that there's an error (someone made a typo
π
). The error looks something like:Uncaught TypeError: Cannot read properties of null (reading 'toUpperCase')
Before we fix the typo, we want to give the user better feedback for when
something like this happens (right now, they don't know it's not working and
that's terribly annoying). So what I want you to do is wrap that callback in our
own
try/catch
and then surface it to React using the showBoundary
function
you get when you call the useErrorBoundary
utility:import { useErrorBoundary } from 'react-error-boundary'
// ... in the component
const { showBoundary } = useErrorBoundary()
// ... in the `catch` block
showBoundary(error)
So let's make that happen!