with-sentry error infinite loop

[pooriamo]

I used the example with-sentry But it put the page in infinite loop when an error occured.

The problem is in getDerivedStateFromError method.

static getDerivedStateFromError() {
    // React Error Boundary here allows us to set state flagging the error (and
    // later render a fallback UI).
    return { hasError: true }
}

After each error, getDerivedStateFromError is setting hasError to true and makes the component re-render!

Is this even a bug?

[pooriamo]

Turns out to be my problem. I was loading the Error component in the render method using next/dynamic And it caused the infinite render.

[pooriamo]

I'm sorry, The problem still exist. It exists only when I use both componentDidCatch and getDerivedStateFromError together. Having only one of them doesn't make problem.

[Chastrlove]

same problem. infinite loop when an error occured.

[yaohuangguan]

Hi, you may wanna use _error.js to handle the cases. but for error boundary, i am using

 state = {
    hasError: false,
    error: ""
  };
  static getDerivedStateFromError(error) {

    return { hasError: true, error: error };
  }

  componentDidCatch(error, errorInfo) {
//to server
  }

[nicobarray]

Hi @pooriamo & @Chastrlove,

Could you give a repo/branch to reproduce the infinite loop? I have been testing on a fresh clone of the with-sentry example and it does not loop apparently.

I'd love to help in resolving this issue 👍

[ijjk]

Hi, the with-sentry example appears to be working correctly as mentioned in the above reply.

I'm going to close this since doesn't appear to be an issue with the example, if you are still experiencing this please provide a complete reproduction and we can investigate further.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.