Adding a wrapper for fetch to handle error responses.

Author: GregJHarris

src/misc/httpClient.test.ts

@@ -0,0 +1,87 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { CsWebLibHttpResponseError, httpRequest } from "./httpClient";
+
+describe("CsWebLibHttpResponseError", () => {
+  it("should create an error with the correct name", () => {
+    const error = new CsWebLibHttpResponseError("Test error", 404);
+    expect(error.name).toBe("CsWebLibHttpError");
+  });
+
+  it("should store the message passed to the constructor", () => {
+    const errorMessage = "Test error message";
+    const error = new CsWebLibHttpResponseError(errorMessage, 404);
+    expect(error.message).toBe(errorMessage);
+  });
+
+  it("should store the HTTP response code", () => {
+    const responseCode = 404;
+    const error = new CsWebLibHttpResponseError("Test error", responseCode);
+    expect(error.responseCode).toBe(responseCode);
+  });
+
+  it("should extend Error class", () => {
+    const error = new CsWebLibHttpResponseError("Test error", 404);
+    expect(error).toBeInstanceOf(Error);
+  });
+});
+
+describe("httpRequest", () => {
+  const mockFetch = vi.fn();
+  global.fetch = mockFetch;
+
+  beforeEach(() => {
+    mockFetch.mockReset();
+  });
+
+  afterEach(() => {
+    vi.resetAllMocks();
+  });
+
+  it("should call fetch on the URL", async () => {
+    const testUrl = "https://diamond.ac.uk/api";
+    const mockResponse = {
+      status: 200,
+      statusText: "OK"
+    };
+
+    mockFetch.mockResolvedValueOnce(mockResponse);
+
+    const result = await httpRequest(testUrl);
+
+    expect(mockFetch).toHaveBeenCalledWith(testUrl);
+    expect(result).toBe(mockResponse);
+  });
+
+  it("should call fetch with the URL and init argument", async () => {
+    const testUrl = "https://diamond.ac.uk/api";
+    const initOptions = {
+      method: "POST",
+      headers: { "Content-Type": "application/json" }
+    };
+    const mockResponse = {
+      status: 201,
+      statusText: "Created"
+    };
+
+    mockFetch.mockResolvedValueOnce(mockResponse);
+
+    const result = await httpRequest(testUrl, initOptions);
+
+    expect(mockFetch).toHaveBeenCalledWith(testUrl, initOptions);
+    expect(result).toBe(mockResponse);
+  });
+
+  it("should throw CsWebLibHttpResponseError for 404 response", async () => {
+    const testUrl = "https://diamond.ac.uk/api";
+    const mockResponse = {
+      status: 404,
+      statusText: "Not Found"
+    };
+
+    mockFetch.mockResolvedValueOnce(mockResponse);
+
+    await expect(httpRequest(testUrl)).rejects.toThrow(
+      CsWebLibHttpResponseError
+    );
+  });
+});

src/misc/httpClient.ts

@@ -0,0 +1,27 @@
+export class CsWebLibHttpResponseError extends Error {
+  private _responseCode: number;
+
+  constructor(message: string, httpResponseCode: number) {
+    super(message);
+    this.name = "CsWebLibHttpError";
+    this._responseCode = httpResponseCode;
+  }
+
+  get responseCode(): number {
+    return this._responseCode;
+  }
+}
+
+export const httpRequest = async (
+  url: string,
+  init?: RequestInit
+): Promise<Response> => {
+  const response = init ? await fetch(url, init) : await fetch(url);
+
+  if (response?.status >= 400) {
+    const message = `HTTP GET failed for url: ${url}.\nResponse code ${response?.status}\nResponse message ${response?.statusText}\n `;
+    throw new CsWebLibHttpResponseError(message, response.status);
+  }
+
+  return response;
+};

src/misc/index.ts

@@ -1,3 +1,4 @@
 export { onRenderCallback } from "./profilerCallback";
 export { FileProvider, FileContext } from "./fileContext";
 export { OutlineContext, OutlineProvider } from "./outlineContext";
+export { CsWebLibHttpResponseError, httpRequest } from "./httpClient";

src/ui/hooks/useArchivedData.tsx

@@ -4,6 +4,7 @@ import { TimeSeriesPoint } from "../widgets/StripChart/stripChart";
 import { convertStringTimePeriod, trimArchiveData } from "../widgets/utils";
 import { useState, useEffect } from "react";
 import { Plt } from "../../types/plt";
+import { httpRequest } from "../../misc/httpClient";
 
 /**
  * Fetch archived data for each PV from archivers available
@@ -40,7 +41,7 @@ export function useArchivedData(plt: Plt): [TimeSeriesPoint[], boolean] {
       for (const url of Object.values(archivers)) {
         let tmpData: any[] = fetchedData;
         try {
-          const resp = await fetch(`${url}${timeString}`);
+          const resp = await httpRequest(`${url}${timeString}`);
           const json = await resp.json();
           json.forEach((data: any) => {
             // Trim each dataset down and push into fetchedData

src/ui/widgets/EmbeddedDisplay/pltParser.ts

@@ -11,6 +11,7 @@ import { parseChildProps, ParserDict } from "./parser";
 import { Axis } from "../../../types/axis";
 import { Archiver, Trace } from "../../../types/trace";
 import { Plt } from "../../../types/plt";
+import { httpRequest } from "../../../misc/httpClient";
 
 const PLT_PARSERS: ParserDict = {
   start: ["start", opiParseString],
@@ -220,7 +221,7 @@ async function fetchPltFile(file: string, parentDir: string) {
   if (parentDir && !file.startsWith("http")) {
     file = normalisePath(file, parentDir);
   }
-  const filePromise = await fetch(file);
+  const filePromise = await httpRequest(file);
   const contents = await filePromise.text();
   // Convert it to a "compact format"
   const compactJSON = xml2js(contents, {

src/ui/widgets/EmbeddedDisplay/useOpiFile.ts

@@ -6,6 +6,7 @@ import { errorWidget, WidgetDescription } from "../createComponent";
 import { parseBob } from "./bobParser";
 import { parseJson } from "./jsonParser";
 import { parseOpi } from "./opiParser";
+import { httpRequest } from "../../../misc/httpClient";
 
 // Global cache. Should perhaps be put in a context.
 const fileCache: FileCache = {};
@@ -32,12 +33,14 @@ async function fetchAndConvert(
   filepath: string,
   protocol: string
 ): Promise<WidgetDescription> {
-  const parentDir = filepath.substr(0, filepath.lastIndexOf("/"));
-  const filePromise = await fetch(filepath);
-  const fileExt = filepath.split(".").pop() || "json";
-  const contents = await filePromise.text();
-  let description = EMPTY_WIDGET;
   try {
+    const parentDir = filepath.substr(0, filepath.lastIndexOf("/"));
+    const fileResponse = await httpRequest(filepath);
+
+    const fileExt = filepath.split(".").pop() || "json";
+    const contents = await fileResponse.text();
+    let description = EMPTY_WIDGET;
+
     // Hack!
     if (contents.startsWith("<!DOCTYPE html>")) {
       throw new Error("File not found");