Error Boundry not catching some errors in NextJS - reactjs

Question

I'm trying to add a ErrorBoundry component to my NextJS project called ErrorShield
ErrorShield:
import { Component, useState } from "react";
export class Catch extends Component {
componentDidCatch(error, info) {
const { component } = this.props;
this.props.setErrorInfo({
hasError: true,
error,
info,
component,
});
}
render() {
const { hasError, children, errorMessage } = this.props;
if (hasError) errorMessage();
return hasError ? null : children;
}
}
const ErrorShield = (props) => {
const { children } = props;
const [errorInfo, setErrorInfo] = useState({
component: "",
error: null,
info: null,
hasError: false,
});
const errorMessage = () => {
if (errorInfo.hasError) {
console.groupCollapsed(
`%c ⛔ Error in the component: ${errorInfo.component} `,
"color:#ff3333;",
);
console.groupCollapsed("%c 📖 Props:", "color:#039BE5;");
console.table(children.props);
console.groupEnd();
console.groupCollapsed("%c 🚨 Error:", "color:#F44336;");
console.log(errorInfo.error);
console.groupEnd();
console.groupEnd();
}
};
return (
<Catch
{...props}
hasError={errorInfo.hasError}
errorMessage={errorMessage}
setErrorInfo={setErrorInfo}
/>
);
};
export default ErrorShield;
At first it was working as intended but I notices that sometimes if I break some components the ErrorShield won`t catch the error, I tried to see if the behavior had any consistency but I cant find it.
For example, my project has a Header like this:
const Header = (props) => {
const { navigation } = props;
const [titles, setTitles] = useState(navigation);
.....
{/*HeaderLinkContainer, HeaderLinkBox, HeaderLiveLink and HeaderSubLink are styled components*/}
<HeaderLinkContainer variant="Transparent" as="nav">
<HeaderLinkBox variant="Transparent">
{titles.map((title) => {
let LinkTag;
if (title.live) {
LinkTag = HeaderLiveLink;
} else if (title.subnav) {
LinkTag = HeaderSubLink;
} else {
LinkTag = HeaderLink;
}
return (
<LinkTag
href={title.path}
key={title.name}
active={SECTION[0] === title.path}
>
{title.name}
</LinkTag>
);
})}
</HeaderLinkBox>
</HeaderLinkContainer>
And I call that component in the layout:
<ErrorShield component="layout/LayoutResponsive -> Header">
<Header
breadcrumbs={breadcrumbs}
social={social}
viewTickerAmp={viewTickerAmp}
/>
</ErrorShield>
If I break this component by changing this:
{titles.map((title) => {
into this:
{/*Added an extra t*/}
{titles.map((ttitle) => {
The ErrorShield does work as intended, it renders nothing and prints this on the console:
However if I break it like this:
{/*Added an extra t at the beginning*/}
{ttitles.map((title) => {
It does not catch the error and I get this message in the console:
I have another component named ContentCarrusel with a similar .map() in it but the ErrorShield does work in it without problems:
{/*ContentCarouselStyles, ContentCarouselTitleStyles, ContentCarouselThumbStyles are styled components */}
{/*ItemCarousel is a child component*/}
<ContentCarouselStyles>
<ContentCarouselTitleStyles variant="h3">Para Ti</ContentCarouselTitleStyles>
{items.map((item, index) => {
return (
<ContentCarouselThumbStyles key={item.key}>
<ItemCarousel {...item} isAmp={isAmp} />
</ContentCarouselThumbStyles>
);
})}
</ContentCarouselStyles>
Here it doesn't matter if I break it like this:
{iitems.map((item, index) => {
or this:
{items.map((iitem, index) => {
The ErrorShield still catches the error and works as intended.
I have a lot more of examples of inconsistent behavior if you need them, also let me know if you need more info. Thank you