chore: FIT-772: [FE] Refactor API Provider to avoid problematic imports (#8620)

Co-authored-by: bmartel <bmartel@users.noreply.github.com>

Author: bmartel

web/apps/labelstudio/src/providers/ApiProvider.tsx

@@ -1,28 +1,25 @@
+import { type PropsWithChildren, useCallback, useEffect, forwardRef } from "react";
 import {
-  createContext,
-  forwardRef,
-  type PropsWithChildren,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useState,
-} from "react";
+  ApiProvider as CoreApiProvider,
+  createApiInstance,
+  type ApiContextType,
+  type FormattedError,
+} from "@humansignal/core";
+import type { ApiResponse } from "@humansignal/core/lib/api-proxy/types";
 import { ErrorWrapper } from "../components/Error/Error";
 import { modal } from "../components/Modal/Modal";
 import { API_CONFIG } from "../config/ApiConfig";
-import { type ApiParams, APIProxy } from "@humansignal/core/lib/api-proxy";
 import { absoluteURL, isDefined } from "../utils/helpers";
 import { FF_IMPROVE_GLOBAL_ERROR_MESSAGES, isFF } from "../utils/feature-flags";
-import type { ApiResponse, WrappedResponse } from "@humansignal/core/lib/api-proxy/types";
 import { ToastType, useToast } from "@humansignal/ui";
 import { captureException } from "../config/Sentry";
 
 export const IMPROVE_GLOBAL_ERROR_MESSAGES = isFF(FF_IMPROVE_GLOBAL_ERROR_MESSAGES);
 // Duration for toast errors
 export const API_ERROR_TOAST_DURATION = 10000;
 
-export const API = new APIProxy({
+// Initialize API instance with Label Studio configuration
+const apiInstance = createApiInstance({
   ...API_CONFIG,
   onRequestFinished(res) {
     if (res.status === 401) {
@@ -31,65 +28,20 @@ export const API = new APIProxy({
   },
 });
 
-export type ApiEndpoints = keyof typeof API.methods;
-
-let apiLocked = false;
-
-export type ApiCallOptions = {
-  params?: any;
-  suppressError?: boolean;
-  errorFilter?: (response: ApiResponse) => boolean;
-} & ApiParams;
-
-export type ErrorDisplayMessage = (
-  errorDetails: FormattedError,
-  result: ApiResponse,
-  showGlobalError?: boolean,
-) => void;
-
-export type ApiContextType = {
-  api: typeof API;
-  callApi: <T>(method: keyof (typeof API)["methods"], options?: ApiCallOptions) => Promise<WrappedResponse<T> | null>;
-  handleError: (
-    response: Response | ApiResponse,
-    displayErrorMessage?: ErrorDisplayMessage,
-    showGlobalError?: boolean,
-  ) => Promise<boolean>;
-  resetError: () => void;
-  error: ApiResponse | null;
-  showGlobalError: boolean;
-  errorFormatter: (result: ApiResponse) => FormattedError;
-  isValidMethod: (name: string) => boolean;
-};
-
-export type FormattedError = {
-  title: string;
-  message: string;
-  stacktrace: string;
-  version: string;
-  validation: [string, string[]][];
-  isShutdown: boolean;
-};
+// Export API instance for backward compatibility
+export const API = apiInstance;
 
-export const ApiContext = createContext<ApiContextType | null>(null);
-ApiContext.displayName = "ApiContext";
+// Re-export useAPI and ApiContext from core for convenience
+export { useAPI, ApiContext } from "@humansignal/core";
 
-export const errorFormatter = (result: ApiResponse): FormattedError => {
-  const response = "response" in result ? result.response : null;
-  // we should not block app because of some network issue
-  const isShutdown = false;
+export type ApiEndpoints = keyof typeof API.methods;
 
-  return {
-    isShutdown,
-    title: result.error ? "Runtime error" : "Server error",
-    message: response?.detail ?? result?.error,
-    stacktrace: response?.exc_info ?? null,
-    version: response?.version,
-    validation: Object.entries<string[]>(response?.validation_errors ?? {}),
-  };
-};
+let apiLocked = false;
 
-const displayErrorModal: ErrorDisplayMessage = (errorDetails) => {
+/**
+ * Displays an error modal with the error details.
+ */
+const displayErrorModal = (errorDetails: FormattedError) => {
   const { isShutdown, title, message, stacktrace, ...formattedError } = errorDetails;
 
   modal({
@@ -114,173 +66,82 @@ const displayErrorModal: ErrorDisplayMessage = (errorDetails) => {
   });
 };
 
-const handleError = async (
-  response: Response | ApiResponse,
-  displayErrorMessage?: ErrorDisplayMessage,
-  showGlobalError = true,
-) => {
-  let result: ApiResponse = response as ApiResponse;
-
-  if (response instanceof Response) {
-    result = await API.generateError(response);
-  }
-
-  const errorDetails = errorFormatter(result);
-
-  // Allow inline error handling
-  console.log(showGlobalError);
-  if (!showGlobalError) {
-    return errorDetails.isShutdown;
-  }
-
-  if (displayErrorMessage) {
-    displayErrorMessage(errorDetails, result);
-  } else {
-    displayErrorModal(errorDetails, result);
-  }
-
-  return errorDetails.isShutdown;
-};
-
-const handleGlobalErrorMessage = (result?: ApiResponse, errorFilter?: (result: ApiResponse) => boolean) => {
-  return result?.error && (!isDefined(errorFilter) || errorFilter(result) === false);
-};
-
-export const ApiProvider = forwardRef<ApiContextType, PropsWithChildren<any>>(({ children }, ref) => {
-  const [error, setError] = useState<ApiResponse | null>(null);
+/**
+ * Label Studio application-specific ApiProvider.
+ * Wraps the core ApiProvider with Label Studio-specific error handling.
+ */
+export const ApiProvider = forwardRef<ApiContextType, PropsWithChildren<Record<string, never>>>(({ children }, ref) => {
   const toast = useToast();
 
-  const resetError = () => setError(null);
-
-  const callApi = useCallback(
-    async <T,>(
-      method: keyof (typeof API)["methods"],
-      { params = {}, errorFilter, suppressError, ...rest }: ApiCallOptions = {},
-    ): Promise<WrappedResponse<T> | null> => {
-      if (apiLocked) return null;
-
-      setError(null);
-
-      const result = await API.invoke(method, params, rest);
-      const shouldHandleGlobalErrorMessage = handleGlobalErrorMessage(result, errorFilter);
-
-      // If the error is due to a 404 and we are not handling it inline, we need to redirect to a working page
-      // and show a global error message of the resource not being found
-      if (
-        result &&
-        "status" in result &&
-        (result.status === 401 ||
-          (IMPROVE_GLOBAL_ERROR_MESSAGES && result.status === 404 && shouldHandleGlobalErrorMessage))
-      ) {
-        apiLocked = true;
-
-        let redirectUrl = absoluteURL("/");
-
-        if (result.status === 404) {
-          // If coming from projects or a labelling page, redirect to projects
-          if (location.pathname.startsWith("/projects")) {
-            redirectUrl = absoluteURL("/projects");
-          }
-
-          // Store the error message in sessionStorage to show after redirect
-          sessionStorage.setItem("redirectMessage", "The page or resource you were looking for does not exist.");
-        }
-
-        // Perform immediate redirect
-        location.href = redirectUrl;
-        return null;
+  /**
+   * Handles errors with Label Studio-specific logic including:
+   * - Toast notifications for 4xx errors
+   * - Modal errors for validation errors
+   * - Sentry logging for server errors
+   */
+  const handleError = useCallback(
+    (errorDetails: FormattedError, result: ApiResponse) => {
+      const status = result.$meta?.status;
+      const is4xx = status?.toString().startsWith("4");
+      const containsValidationErrors =
+        isDefined(result.response?.validation_errors) && Object.keys(result.response.validation_errors).length > 0;
+
+      // Log to Sentry for non-4xx or errors with stacktraces
+      if ((!is4xx || result.response?.exc_info) && result.error) {
+        captureException(new Error(result.error), {
+          extra: {
+            status,
+            server_stacktrace: result.response?.exc_info,
+            server_version: result.response?.version,
+          },
+        });
       }
 
-      if (result?.error) {
-        const status = result.$meta.status;
-        const requestCancelled = !status;
-        const requestAborted = result.error?.includes("aborted");
-        const requestCompleted = !(requestCancelled || requestAborted);
-        const containsValidationErrors =
-          isDefined(result.response?.validation_errors) && Object.keys(result.response?.validation_errors).length > 0;
-
-        let shouldShowGlobalError = shouldHandleGlobalErrorMessage && requestCompleted;
-
-        if (IMPROVE_GLOBAL_ERROR_MESSAGES && requestCompleted) {
-          // We only show toast errors for 4xx errors
-          // Any non-4xx errors are logged to Sentry but there is nothing the user can do about them so don't show them to the user
-          // 401 errors are handled above
-          // If we end up with an empty status string from a cancelled request, don't show the error
-          const is4xx = status.toString().startsWith("4");
-          const stacktrace = result.response?.exc_info;
-          const version = result.response?.version;
-
-          shouldShowGlobalError = shouldShowGlobalError && is4xx;
-
-          // Log non-4xx errors that are not aborted or cancelled requests, or any errors containing an api stacktrace to Sentry
-          // So we know about them but don't show them to the user
-          if ((!is4xx || stacktrace) && result.error) {
-            captureException(new Error(result.error), {
-              extra: {
-                method,
-                params,
-                status,
-                server_stacktrace: stacktrace,
-                server_version: version,
-              },
-            });
-          }
-        }
+      // Show toast for 4xx without validation errors
+      if (IMPROVE_GLOBAL_ERROR_MESSAGES && is4xx && !containsValidationErrors) {
+        toast?.show({
+          message: `${errorDetails.title}: ${errorDetails.message}`,
+          type: ToastType.error,
+          duration: API_ERROR_TOAST_DURATION,
+        });
+      } else {
+        // Show modal for validation errors or non-4xx
+        displayErrorModal(errorDetails);
+      }
+    },
+    [toast],
+  );
 
-        // Allow inline error handling
-        if (suppressError !== true) {
-          setError(result);
-        }
+  /**
+   * Handles fatal errors like 401 and 404.
+   */
+  const handleFatalError = useCallback((errorDetails: FormattedError, result: ApiResponse) => {
+    if (apiLocked) return;
 
-        if (shouldShowGlobalError && suppressError !== true) {
-          let displayErrorToast: ErrorDisplayMessage | undefined;
+    const status = result.$meta?.status;
 
-          // If there are no validation errors, show a toast error
-          // Otherwise, show a modal error as previously handled
-          if (IMPROVE_GLOBAL_ERROR_MESSAGES && !containsValidationErrors) {
-            displayErrorToast = (errorDetails) => {
-              toast?.show({
-                message: `${errorDetails.title}: ${errorDetails.message}`,
-                type: ToastType.error,
-                duration: API_ERROR_TOAST_DURATION,
-              });
-            };
-          }
+    // Handle 401 redirects
+    if (status === 401) {
+      apiLocked = true;
+      location.href = absoluteURL("/");
+      return;
+    }
 
-          // Use global error handling
-          const isShutdown = await handleError(result, displayErrorToast, contextValue.showGlobalError);
-          apiLocked = apiLocked || isShutdown;
+    // Handle 404 redirects with improved error messages
+    if (IMPROVE_GLOBAL_ERROR_MESSAGES && status === 404) {
+      apiLocked = true;
+      let redirectUrl = absoluteURL("/");
 
-          return null;
-        }
+      if (location.pathname.startsWith("/projects")) {
+        redirectUrl = absoluteURL("/projects");
       }
 
-      return result as WrappedResponse<T>;
-    },
-    [],
-  );
-
-  const contextValue: ApiContextType = useMemo(
-    () => ({
-      api: API,
-      callApi,
-      handleError,
-      resetError,
-      error,
-      showGlobalError: true,
-      errorFormatter,
-      isValidMethod(name: string) {
-        return API.isValidMethod(name);
-      },
-    }),
-    [error, callApi],
-  );
-
-  useEffect(() => {
-    if (ref && !(ref instanceof Function)) ref.current = contextValue;
-  }, [ref]);
+      sessionStorage.setItem("redirectMessage", "The page or resource you were looking for does not exist.");
+      location.href = redirectUrl;
+    }
+  }, []);
 
-  // Check for redirect message in sessionStorage and display it
+  // Check for redirect messages on mount
   useEffect(() => {
     const redirectMessage = sessionStorage.getItem("redirectMessage");
     if (redirectMessage) {
@@ -289,14 +150,15 @@ export const ApiProvider = forwardRef<ApiContextType, PropsWithChildren<any>>(({
         type: ToastType.error,
         duration: API_ERROR_TOAST_DURATION,
       });
-      // Remove the message from sessionStorage to prevent showing it again
       sessionStorage.removeItem("redirectMessage");
     }
   }, [toast]);
 
-  return <ApiContext.Provider value={contextValue}>{children}</ApiContext.Provider>;
+  return (
+    <CoreApiProvider ref={ref} onError={handleError} onFatalError={handleFatalError}>
+      {children}
+    </CoreApiProvider>
+  );
 });
 
-export const useAPI = () => {
-  return useContext(ApiContext)!;
-};
+ApiProvider.displayName = "ApiProvider";