Throws more useful error when fetch fails (#2921)

modules/core/src/index.ts

@@ -22,6 +22,7 @@ export type {
 
 // FILE READING AND WRITING
 export {fetchFile} from './lib/fetch/fetch-file';
+export {FetchError} from './lib/fetch/fetch-error';
 
 export {readArrayBuffer} from './lib/fetch/read-array-buffer';
 // export {readFileSync} from './lib/fetch/read-file';

modules/core/src/lib/fetch/fetch-error-message.ts

@@ -2,10 +2,12 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
+// TODO - duplicates response-utils code
 export function getErrorMessageFromResponseSync(response: Response): string {
   return `Failed to fetch resource ${response.url}(${response.status}): ${response.statusText} `;
 }
 
+// TODO - duplicates response-utils code
 export async function getErrorMessageFromResponse(response: Response): Promise<string> {
   let message = `Failed to fetch resource ${response.url} (${response.status}): `;
   try {

modules/core/src/lib/fetch/fetch-error.ts

@@ -0,0 +1,18 @@
+// loaders.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+export class FetchError extends Error {
+  constructor(message: string, info: {url: string; reason: string; response?: Response}) {
+    super(message);
+    this.reason = info.reason;
+    this.url = info.url;
+    this.response = info.response;
+  }
+  /** A best effort reason for why the fetch failed */
+  reason: string;
+  /** The URL that failed to load. Empty string if not available. */
+  url: string;
+  /** The Response object, if any. */
+  response?: Response;
+}

modules/core/src/lib/fetch/fetch-file.ts

@@ -4,6 +4,7 @@
 
 import {resolvePath} from '@loaders.gl/loader-utils';
 import {makeResponse} from '../utils/response-utils';
+// import {FetchError} from './fetch-error';
 
 export function isNodePath(url: string): boolean {
   return !isRequestURL(url) && !isDataURL(url);

modules/core/src/lib/utils/response-utils.ts

@@ -3,7 +3,9 @@
 // Copyright (c) vis.gl contributors
 
 import {isResponse} from '../../javascript-utils/is-type';
+import {FetchError} from '../fetch/fetch-error';
 import {getResourceContentLength, getResourceUrl, getResourceMIMEType} from './resource-utils';
+import {shortenUrlForDisplay} from './url-utils';
 
 /**
  * Returns a Response object
@@ -58,8 +60,8 @@ export async function makeResponse(resource: unknown): Promise<Response> {
  */
 export async function checkResponse(response: Response): Promise<void> {
   if (!response.ok) {
-    const message = await getResponseError(response);
-    throw new Error(message);
+    const error = await getResponseError(response);
+    throw error;
   }
 }
 
@@ -77,20 +79,26 @@ export function checkResponseSync(response: Response): void {
 
 // HELPERS
 
-async function getResponseError(response: Response): Promise<string> {
-  let message = `Failed to fetch resource ${response.url} (${response.status}): `;
+async function getResponseError(response: Response): Promise<Error> {
+  const shortUrl = shortenUrlForDisplay(response.url);
+  let message = `Failed to fetch resource (${response.status}) ${response.statusText}: ${shortUrl}`;
+  message = message.length > 100 ? `${message.slice(0, 100)}...` : message;
+
+  const info = {
+    reason: response.statusText,
+    url: response.url,
+    response
+  };
+
   try {
     const contentType = response.headers.get('Content-Type');
-    let text = response.statusText;
-    if (contentType?.includes('application/json')) {
-      text += ` ${await response.text()}`;
-    }
-    message += text;
-    message = message.length > 60 ? `${message.slice(0, 60)}...` : message;
+    info.reason = contentType?.includes('application/json')
+      ? await response.json()
+      : response.text();
   } catch (error) {
     // eslint forbids return in a finally statement, so we just catch here
   }
-  return message;
+  return new FetchError(message, info);
 }
 
 async function getInitialDataUrl(

modules/core/src/lib/utils/url-utils.ts

@@ -12,3 +12,12 @@ export function extractQueryString(url): string {
 export function stripQueryString(url): string {
   return url.replace(QUERY_STRING_PATTERN, '');
 }
+
+export function shortenUrlForDisplay(url: string): string {
+  if (url.length < 50) {
+    return url;
+  }
+  const urlEnd = url.slice(url.length - 15);
+  const urlStart = url.substr(0, 32);
+  return `${urlStart}...${urlEnd}`;
+}

modules/core/test/index.ts

@@ -10,6 +10,7 @@ import './iterators/make-stream.spec';
 import './lib/utils/mime-type-utils.spec';
 import './lib/utils/resource-utils.spec';
 import './lib/utils/response-utils.spec';
+import './lib/utils/url-utils.spec';
 
 import './lib/loader-utils/loggers.spec';
 import './lib/loader-utils/option-utils.spec';

modules/core/test/lib/utils/response-utils.spec.ts

@@ -73,6 +73,9 @@ test('checkResponseSync', (t) => {
 
 test('checkResponse', async (t) => {
   const response = new Response('{message: "server died"}', {status: 500});
+  Object.defineProperty(response, 'url', {
+    value: 'https://some.url/not/even/very/long'
+  });
   t.equal(response.ok, false, 'Check reponse.ok');
   t.rejects(() => checkResponse(response), /500/, 'Check reponse throws');
   // t.throws()

modules/core/test/lib/utils/url-utils.spec.ts

@@ -0,0 +1,15 @@
+// loaders.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import test from 'tape-promise/tape';
+import {shortenUrlForDisplay} from '@loaders.gl/core/lib/utils/url-utils';
+
+test('shortenUrlForDisplay', async (t) => {
+  const longUrl =
+    'http://www.longsitename.com/path1/path2/path3/longpath/longresourcename.extension';
+  const shortUrl = shortenUrlForDisplay(longUrl);
+
+  t.equal(shortUrl, 'http://www.longsitename.com/path...ename.extension');
+  t.end();
+});