Improve error message of fetch when xhr.onerror occurs (#3003)

* Ensure fetch-tests fail (instead of timeout) on failure

* Standardize failure handling in fetch-tests

* Improve flawed failure condition of test_fetch_json

Previously, the assertion was always true

* Implement better error message for for xhr.onerror within fetch

tests/app/fetch-tests.ts

@@ -14,12 +14,7 @@ export var test_fetch = function (done: (err: Error, res?: string) => void) {
         TKUnit.assert(r instanceof Response, "Result from fetch() should be valid Response object! Actual result is: " + r);
         done(null);
         // << (hide)
-    }, function (e) {
+    }).catch(failOnError(done));
-            // Argument (e) is Error!
-            // >> (hide)
-            done(e);
-            // << (hide)
-        });
     // << fetch-response
 };
 
@@ -31,12 +26,7 @@ export var test_fetch_text = function (done: (err: Error, res?: string) => void)
         TKUnit.assert(types.isString(r), "Result from text() should be string! Actual result is: " + r);
         done(null);
         // << (hide)
-    }, function (e) {
+    }).catch(failOnError(done));
-            // Argument (e) is Error!
-            // >> (hide)
-            done(e);
-            // << (hide)
-        });
     // << fetch-string
 };
 
@@ -45,15 +35,10 @@ export var test_fetch_json = function (done: (err: Error, res?: string) => void)
     fetch("https://httpbin.org/get").then(response => { return response.json(); }).then(function (r) {
         // Argument (r) is JSON object!
         // >> (hide)
-        TKUnit.assert(types.isString(JSON.stringify(r)), "Result from json() should be JSON object! Actual result is: " + r);
+        TKUnit.assertNotNull(r, "Result from json() should be JSON object!");
         done(null);
         // << (hide)
-    }, function (e) {
+    }).catch(failOnError(done));
-            // Argument (e) is Error!
-            // >> (hide)
-            done(e);
-            // << (hide)
-        });
     // << fetch-json
 };
 
@@ -65,12 +50,7 @@ export var test_fetch_formData = function (done: (err: Error, res?: string) => v
         TKUnit.assert(r instanceof FormData, "Result from formData() should be FormData object! Actual result is: " + r);
         done(null);
         // << (hide)
-    }, function (e) {
+    }).catch(failOnError(done));
-            // Argument (e) is Error!
-            // >> (hide)
-            done(e);
-            // << (hide)
-        });
     // << fetch-formdata
 };
 
@@ -81,7 +61,14 @@ export var test_fetch_fail_invalid_url = function (done) {
     fetch("hgfttp://httpbin.org/get").catch(function (e) {
         completed = true;
         done(null)
-    });
+    }).catch(failOnError(done));
+};
+
+export var test_fetch_invalid_url_fail_message = function (done) {
+    fetch("hgfttp://httpbin.org/get").catch(function (e: TypeError) {
+        TKUnit.assert(e.message.match(/Network request failed:.{2,}/), "Failure message should contain details on the failure. Actual message was: " + e.message);
+        done(null);
+    }).catch(failOnError(done));
 };
 
 export var test_fetch_response_status = function (done) {
@@ -91,20 +78,10 @@ export var test_fetch_response_status = function (done) {
         // Argument (response) is Response!
         var statusCode = response.status;
         // >> (hide)
-        try {
         TKUnit.assert(types.isDefined(statusCode), "response.status should be defined! Actual result is: " + statusCode);
         done(null);
-        }
-        catch (err) {
-            done(err);
-        }
         // << (hide)
-    }, function (e) {
+    }).catch(failOnError(done));
-            // Argument (e) is Error!
-            // >> (hide)
-            done(e);
-            // << (hide)
-        });
     // << fetch-status-response
 };
 
@@ -115,20 +92,10 @@ export var test_fetch_response_headers = function (done) {
         // Argument (response) is Response!
         // var all = response.headers.getAll();
         // >> (hide)
-        try {
         TKUnit.assert(types.isDefined(response.headers), "response.headers should be defined! Actual result is: " + response.headers);
         done(null);
-        }
-        catch (err) {
-            done(err);
-        }
         // << (hide)
-    }, function (e) {
+    }).catch(failOnError(done));
-            // Argument (e) is Error!
-            // >> (hide)
-            done(e);
-            // << (hide)
-        });
     // << fetch-headers-response
 };
 
@@ -138,16 +105,9 @@ export var test_fetch_headers_sent = function (done) {
         headers: { "Content-Type": "application/json" }
     }).then(function (response) {
         var result = response.headers;
-        try {
         TKUnit.assert(result.get("Content-Type") === "application/json", "Headers not sent/received properly! Actual result is: " + result);
         done(null);
-        }
+    }).catch(failOnError(done));
-        catch (err) {
-            done(err);
-        }
-    }, function (e) {
-            done(e);
-        });
 };
 
 export var test_fetch_post_form_data = function (done) {
@@ -162,16 +122,9 @@ export var test_fetch_post_form_data = function (done) {
     }).then(r => {
         return r.formData();
     }).then(function (r) {
-        try {
         TKUnit.assert(r instanceof FormData, "Content not sent/received properly! Actual result is: " + r);
         done(null);
-        }
+    }).catch(failOnError(done));
-        catch (err) {
-            done(err);
-        }
-    }, function (e) {
-            done(e);
-        });
 };
 
 export var test_fetch_post_json = function (done) {
@@ -182,20 +135,14 @@ export var test_fetch_post_json = function (done) {
         body: JSON.stringify({ MyVariableOne: "ValueOne", MyVariableTwo: "ValueTwo" })
     }).then(r => { return r.json(); }).then(function (r) {
         // >> (hide)
-        try {
         TKUnit.assert(r.json["MyVariableOne"] === "ValueOne" && r.json["MyVariableTwo"] === "ValueTwo", "Content not sent/received properly! Actual result is: " + r.json);
         done(null);
-        }
-        catch (err) {
-            done(err);
-        }
         // << (hide)
         // console.log(result);
-    }, function (e) {
+    }).catch(failOnError(done));
-            // >> (hide)
-            done(e);
-            // << (hide)
-            // console.log("Error occurred " + e);
-        });
     // << fetch-post-json
 };
+
+const failOnError = function (done: (err: Error, res?: string) => void) {
+    return e => done(e);
+}

tns-core-modules/fetch/fetch.js

@@ -310,8 +310,8 @@
                 resolve(new Response(xhr.responseText, options))
             }
 
-            xhr.onerror = function () {
+            xhr.onerror = function (error) {
-                reject(new TypeError('Network request failed'))
+                reject(new TypeError(['Network request failed:', error.message].join(' ')))
             }
 
             xhr.open(request.method, request.url, true)