Add non-success response logging to FetchClient

packages/libs/http-utils/src/FetchClient.ts

@@ -37,19 +37,49 @@ export interface FetchApiOptions {
   init?: RequestInit;
   /** Implementation of `fetch` function. Defaults to `window.fetch`. */
   fetchApi?: Window['fetch'];
+  /**
+   * Callback that can be used for reporting errors. A Promise rejection will
+   * still occur.
+   */
+  onNonSuccessResponse?: (error: Error) => void;
+}
+
+class FetchClientError extends Error {
+  name = 'FetchClientError';
 }
 
 export abstract class FetchClient {
+  /** Default callback used, if none is specified to constructor. */
+  private static onNonSuccessResponse: FetchApiOptions['onNonSuccessResponse'];
+
   protected readonly baseUrl: string;
   protected readonly init: RequestInit;
   protected readonly fetchApi: Window['fetch'];
+  protected readonly onNonSuccessResponse: FetchApiOptions['onNonSuccessResponse'];
   // Subclasses can set this to false to disable including a traceparent header with all requests.
   protected readonly includeTraceidHeader: boolean = true;
 
   constructor(options: FetchApiOptions) {
     this.baseUrl = options.baseUrl;
     this.init = options.init ?? {};
     this.fetchApi = options.fetchApi ?? window.fetch;
+    this.onNonSuccessResponse =
+      options.onNonSuccessResponse ?? FetchClient.onNonSuccessResponse;
+  }
+
+  /**
+   * Set a default callback for all instances. Should only be called once.
+   */
+  public static setOnNonSuccessResponse(
+    callback: FetchApiOptions['onNonSuccessResponse']
+  ) {
+    if (this.onNonSuccessResponse) {
+      console.warn(
+        'FetchClient.setOnNonSuccessResponse() should only be called once.'
+      );
+      return;
+    }
+    this.onNonSuccessResponse = callback;
   }
 
   protected async fetch<T>(apiRequest: ApiRequest<T>): Promise<T> {
@@ -74,9 +104,13 @@ export abstract class FetchClient {
 
       return await transformResponse(responseBody);
     }
-    throw new Error(
-      `${response.status} ${response.statusText}${'\n'}${await response.text()}`
+    const fetchError = new FetchClientError(
+      `${request.method.toUpperCase()} ${request.url}: ${response.status} ${
+        response.statusText
+      }${'\n'}${await response.text()}`
     );
+    this.onNonSuccessResponse?.(fetchError);
+    throw fetchError;
   }
 }
 

packages/libs/web-common/src/bootstrap.js

@@ -16,6 +16,7 @@ import { debounce, identity, uniq, flow } from 'lodash';
 
 // TODO Remove auth_tkt from url before proceeding
 
+import { FetchClient } from '@veupathdb/http-utils';
 import { initialize as initializeWdk_ } from '@veupathdb/wdk-client/lib/Core/main';
 import * as WdkComponents from '@veupathdb/wdk-client/lib/Components';
 import * as WdkControllers from '@veupathdb/wdk-client/lib/Controllers';
@@ -94,6 +95,11 @@ export function initialize(options = {}) {
 
   context.store.dispatch(loadSiteConfig(siteConfig));
 
+  // Add non-success response handler for FetchClient instances
+  FetchClient.setOnNonSuccessResponse((error) => {
+    context.wdkService.submitError(error);
+  });
+
   return context;
 }