fix:added support for network error

Signed-off-by: Amitkanswal <[email protected]>

Author: Amitkanswal

src/uiLocation.ts

@@ -1,4 +1,4 @@
-import { AxiosRequestConfig, AxiosResponse } from 'axios';
+import { AxiosRequestConfig, AxiosResponse } from "axios";
 import postRobot from "post-robot";
 import EventEmitter from "wolfy87-eventemitter";
 
@@ -34,7 +34,7 @@ import { GenericObjectType } from "./types/common.types";
 import { User } from "./types/user.types";
 import { formatAppRegion, onData, onError } from "./utils/utils";
 import Window from "./window";
-import { dispatchApiRequest, dispatchAdapter } from './utils/adapter';
+import { dispatchApiRequest, dispatchAdapter } from "./utils/adapter";
 import { ContentstackEndpoints } from "./types/api.type";
 
 const emitter = new EventEmitter();
@@ -70,8 +70,7 @@ class UiLocation {
      */
     private config: GenericObjectType;
 
-
-    readonly endpoints: ContentstackEndpoints
+    readonly endpoints: ContentstackEndpoints;
 
     /**
      * This holds the instance of Cross-domain communication library for posting messages between windows.
@@ -158,7 +157,7 @@ class UiLocation {
         });
 
         this.metadata = new Metadata(postRobot);
-        
+
         this.config = initializationData.config ?? {};
 
         this.ids = {
@@ -181,14 +180,14 @@ class UiLocation {
             FullPage: null,
             FieldModifierLocation: null,
             ContentTypeSidebarWidget: null,
-            OrganizationFullPage: null
+            OrganizationFullPage: null,
         };
 
         window["postRobot"] = postRobot;
 
         this.modal = new Modal();
 
-        this.region = formatAppRegion(initializationData.region);   
+        this.region = formatAppRegion(initializationData.region);
         this.endpoints = initializationData.endpoints;
 
         const stack = new Stack(initializationData.stack, postRobot, {
@@ -292,10 +291,10 @@ class UiLocation {
 
             case LocationType.ORGANIZATION_FULL_PAGE: {
                 this.location.OrganizationFullPage = {
-                  currentOrganization: initializationData.organization,
+                    currentOrganization: initializationData.organization,
                 };
                 break;
-            } 
+            }
 
             case LocationType.CONTENT_TYPE_SIDEBAR_WIDGET: {
                 this.location.ContentTypeSidebarWidget =
@@ -477,23 +476,28 @@ class UiLocation {
         return this.region;
     };
 
-    getEndpoints = ():ContentstackEndpoints => {
+    getEndpoints = (): ContentstackEndpoints => {
         return this.endpoints;
-    }
+    };
     /**
      * Method used to make an API request to the Contentstack's CMA APIs.
      */
 
-    api = (url: string, option?: RequestInit): Promise<Response> => dispatchApiRequest(url, option) as Promise<Response>;
+    api = (url: string, option?: RequestInit): Promise<Response> =>
+        dispatchApiRequest(url, option) as Promise<Response>;
 
     /**
      * Method used to create an adapter for management sdk.
      */
-    createAdapter = (): (config: AxiosRequestConfig) => Promise<AxiosResponse> => {
+    createAdapter = (): ((
+        config: AxiosRequestConfig
+    ) => Promise<AxiosResponse>) => {
         return (config: AxiosRequestConfig): Promise<AxiosResponse> => {
-          return dispatchAdapter(postRobot)(config)
+            return dispatchAdapter(postRobot)(config) as Promise<
+                AxiosResponse<any, any>
+            >;
         };
-      };
+    };
 
     /**
      * Method used to initialize the App SDK.

src/utils/adapter.ts

@@ -2,37 +2,59 @@ import PostRobot from "post-robot";
 import { Response } from "node-fetch";
 import {
     AxiosError,
+    AxiosHeaders,
     AxiosRequestConfig,
     AxiosResponse,
 } from "axios";
 
-import {
-    onError,
-    fetchToAxiosConfig,
-    handleApiError,
-    sanitizeResponseHeader,
-} from "./utils";
+import { fetchToAxiosConfig } from "./utils";
 
 /**
  * Dispatches a request using PostRobot.
  * @param postRobot - The PostRobot instance.
  * @returns A function that takes AxiosRequestConfig and returns a promise.
  */
 export const dispatchAdapter =
-    (postRobot: typeof PostRobot) =>
-    (config: AxiosRequestConfig): Promise<AxiosResponse> => {
-        return postRobot
-            .sendToParent("apiAdapter", config)
-            .then((event: unknown) => {
-                const { data } = event as { data: AxiosResponse };
-                if (data.status >= 400) {
-                    throw data
-                }
-                return data;
-            })
-            .catch((err)=>onError(err));
+    (postRobot: typeof PostRobot) => (config: AxiosRequestConfig) => {
+        return new Promise((resolve, reject) => {
+            postRobot
+                .sendToParent("apiAdapter", config)
+                .then((event: unknown) => {
+                    const { data: response } = event as { data: AxiosResponse };
+
+                    if (response.status >= 400) {
+                        return reject({ ...response, config });
+                    }
+                    resolve({
+                        data: response.data,
+                        status: response.status,
+                        statusText: response.statusText,
+                        headers: response.headers,
+                        config: config,
+                    });
+                })
+                .catch(() => {
+                    return reject(
+                        new AxiosError(
+                            "Something went wrong with the request",
+                            "ERR_INTERNAL_SERVER",
+                            {
+                                ...config,
+                                headers: config.headers as AxiosHeaders,
+                            },
+                            null,
+                            undefined
+                        )
+                    );
+                });
+        });
     };
 /**
+GitHub Copilot
+To handle errors generically and robustly, we can refactor the code to ensure that all errors are properly processed and converted into a standardized format. Here's how you can fix and improve the error handling in the provided code:
+
+Refactored Code
+
  * Dispatches an API request using axios and PostRobot.
  * @param url - The URL of the API endpoint.
  * @param options - Optional request options.
@@ -44,20 +66,30 @@ export const dispatchApiRequest = async (
 ): Promise<Response> => {
     try {
         const config = fetchToAxiosConfig(url, options);
-        const responseData = (await dispatchAdapter(PostRobot)(
+        const response = (await dispatchAdapter(PostRobot)(
             config
         )) as AxiosResponse;
-       
-        
-        return new Response(responseData?.data, {
-            status: responseData.status,
-            statusText: responseData.statusText,
-            url: responseData.config.url,
-            headers: new Headers(
-                sanitizeResponseHeader(responseData.config.headers || {})
-            ),
+
+        return new Response(response?.data, {
+            status: response.status,
+            statusText: response.statusText,
+            url: response.config.url,
+            headers: new Headers(Object.entries(response.headers ?? {})),
+        });
+    } catch (err: any) {
+        if (err.response) {
+            return new Response(err.response?.data, {
+                status: err.status,
+                statusText: err.statusText,
+                headers: new Headers(
+                    Object.entries(err.response.headers ?? {})
+                ),
+            });
+        }
+        return new Response(err.stack, {
+            status: err.status || 500,
+            statusText: err.message || "Internal Server Error",
+            headers: new Headers(Object.entries(err.headers ?? {})),
         });
-    } catch (error) {
-        return handleApiError(error as AxiosResponse | AxiosError);
     }
 };

src/utils/utils.ts

@@ -1,23 +1,7 @@
-import {
-    AxiosError,
-    AxiosHeaders,
-    AxiosRequestConfig,
-    AxiosResponse,
-    isAxiosError,
-    RawAxiosRequestHeaders,
-} from "axios";
-import { Response } from "node-fetch";
+import { AxiosHeaders, AxiosRequestConfig } from "axios";
 
 import { Region, RegionType } from "../types";
 
-const filterHeaders = [
-    "api_key",
-    "authorization",
-    "auth_token",
-    "x-api-key",
-    "user-agent",
-  ];
-
 export function onData<Data extends Record<string, any>>(data: { data: Data }) {
     if (typeof data.data === "string") {
         return Promise.reject(data.data);
@@ -32,39 +16,11 @@ export function onError(error: Error) {
 export function sanitizeResponseHeader(axiosHeaders) {
     const fetchHeaders = new Headers();
     for (const key in axiosHeaders) {
-        if (axiosHeaders.hasOwnProperty(key) && !filterHeaders.includes(key)) {
-            fetchHeaders.append(key, axiosHeaders[key]);
-          }    
+        fetchHeaders.append(key, axiosHeaders[key]);
     }
     return fetchHeaders;
-};
-export const handleApiError = (error: AxiosResponse | AxiosError): Response => {
-    if (isAxiosError(error)) {
-        const isServerError = (error?.status ?? 0) >= 500;
-        const responseBody = isServerError
-            ? error.stack || "Internal Server Error"
-            : (error as unknown as AxiosResponse)?.data || "An error occurred";
-        const status = error?.status || 500;
-        const statusText =
-            isServerError
-                ? error.message || "Internal Server Error"
-                : (error as unknown as AxiosResponse)?.statusText || "Error";
-        const headers = new Headers(
-            sanitizeResponseHeader(error.response?.headers || {})
-        );
-        return new Response(JSON.stringify(responseBody), {
-            status,
-            statusText,
-            headers,
-        });
-    } else {
-        const responseBody = error.statusText || "An error occurred";
-        return new Response(JSON.stringify(responseBody), {
-            status: 500,
-            statusText: "Internal Server Error",
-        });
-    }
 }
+
 export function formatAppRegion(region: string): RegionType {
     return region ?? Region.UNKNOWN;
 }