fix(SPV-1136): handle error on parsing error content in custom error …

…component.

src/components/CustomErrorComponent/CustomErrorComponent.tsx

@@ -1,25 +1,53 @@
 import fallingMan from '/falling-man.png';
-import { ErrorResponse } from '@bsv/spv-wallet-js-client';
+import {ErrorResponse} from '@bsv/spv-wallet-js-client';
 
 export interface CustomErrorComponentProps {
   error: ErrorResponse | Error;
 }
 
-export const CustomErrorComponent = ({ error }: CustomErrorComponentProps) => {
-  const isErrorResponse = (error: ErrorResponse | Error): error is ErrorResponse => error instanceof ErrorResponse;
+interface ApiErrorInfo {
+  status: number;
+  statusText: string;
+  message: string;
+}
+
+const extractApiError = (error: ErrorResponse | Error): ApiErrorInfo | null => {
+  let errorMessage = '';
+  if (error instanceof ErrorResponse) {
+    try {
+      errorMessage = JSON.parse(error.content).message;
+    } catch (error) {
+      console.log('Got unexpected error when parsing the content of the error response', error);
+    }
+
+    return {
+      status: error.response.status,
+      statusText: error.response.statusText,
+      message: errorMessage,
+    };
+  }
+  return null;
+};
+
+const ApiError = ({apiError}: { apiError: ApiErrorInfo }) => (
+  <>
+    <p className={'first-letter:capitalize'}> {apiError.message}</p>
+    <p>
+      {apiError.status} - {apiError.statusText}
+    </p>
+  </>
+);
+
+const ErrorMessage = ({error}: { error: Error }) => <p>{error.message}</p>;
+
+export const CustomErrorComponent = ({error}: CustomErrorComponentProps) => {
+  const apiError = extractApiError(error);
 
   return (
     <div className="flex flex-col w-full h-[80vh] justify-center items-center">
-      <img src={fallingMan} alt="error image" />
+      <img src={fallingMan} alt="error image"/>
       <p className="mt-4">Something went wrong</p>
-      <p className={'first-letter:capitalize'}>
-        {isErrorResponse(error) ? JSON.parse(error.content).message : error.message}
-      </p>
-      {isErrorResponse(error) && (
-        <p>
-          {error.response.status} - {error.response.statusText}
-        </p>
-      )}
+      {apiError ? <ApiError apiError={apiError}/> : <ErrorMessage error={error}/>}
     </div>
   );
 };

src/components/WebhookErrorComponent/WebhookErrorComponent.tsx

@@ -1,26 +1,26 @@
-import {ErrorResponse} from '@bsv/spv-wallet-js-client';
-import {ErrorComponentProps} from '@tanstack/react-router';
-import {CustomErrorComponent} from '@/components';
-import {Ban} from 'lucide-react';
+import { ErrorResponse } from '@bsv/spv-wallet-js-client';
+import { ErrorComponentProps } from '@tanstack/react-router';
+import { CustomErrorComponent } from '@/components';
+import { Ban } from 'lucide-react';
 
 const WebhooksDisabled = () => (
   <div className="flex flex-col w-full h-[80vh] justify-center items-center">
     <p>
-      <Ban className="size-44 text-gray-500"/>
+      <Ban className="size-44 text-gray-500" />
     </p>
     <p className="mt-4 text-gray-500">Notification feature is not enabled</p>
   </div>
 );
 
-export const WebhookErrorComponent = ({error}: ErrorComponentProps) => {
-  let errorCode = "";
+export const WebhookErrorComponent = ({ error }: ErrorComponentProps) => {
+  let errorCode = '';
   if (error instanceof ErrorResponse) {
     try {
       errorCode = JSON.parse(error.content).code;
     } catch (error) {
-      console.log("Got unexpected error when parsing the content of the error response", error);
+      console.log('Got unexpected error when parsing the content of the error response', error);
     }
   }
 
-  return errorCode === 'error-notifications-disabled' ? <WebhooksDisabled/> : <CustomErrorComponent error={error}/>;
+  return errorCode === 'error-notifications-disabled' ? <WebhooksDisabled /> : <CustomErrorComponent error={error} />;
 };