Can't use CustomErrors without causing AJAX error responseText to be blank?

Question

While trying to debug an AJAX error I decided to turn OFF customErrors in my web.config. The result was the responseText from the error section had the detailed message I needed. So while customErrors was on, the responseText was blank.

Is there a way to prevent the responseText from being blank but still use customErrors in the web.config?

Closest similar post on the topic is this link that says instead custom error filters might be the better solution

Here is the simple code I had:

<customErrors mode="On" defaultRedirect="~/errorpage.html" redirectMode="ResponseRewrite">
  <error statusCode="404" redirect="~/filenotfound.htm" />
</customErrors>

Then here is the error handling that didn't show a message until I turned off the customErrors:

        error: function (xhr, status, error) {
            console.log('error called');
            console.log('status = ' + status + ' error= ' + error);
            console.log('xhr.responseText = ' + xhr.responseText);
            alert(xhr.status);
            alert(xhr.responseText);
        },

Answer 1

perhaps parsing the result first with JSON.parse would help (depends on what's returned)? How to get "Data" field from xhr.responseText?