0

I have a component render hierarchy as below

import {ErrorBoundary} from 'react-error-boundary'
function errorFallback({error,resetErrorBoundary})
{
   return(<div>Some error occured!!!</div>);
}
<div>
   <ErrorBoundary FallbackComponent={errorFallback}>
   <studentDetails>
       <studentContacts/>
   </studentDetails>
   </ErrorBoundary>
</div>

studentContacts is as follows

function studentContacts(props)
{
  function formatContacts(in)
   {
     throw Error("Test error occured in StudentContacts-formatContacts");
   }
  return (<label>{formatContacts(input)}</label>
}
export default studentContacts;

My question is:

Error thrown from inner component studentContacts is not being displayed by ErrorBoundary

Anything I am missing here?

V R
  • 133
  • 1
  • 8
  • 1
    This is the expected behaviour of create-react-app applications running with the development server – the react error overlay appears. If you dismiss it (e.g. clicking the close button or pressing escape) you'll see that your error boundary is shown. In production, this overlay is not shown. [See previous discussion here](https://stackoverflow.com/a/52097626). – motto Apr 01 '23 at 16:32
  • @motto: Appreciate your help. Yes it explains the things, Just a QQ where to press escape key? Because I am seeing a blank page. Do I need to press Esc key in Dev tools? – V R Apr 01 '23 at 17:56
  • 1
    Ah. I assumed you'd hastily cut down your minimal error repro but if your component is actually called `studentContacts` then you will be receiving a blank page for an unrelated reason – custom component names need to start with a capital letter. You'll get a similar error from `studentDetails` and `errorFallback`. – motto Apr 01 '23 at 22:16

0 Answers0