better error decoding

src/components/async-resource/another-async-resource.tsx

@@ -1,13 +1,11 @@
 import { CircularProgress, Typography } from '@equinor/eds-core-react';
-import { SerializedError } from '@reduxjs/toolkit';
-import { FetchBaseQueryError } from '@reduxjs/toolkit/query';
-import { getReasonPhrase } from 'http-status-codes';
 import React, { FunctionComponent, PropsWithChildren, ReactNode } from 'react';
 
 import { Alert } from '../alert';
 import { externalUrls } from '../../externalUrls';
 import { isNullOrUndefined } from '../../utils/object';
-import { FetchQueryResult } from '../../store/types';
+import { FetchQueryError, FetchQueryResult } from '../../store/types';
+import { getFetchErrorData } from '../../store/utils';
 
 type AnotherAsyncStatus = Pick<
   FetchQueryResult,
@@ -31,39 +29,16 @@ const LoadingComponent: FunctionComponent<{
     defaultContent
   );
 
-export function getErrorData(error: FetchQueryResult['error']): {
-  code?: string | number;
-  message: string;
-} {
-  let errObj: ReturnType<typeof getErrorData> = { message: '' };
-  if ((error as SerializedError).message || (error as SerializedError).code) {
-    const { code, message } = error as SerializedError;
-    errObj = { code, message };
-  } else if ((error as FetchBaseQueryError).status) {
-    const err = error as FetchBaseQueryError;
-    errObj.message = err.data as string;
-    if (typeof err.status === 'number') {
-      errObj.code = err.status;
-    } else if (err.status === 'PARSING_ERROR') {
-      errObj.code = err.originalStatus;
-      errObj.message = getReasonPhrase(errObj.code);
-    }
-  }
-
-  return errObj;
-}
-
-const ErrorPanel: FunctionComponent<
-  Required<Pick<FetchQueryResult, 'error'>>
-> = ({ error }) => {
-  const { message, code } = getErrorData(error);
+const ErrorPanel: FunctionComponent<{ error: FetchQueryError }> = ({
+  error,
+}) => {
+  const { code, message } = getFetchErrorData(error);
 
   return (
     <div>
       <Typography variant="caption">Error message:</Typography>
       <samp className="word-break">
-        {code && `${code}: `}
-        {message}
+        {[code, message].filter((x) => !!x).join(': ')}
       </samp>
     </div>
   );

src/components/page-active-component/component-replica-log-accordion.tsx

@@ -17,9 +17,7 @@ import {
   useState,
 } from 'react';
 
-import AsyncResource, {
-  getErrorData,
-} from '../async-resource/another-async-resource';
+import AsyncResource from '../async-resource/another-async-resource';
 import { errorToast } from '../global-top-nav/styled-toaster';
 import { Duration } from '../time/duration';
 import { RelativeToNow } from '../time/relative-to-now';
@@ -30,6 +28,7 @@ import {
   useGetComponentInventoryQuery,
 } from '../../store/log-api';
 import { FetchQueryResult } from '../../store/types';
+import { getFetchErrorData } from '../../store/utils';
 import { sortCompareDate, sortDirection } from '../../utils/sort-utils';
 import {
   copyToTextFile,
@@ -76,7 +75,7 @@ function saveLog(
     const extension = !fileName.endsWith('.txt') ? '.txt' : '';
     copyToTextFile(`${fileName}${extension}`, query.data as string);
   } else if (query.isError) {
-    const { code, message } = getErrorData(query.error);
+    const { code, message } = getFetchErrorData(query.error);
     errorToast(`${errMsg}: ${code && `[${code}] `}${message}`);
   }
 }

src/components/page-environment/component-list.tsx

@@ -3,9 +3,7 @@ import * as PropTypes from 'prop-types';
 import { FunctionComponent, useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 
-import AsyncResource, {
-  getErrorData,
-} from '../async-resource/another-async-resource';
+import AsyncResource from '../async-resource/another-async-resource';
 import { ComponentStatusBadge } from '../status-badges';
 import { ReplicaStatusTooltip } from '../status-tooltips';
 import { VulnerabilitySummary } from '../vulnerability-summary';
@@ -28,6 +26,7 @@ import {
   ImageWithLastScan,
   useGetEnvironmentVulnerabilitySummaryQuery,
 } from '../../store/scan-api';
+import { getFetchErrorData } from '../../store/utils';
 import {
   getActiveComponentUrl,
   getActiveJobComponentUrl,
@@ -120,7 +119,7 @@ export const ComponentList: FunctionComponent<ComponentListProps> = ({
   environment: { name: envName },
   components,
 }) => {
-  const { data: vulnerabilities, ...vulnerabilitiesState } =
+  const { data: vulnerabilities, ...state } =
     useGetEnvironmentVulnerabilitySummaryQuery({ appName, envName });
 
   const [compMap, setCompMap] = useState<Record<string, Array<ComponentModel>>>(
@@ -184,13 +183,15 @@ export const ComponentList: FunctionComponent<ComponentListProps> = ({
                         </Table.Cell>
                         <Table.Cell>
                           <AsyncResource
-                            asyncState={vulnerabilitiesState}
+                            asyncState={state}
                             errorContent={
                               <samp>
-                                {vulnerabilitiesState.error &&
+                                {state.isError &&
                                   (({ code, message }) =>
-                                    `${code && `${code}: `}${message}`)(
-                                    getErrorData(vulnerabilitiesState.error)
+                                    [code, message]
+                                      .filter((x) => !!x)
+                                      .join(': '))(
+                                    getFetchErrorData(state.error)
                                   )}
                               </samp>
                             }

src/components/page-scheduled-job/replica-log-accordion.tsx

@@ -17,9 +17,7 @@ import {
   useState,
 } from 'react';
 
-import AsyncResource, {
-  getErrorData,
-} from '../async-resource/another-async-resource';
+import AsyncResource from '../async-resource/another-async-resource';
 import { errorToast } from '../global-top-nav/styled-toaster';
 import { Duration } from '../time/duration';
 import { RelativeToNow } from '../time/relative-to-now';
@@ -31,6 +29,7 @@ import {
   useGetJobInventoryQuery,
 } from '../../store/log-api';
 import { FetchQueryResult } from '../../store/types';
+import { getFetchErrorData } from '../../store/utils';
 import { sortCompareDate, sortDirection } from '../../utils/sort-utils';
 import {
   copyToTextFile,
@@ -90,7 +89,7 @@ function saveLog(
     const extension = !fileName.endsWith('.txt') ? '.txt' : '';
     copyToTextFile(`${fileName}${extension}`, query.data as string);
   } else if (query.isError) {
-    const { code, message } = getErrorData(query.error);
+    const { code, message } = getFetchErrorData(query.error);
     errorToast(`${errMsg}: ${code && `[${code}] `}${message}`);
   }
 }

src/store/types.ts

@@ -11,3 +11,5 @@ export type FetchQueryResult<T = unknown> = Omit<
   FetchQueryHookResult<T>,
   'refetch'
 >;
+
+export type FetchQueryError = FetchQueryResult['error'];

src/store/utils/index.ts

@@ -0,0 +1,59 @@
+import { SerializedError } from '@reduxjs/toolkit';
+import { FetchBaseQueryError } from '@reduxjs/toolkit/query';
+import { getReasonPhrase } from 'http-status-codes';
+
+import { FetchQueryError } from '../types';
+
+export function getFetchErrorData(error: FetchQueryError): {
+  code?: string | number;
+  message: string;
+} {
+  const errObj: ReturnType<typeof getFetchErrorData> = {
+    code: undefined,
+    message: '',
+  };
+
+  if ((error as SerializedError).message || (error as SerializedError).code) {
+    errObj.code = (error as SerializedError).code;
+    errObj.message = (error as SerializedError).message;
+  } else if ((error as FetchBaseQueryError).status) {
+    const err = error as FetchBaseQueryError;
+    if (err.data?.['code'] || err.data?.['message']) {
+      // data is an object containing status
+      errObj.code = err.data['code'];
+      if (typeof err.data['message'] === 'string') {
+        errObj.message = err.data['message'];
+      }
+    } else if (typeof err.status === 'number') {
+      errObj.code = err.status;
+      if (typeof err.data === 'string') {
+        errObj.message = err.data;
+      }
+    } else if (err.status === 'PARSING_ERROR') {
+      errObj.code = err.originalStatus;
+      try {
+        const code = getReasonPhrase(errObj.code);
+        errObj.message = code;
+      } catch (_) {
+        // noop
+      }
+    } else {
+      errObj.code = err.status;
+      errObj.message = err.error;
+    }
+  }
+
+  return errObj;
+}
+
+export function getFetchErrorCode(
+  error: FetchQueryError
+): ReturnType<typeof getFetchErrorData>['code'] {
+  return getFetchErrorData(error).code;
+}
+
+export function getFetchErrorMessage(
+  error: FetchQueryError
+): ReturnType<typeof getFetchErrorData>['message'] {
+  return getFetchErrorData(error).message;
+}