Single-page app uses XMLHttpRequest to a third-party API for noncritical UI data. API responses must not block rendering and the UI should handle timeouts/errors gracefully. Which approach is best?

The best approach is to make the XHR asynchronous (async=true) and omit the API widget on timeout/error. Asynchronous requests are non-blocking, meaning they don't prevent the browser from rendering the page or executing other scripts, which is crucial for noncritical UI data. Gracefully omitting the widget on timeout or error ensures a good user experience by preventing broken UI elements or endless loading states. Making the XHR synchronous (async=false) would block the main thread, freezing the UI until the request completes or times out, which is unacceptable for any web application, especially for noncritical data. Retrying indefinitely with exponential backoff is excessive for noncritical data and could lead to unnecessary resource consumption and continued poor user experience if the API is truly unavailable. Displaying the raw API error response is generally poor practice as it can be unhelpful or confusing to the user.