0

I'd like to know how I could force any of my React components to throw an error to check how it is handled. I don't want to just display the fallback component of my ErrorBoundary like switching the state in the Devtools allows me to. I'm interested in seeing "live" the whole error catching process to determine why some of them aren't sent to Sentry.

Adding this to a button didn't do the trick :

  const onClick = (event: React.MouseEvent<HTMLElement>): void => {
    try {
      const http = new XMLHttpRequest();
      http.open("GET", "https://httpstat.us/504");
      http.send();
      http.onload = (): void => {
        // eslint-disable-next-line no-console
        console.log(http.response);
      };
    } catch (e) {
      throw new Error("clicked");
    }
  };
FE-P
  • 69
  • 8
  • Consider using `fetch` instead of `XMLHttpRequest`. `catch` is for promise errors, not necessarily HTTP 504 errors – evolutionxbox Jun 28 '23 at 13:53
  • Yes it does with some modifications, thank you ! – FE-P Jun 28 '23 at 14:03
  • This is doable with the `XMLHttpRequest` too, just attach the `onreadystatechange` handler and setstate/dispatch [from there](https://stackoverflow.com/questions/8866761/xmlhttprequest-ajax-error). Having said that, I'd also recommend using `fetch`. – Wiktor Zychla Jun 28 '23 at 14:11

0 Answers0