why my react application got crash even when i use Error Boundaries?

Question

I am trying to learn how to use Error Boundaries in React js.As i read here it prevent your application from getting crashed. But my application crash!here is my code:

App component:

function App() {
  return (
    <>
      <h1>app component</h1>
      <ErrorBoundary >
        <Simple />
      </ErrorBoundary>
    </>
  );
}

Simple Component:

export default () => {
    throw new Error('I crashed!')
    return <h3> simple component</h3>
}

and this my Boundaries=

class ErrorBoundary extends React.Component {
    constructor(props) {
        super(props);
        this.state = { hasError: false };
    }

    static getDerivedStateFromError(error) {
        // Update state so the next render will show the fallback UI.
        console.log("I got you ")
        return { hasError: true };

    }

    componentDidCatch(error, errorInfo) {
        // You can also log the error to an error reporting service
        console.log(error, errorInfo);


    }

    render() {
        if (this.state.hasError) {
            // You can render any custom fallback UI
            return <h1>Something went wrong.</h1>;
        }

        return this.props.children;
    }
}
export default ErrorBoundary;

for a very short time I see the message "Something went wrong" but after that the page crashed!

thanks for your help and advice

Nikhil Goyal · Accepted Answer · 2019-12-27 10:02:29Z

7

If the application is crashing in the development environment, it is expected behavior so that a developer can fix the issue.

ErrorBoundaries are supposed to work without crashes only in the production environment.

answered Dec 27, 2019 at 10:02

Nikhil Goyal

1,9831 gold badge11 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

morteza Over a year ago

Thanks Nikhili you are right I have just tried it in production mode and it works!! I am wondering why the document didn't mention it!

Marcus Ekström Over a year ago

Why? I don't understand the logic in this. I mean, of course a dev should fix it. But a dev can easily fix it even if the error boundary works, you'll still get the error. So why break the application? It just makes it harder to test.

Fyodor Yemelyanenko · Accepted Answer · 2019-12-27 10:25:16Z

1

Your code is correct and stable. See demo

The only thing you forgotten is closing tag for <h3> in Simple Component.

export default () => {
    throw new Error('I crashed!')
    return <h3> simple component</h3>
}

And Error boundaries work in development.

answered Dec 27, 2019 at 10:25

Fyodor Yemelyanenko

11.9k2 gold badges33 silver badges41 bronze badges

1 Comment

morteza Over a year ago

Hi Fyodor simple code is something i write just here. and I think it doesn't matter because codes after the throw error are not executed. also my entire sample code works fine when the throw error line is commented. and I think your right about error boundary behavior in development mode there is nothing in document that mentioned it just work in production.

Collectives™ on Stack Overflow

why my react application got crash even when i use Error Boundaries?

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related