Improve error handling in AJAX calls

[flack]

User Story

As a donor, it can happen that I click "Donate" in the frontend and the AJAX request dies for whatever reason. But the problem is that I can't see it. The loading animation just stays visible indefinitely

Details

The POST here:

https://github.com/impress-org/givewp/blob/64fa4fdc9be1b6d41a80b5cc90f9dd7bacee6e5f/assets/src/js/frontend/give-ajax.js#L242-L259

handles only errors that came back as properly formatted JSON from the backend. If there is an HTTP error (say, 503 Service Unavailable), the callback (which is a success callback) is never run. There would need to be something like this:

$.post( Give.fn.getGlobalVar( 'ajaxurl' ), this_form.serialize() + '&action=give_process_donation&give_ajax=true', function( data ) {
    if ( $.trim( data ) == 'success' ) {
        /*...*/
    } else {
        /*...*/
    }
} ).fail( function() {
    /* run more or less the same code as in the else above */
});

Additional Context

The problem can be easily reproduced with the following patch:

--- a/includes/process-donation.php
+++ b/includes/process-donation.php
@@ -27,7 +27,7 @@ if ( ! defined( 'ABSPATH' ) ) {
  * @return mixed
  */
 function give_process_donation_form() {
-
+    throw new Exception('XXX');
        // Sanitize Posted Data.
        $post_data = give_clean( $_POST ); // WPCS: input var ok, CSRF ok.

Acceptance Criteria

• [x] Something happens when an action is taken.
• [ ] Something does not happen when an action is taken.
• [ ] Fixing behavior in Component A does not affect existing behavior in Component B.