Handling API Errors and Timeouts in Single-Page Web Applications

Best Practices for Error and Timeout Handling in Single-Page Web Applications

Question

You are writing a single-page web application with a user-interface that communicates with a third-party API for content using XMLHttpRequest.

The data displayed on the UI by the API results is less critical than other data displayed on the same web page, so it is acceptable for some requests to not have the API data displayed in the UI.

However, calls made to the API should not delay rendering of other parts of the user interface.

You want your application to perform well when the API response is an error or a timeout.

What should you do?

Answers

Explanations

Click on the arrows to vote for the correct answer

A. B. C. D.

A.

The correct answer to the question is B. Set the asynchronous option for your request to the API to true and omit the widget displaying the API results when a timeout or error is encountered.

When making a request to a third-party API from a single-page web application, it's important to consider the user experience and performance of the application. In this case, the data displayed by the API results is less critical than other parts of the UI, which means that it's acceptable for some requests to not have the API data displayed in the UI.

To ensure that the user interface is not delayed when making API requests, it's important to use asynchronous requests. Asynchronous requests allow the UI to continue rendering while waiting for the API response. Setting the asynchronous option to true means that the requests will not block the main thread and will be executed in the background.

In case of a timeout or error in the API response, it's important to handle the exceptions gracefully to avoid any negative impact on the user experience. In this case, the recommendation is to omit the widget displaying the API results when a timeout or error is encountered. This means that the application will not display any data from the API if there is a problem with the API response, but it will continue to function normally without delaying the rendering of other parts of the UI.

Option A, which suggests setting the asynchronous option to false, is not recommended as it would block the main thread and cause delays in the UI rendering. Additionally, omitting the widget displaying the API results only in case of a timeout or error would not be possible as the requests would be synchronous.

Option C, which suggests catching timeout or error exceptions and retrying with exponential backoff until the API response is successful, is not necessary in this case as the data displayed by the API results is less critical than other parts of the UI. Retrying the requests would cause unnecessary delays in the rendering of the UI, which is not desirable.

Option D, which suggests catching timeout or error exceptions and displaying the error response in the UI widget, is not recommended as it could negatively impact the user experience. Displaying error messages to the user could cause confusion and frustration, especially if the data displayed by the API results is less critical than other parts of the UI.