Handling errors in javascript/react when calling backend APIs

Question

I am building a react-native app, and I am starting to implement a more robust and sophisticated error-handling system, specifically for handling server errors when making http requests. Here is a basic example of how I am currently making http requests in my app.

I have a 'client.js' file which is essentially just a wrapper around axios. I have a 'get' method that looks like this:

const get = async (endpoint, config = {}) => {
  try {
    const result = await axios.get(domain + endpoint, config);
    return result;
  } catch (error) {
    throw new Error(error.message);
  }
};

Then, I have a file for each api endpoint that I need to access. For example, I have a 'posts.js' file, and in that file I have a 'getPosts' method:

const getPosts = async (userID, page, pageSize) => {
  try {
    const response = await client.get(
      `${endpoint}?userID=${userID}&page=${page}&pageSize=${pageSize}`
    );
    return response.data;
  } catch (error) {
    throw new Error(error.message);
  }
};

And then finally, in the component that is calling getPosts, I have a function that looks something like this:

const loadPosts = async () => {
  try {
    const response = await getPosts();
    // do something with the response from the server
  } catch (error) {
    // display an error message to the client
  }
}

Obviously this is a very simple example of what a request might look like, but this is the basic structure that I use throughout my app. The problem I am having is that it seems very repetitive and messy to have to wrap almost all of my functions in a try/catch block, and then basically raise an error object until I get to the function that is actually going to handle the error. Is there some sort of 'design method' for error handling that simplifies and centralizes this process? Perhaps something similar to an express-middleware when creating a node server? Or is this a standard way to handle errors in javascript?

Thank you to anyone who can help!

you don't need to catch the error just to throw it afterwards. If you're not doing anything with it on a layer, just let it uncaught until a higher layer captures it. — malarres
– malarres, Commented Jul 19, 2021 at 6:24

Navoneel Talukdar · Accepted Answer · 2021-07-19 06:56:36Z

1

As you are using axios as the http library here, so you can take a look at axios interceptor in order to hook the response and do something with that before passing it to the consumer. This will help you to respond to errors raised from once cental place.

axios.interceptors.response.use((response) => {
   return response;
}, function(error) {
   // do what you want to do with the error.
   return Promise.reject(error)
});

Or with ES5 syntax

axios.interceptors.response.use(function (response) {
    // Do something with response data
    return response;
  }, function (error) {
    // Not 200 Ok
    // Do something with response error
    return Promise.reject(error);
});

edited Jul 19, 2021 at 6:56

answered Jul 19, 2021 at 6:50

Navoneel Talukdar

4,6365 gold badges23 silver badges43 bronze badges

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

1 Comment

Max Over a year ago

Thanks for pointing this out to me! I should have known that axios had something to help centralize handling requests/responses.

Collectives™ on Stack Overflow

Handling errors in javascript/react when calling backend APIs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related