Error handling for OG

src/App.tsx

@@ -4,14 +4,25 @@
   QueryClientProvider,
 } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import type { AxiosError } from 'axios';
 import React from 'react';
 import { connect, Provider } from 'react-redux';
+import {
+  clearFailedAuthRequestsQueue,
+  retryFailedAuthRequests,
+} from './api/api';
 import './App.css';
 import { MicroFrontendId } from './app.types';
+import handleOG_APIError from './handleOG_APIError';
 import OGThemeProvider from './ogThemeProvider.component';
 import Preloader from './preloader/preloader.component';
+import retryOG_APIErrors from './retryOG_APIErrors';
 import SettingsMenuItems from './settingsMenuItems.component';
-import { requestPluginRerender } from './state/scigateway.actions';
+import {
+  broadcastSignOut,
+  requestPluginRerender,
+  tokenRefreshed,
+} from './state/scigateway.actions';
 import { configureApp } from './state/slices/configSlice';
 import { RootState, store } from './state/store';
 import ViewTabs from './views/viewTabs.component';
@@ -23,12 +34,15 @@
     queries: {
       refetchOnWindowFocus: true,
       staleTime: 300000,
+      retry: (failureCount, error) => {
+        return retryOG_APIErrors(failureCount, error as AxiosError);
+      },
     },
   },
-  // TODO: implement proper error handling
+
   queryCache: new QueryCache({
     onError: (error) => {
-      console.log('Got error ' + error.message);
+      handleOG_APIError(error as AxiosError);
     },
   }),
 });
@@ -58,7 +72,8 @@
     const action = (e as CustomEvent).detail;
     if (requestPluginRerender.match(action)) {
       forceUpdate();
-    }
+    } else if (tokenRefreshed.match(action)) retryFailedAuthRequests();
+    else if (broadcastSignOut.match(action)) clearFailedAuthRequestsQueue();
   }
 
   React.useEffect(() => {

src/api/api.tsx

@@ -0,0 +1,88 @@
+import axios from 'axios';
+import { MicroFrontendId, type APIError } from '../app.types';
+import { readSciGatewayToken } from '../parseTokens';
+import { settings } from '../settings';
+import { InvalidateTokenType } from '../state/scigateway.actions';
+
+// These are for ensuring refresh request is only sent once when multiple requests
+// are failing due to 403's at the same time
+let isFetchingAccessToken = false;
+let failedAuthRequestQueue: ((shouldReject?: boolean) => void)[] = [];
+
+/* This should be called when SciGateway successfully refreshes the access token - it retries
+   all requests that failed due to an invalid token */
+export const retryFailedAuthRequests = () => {
+  isFetchingAccessToken = false;
+  failedAuthRequestQueue.forEach((callback) => callback());
+  failedAuthRequestQueue = [];
+};
+
+/* This should be called when SciGateway logs out as would occur if a token refresh fails
+   due to the refresh token being out of date - it rejects all active request promises that
+   were awaiting a token refresh using the original error that occurred on the first attempt */
+export const clearFailedAuthRequestsQueue = () => {
+  isFetchingAccessToken = false;
+  failedAuthRequestQueue.forEach((callback) => callback(true));
+  failedAuthRequestQueue = [];
+};
+
+export const ogApi = axios.create();
+
+ogApi.interceptors.request.use(async (config) => {
+  const settingsData = await settings;
+  config.baseURL = settingsData ? settingsData.apiUrl : '';
+  config.headers['Authorization'] = `Bearer ${readSciGatewayToken()}`;
+  return config;
+});
+
+ogApi.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    const originalRequest = error.config;
+
+    const errorDetail = (error.response.data as APIError)?.detail;
+
+    const errorMessage =
+      typeof errorDetail === 'string'
+        ? errorDetail.toLocaleLowerCase()
+        : error.message;
+
+    // Check if the token is invalid and needs refreshing
+    // only allow a request to be retried once. Don't retry if not logged
+    // in, it should not have been accessible
+    if (
+      error.response?.status === 403 &&
+      errorMessage.includes('invalid token') &&
+      !originalRequest._retried &&
+      localStorage.getItem('scigateway:token')
+    ) {
+      originalRequest._retried = true;
+
+      // Prevent other requests from also attempting to refresh while waiting for
+      // SciGateway to refresh the token
+      if (!isFetchingAccessToken) {
+        isFetchingAccessToken = true;
+
+        // Request SciGateway to refresh the token
+        document.dispatchEvent(
+          new CustomEvent(MicroFrontendId, {
+            detail: {
+              type: InvalidateTokenType,
+            },
+          })
+        );
+      }
+
+      // Add request to queue to be resolved only once SciGateway has successfully
+      // refreshed the token
+      return new Promise((resolve, reject) => {
+        failedAuthRequestQueue.push((shouldReject?: boolean) => {
+          if (shouldReject) reject(error);
+          else resolve(ogApi(originalRequest));
+        });
+      });
+    }
+    // Any other error
+    else return Promise.reject(error);
+  }
+);

src/api/channels.test.tsx

@@ -219,10 +219,6 @@ describe('channels api functions', () => {
 
       expect(result.current.data).toEqual([]);
     });
-
-    it.todo(
-      'sends axios request to fetch channels and throws an appropriate error on failure'
-    );
   });
 
   describe('getScalarChannels', () => {
@@ -310,10 +306,6 @@ describe('channels api functions', () => {
 
       expect(result.current.data).toEqual([]);
     });
-
-    it.todo(
-      'sends axios request to fetch records and throws an appropriate error on failure'
-    );
   });
 
   describe('useChannelSummary', () => {
@@ -363,10 +355,6 @@ describe('channels api functions', () => {
       expect(result.current.isPending).toBeTruthy();
       expect(requestSent).toBe(false);
     });
-
-    it.todo(
-      'sends axios request to fetch records and throws an appropriate error on failure'
-    );
   });
 
   describe('useScalarChannels', () => {

src/api/channels.tsx

@@ -4,7 +4,7 @@ import {
   UseQueryResult,
 } from '@tanstack/react-query';
 import { ColumnDef, createColumnHelper } from '@tanstack/react-table';
-import axios, { AxiosError } from 'axios';
+import { AxiosError } from 'axios';
 import React from 'react';
 import {
   FullChannelMetadata,
@@ -16,16 +16,15 @@ import {
   timeChannelName,
   ValidateFunctionState,
 } from '../app.types';
-import { readSciGatewayToken } from '../parseTokens';
 import { useAppDispatch, useAppSelector } from '../state/hooks';
-import { selectUrls } from '../state/slices/configSlice';
 import { selectAppliedFunctions } from '../state/slices/functionsSlice';
 import { openImageWindow, openTraceWindow } from '../state/slices/windowSlice';
 import { AppDispatch } from '../state/store';
 import {
   roundNumber,
   TraceOrImageThumbnail,
 } from '../table/cellRenderers/cellContentRenderers';
+import { ogApi } from './api';
 import { convertExpressionsToStrings } from './functions';
 
 interface ChannelsEndpoint {
@@ -62,27 +61,17 @@ export const staticChannels: { [systemName: string]: FullChannelMetadata } = {
   },
 };
 
-const fetchChannels = (apiUrl: string): Promise<FullChannelMetadata[]> => {
-  return axios
-    .get<ChannelsEndpoint>(`${apiUrl}/channels`, {
-      headers: {
-        Authorization: `Bearer ${readSciGatewayToken()}`,
-      },
+const fetchChannels = async (): Promise<FullChannelMetadata[]> => {
+  const response = await ogApi.get<ChannelsEndpoint>(`/channels`);
+  const { channels } = response.data;
+  if (!channels || Object.keys(channels).length === 0) return [];
+  const convertedChannels: FullChannelMetadata[] = Object.entries(channels).map(
+    ([systemName, channel]) => ({
+      systemName,
+      ...channel,
     })
-    .then((response) => {
-      const { channels } = response.data;
-
-      if (!channels || Object.keys(channels).length === 0) return [];
-
-      const convertedChannels: FullChannelMetadata[] = Object.entries(
-        channels
-      ).map(([systemName, channel]) => ({
-        systemName,
-        ...channel,
-      }));
-
-      return [...Object.values(staticChannels), ...convertedChannels];
-    });
+  );
+  return [...Object.values(staticChannels), ...convertedChannels];
 };
 
 export interface ChannelSummary {
@@ -91,19 +80,12 @@ export interface ChannelSummary {
   recent_sample: { [timestamp: string]: string | number }[];
 }
 
-const fetchChannelSummary = (
-  apiUrl: string,
+const fetchChannelSummary = async (
   channel: string
 ): Promise<ChannelSummary> => {
-  return axios
-    .get(`${apiUrl}/channels/summary/${channel}`, {
-      headers: {
-        Authorization: `Bearer ${readSciGatewayToken()}`,
-      },
-    })
-    .then((response) => {
-      return response.data;
-    });
+  return ogApi
+    .get(`/channels/summary/${channel}`)
+    .then((response) => response.data);
 };
 
 // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint
@@ -113,12 +95,10 @@ export const useChannels = <T extends unknown = FullChannelMetadata[]>(
     'queryKey'
   >
 ): UseQueryResult<T, AxiosError> => {
-  const { apiUrl } = useAppSelector(selectUrls);
-
   return useQuery({
     queryKey: ['channels'],
     queryFn: () => {
-      return fetchChannels(apiUrl);
+      return fetchChannels();
     },
 
     ...(options ?? {}),
@@ -128,7 +108,6 @@ export const useChannels = <T extends unknown = FullChannelMetadata[]>(
 export const useChannelSummary = (
   channel: string | undefined
 ): UseQueryResult<ChannelSummary, AxiosError> => {
-  const { apiUrl } = useAppSelector(selectUrls);
   const dataChannel =
     typeof channel !== 'undefined' && !(channel in staticChannels)
       ? channel
@@ -138,7 +117,7 @@ export const useChannelSummary = (
     queryKey: ['channelSummary', dataChannel],
 
     queryFn: () => {
-      return fetchChannelSummary(apiUrl, dataChannel);
+      return fetchChannelSummary(dataChannel);
     },
 
     enabled: dataChannel.length !== 0,

src/api/experiment.test.tsx

@@ -23,9 +23,5 @@ describe('channels api functions', () => {
 
       expect(result.current.data).toEqual(expected);
     });
-
-    it.todo(
-      'sends axios request to fetch records and throws an appropriate error on failure'
-    );
   });
 });

src/api/experiment.tsx

@@ -1,31 +1,18 @@
 import { useQuery, UseQueryResult } from '@tanstack/react-query';
-import axios, { AxiosError } from 'axios';
+import { AxiosError } from 'axios';
 import { ExperimentParams } from '../app.types';
-import { readSciGatewayToken } from '../parseTokens';
-import { useAppSelector } from '../state/hooks';
-import { selectUrls } from '../state/slices/configSlice';
+import { ogApi } from './api';
 
-const fetchExperiment = (apiUrl: string): Promise<ExperimentParams[]> => {
-  return axios
-    .get(`${apiUrl}/experiments`, {
-      headers: {
-        Authorization: `Bearer ${readSciGatewayToken()}`,
-      },
-    })
-    .then((response) => {
-      return response.data;
-    });
+const fetchExperiment = async (): Promise<ExperimentParams[]> => {
+  return ogApi.get(`/experiments`).then((response) => response.data);
 };
 
 export const useExperiment = (): UseQueryResult<
   ExperimentParams[],
   AxiosError
 > => {
-  const { apiUrl } = useAppSelector(selectUrls);
-
   return useQuery({
     queryKey: ['experiments'],
-
-    queryFn: () => fetchExperiment(apiUrl),
+    queryFn: () => fetchExperiment(),
   });
 };