refactor: Update API error handling and display

The API class in API.ts has been updated to improve error handling and display. The getFriendlyErrorMessage method now includes additional error cases and returns more specific error messages for network errors, timeouts, request aborts, cancellations, connection issues, and SSL certificate expiration. This change enhances the user experience by providing clearer and more informative error messages.

Common/Utils/API.ts

@@ -352,55 +352,57 @@ export default class API {
     public static getFriendlyErrorMessage(error: AxiosError | Error): string {
         const errorString: string = error.message || error.toString();
 
-        if(errorString.toLocaleLowerCase().includes('network error')) {
+        if (errorString.toLocaleLowerCase().includes('network error')) {
             return 'Network Error';
         }
 
-        if(errorString.toLocaleLowerCase().includes('timeout')) {
+        if (errorString.toLocaleLowerCase().includes('timeout')) {
             return 'Timeout Error';
         }
 
-        if(errorString.toLocaleLowerCase().includes('request aborted')) {
+        if (errorString.toLocaleLowerCase().includes('request aborted')) {
             return 'Request Aborted';
         }
 
-        if(errorString.toLocaleLowerCase().includes('canceled')) {
+        if (errorString.toLocaleLowerCase().includes('canceled')) {
             return 'Request Canceled';
         }
 
-        if(errorString.toLocaleLowerCase().includes('connection refused')) {
+        if (errorString.toLocaleLowerCase().includes('connection refused')) {
             return 'Connection Refused';
         }
 
-        if(errorString.toLocaleLowerCase().includes('connection reset')) {
+        if (errorString.toLocaleLowerCase().includes('connection reset')) {
             return 'Connection Reset';
         }
 
-        if(errorString.toLocaleLowerCase().includes('connection closed')) {
+        if (errorString.toLocaleLowerCase().includes('connection closed')) {
             return 'Connection Closed';
         }
 
-        if(errorString.toLocaleLowerCase().includes('connection failed')) {
+        if (errorString.toLocaleLowerCase().includes('connection failed')) {
             return 'Connection Failed';
         }
 
-        if(errorString.toLocaleLowerCase().includes('enotfound')) {
+        if (errorString.toLocaleLowerCase().includes('enotfound')) {
             return 'Cannot Find Host';
         }
 
-        if(errorString.toLocaleLowerCase().includes('econnreset')) {
+        if (errorString.toLocaleLowerCase().includes('econnreset')) {
             return 'Connection Reset';
         }
 
-        if(errorString.toLocaleLowerCase().includes('econnrefused')) {
+        if (errorString.toLocaleLowerCase().includes('econnrefused')) {
             return 'Connection Refused';
         }
 
-        if(errorString.toLocaleLowerCase().includes('econnaborted')) {
+        if (errorString.toLocaleLowerCase().includes('econnaborted')) {
             return 'Connection Aborted';
         }
 
-        if(errorString.toLocaleLowerCase().includes('certificate has expired')) {
+        if (
+            errorString.toLocaleLowerCase().includes('certificate has expired')
+        ) {
             return 'SSL Certificate Expired';
         }
 

CommonServer/Utils/Probe/ProbeMonitorResponse.ts

@@ -908,10 +908,8 @@ export default class ProbeMonitorResponseService {
                 input.probeApiIngestResponse.rootCause =
                     rootCause +
                     ' ' +
-                    (
-                        (input.dataToProcess as ProbeMonitorResponse)
-                            .failureCause || ''
-                    );
+                    ((input.dataToProcess as ProbeMonitorResponse)
+                        .failureCause || '');
                 break;
             }
         }

Dashboard/src/Components/Monitor/SummaryView/WebsiteMonitorView.tsx

@@ -83,16 +83,18 @@ const WebsiteMonitorSummaryView: FunctionComponent<ComponentProps> = (
                 />
             </div>
 
-            {props.probeMonitorResponse.failureCause && <div className="flex space-x-3">
-                <InfoCard
-                    className="w-full shadow-none border-2 border-gray-100 "
-                    title="Error"
-                    value={
-                        props.probeMonitorResponse.failureCause?.toString() ||
-                        '-'
-                    }
-                />
-            </div>}
+            {props.probeMonitorResponse.failureCause && (
+                <div className="flex space-x-3">
+                    <InfoCard
+                        className="w-full shadow-none border-2 border-gray-100 "
+                        title="Error"
+                        value={
+                            props.probeMonitorResponse.failureCause?.toString() ||
+                            '-'
+                        }
+                    />
+                </div>
+            )}
 
             {showMoreDetails && fields.length > 0 && (
                 <div>

Ingestor/Index.ts

@@ -21,7 +21,6 @@ const app: ExpressApplication = Express.getExpressApp();
 
 const APP_NAME: string = 'ingestor';
 
-
 app.use([`/${APP_NAME}`, '/'], AliveAPI);
 app.use([`/${APP_NAME}`, '/'], RegisterAPI);
 app.use([`/${APP_NAME}`, '/'], MonitorAPI);