I have a large react app that has around 50 different API calls. I am handling if the API calls fail with try-catch. However, there are many places the app depends on the result of API calls.
For example, the API call returns an array and the app goes on depending on that array. I have realized if the connection to the backend gets lost while making any of such calls, the frontend can crush because of undefined value. Do I need to return an empty string/array etc. in the catch every time such a call happens in order to avoid the app from crashing? Is there a way to create a custom crash screen maybe that tells the user there is a connection issue and keeps checking on the background with polling? I just don’t want the user to see the firefox or chrome Black/Red ERROR screen so they think there is something wrong with the app.
I have heard about Error boundaries but I am using functional components only. Plus there are so many such calls, I need to find them all and find the appropriate ’empty’ values for the frontend not to crash. Is that the only way?