Try catch block question

JavaScript
1

Should I add a try catch block to my componentDidMount method when I’m just fetching data from an api endpoint and I’m not anticipating any expected errors. But if I don’t add the try catch block then how am I supposed to handle unexpected errors?

I currently have it like this:

async componentDidMount() {
    try {
      const { data } = await Axios.get(apiEndpointl);
      this.setState({ data });
    } catch (ex) {
      console.log("Logging the error", ex);
      alert("An unexpected error ocurred.");
    }
  }

The unexpected error is going to be handle with Toast Notifications, but I want to know is if I should be doing it the way I did it, keep in mind that I’m not implementing any CRUD operations so there’s no need to create a method to handle unexpected errors globally.

2

The way you’re going about it is basically fine, but what error are you going to catch? What does axios return if the get request fails? How does it error rather than fail by just returning an error code — for example, if it fails, does it just come back as 500 with data being null (in which case it would just set state to null)? I don’t use axios, so these aren’t rhetorical questions, you want to know what you might catch.

Also possibly look at error boundaries — this seems an ok introduction:

3

The only error I’m trying to catch is anything above 500 (i.e. server is down, etc) which would be an unexpected error and what I want to do is to just notify the client that an unexpected error occurred.

Or maybe I should do something with the UI as well and not just use toastify to display the error.