updated the useApiErrorHandler hook by creating the method for tracki…

…ng errors directly
pimcore · Nov 29, 2024 · d67817d · d67817d
1 parent 1401e67
commit d67817d
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 26 deletions.
diff --git a/assets/js/src/core/hooks/use-api-error-handler.tsx b/assets/js/src/core/hooks/use-api-error-handler.tsx
@@ -11,48 +11,48 @@
 *  @license    https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
 */
 
-import { useEffect } from 'react'
 import { type FetchBaseQueryError } from '@reduxjs/toolkit/query'
 import { type SerializedError } from '@reduxjs/toolkit'
 import { isEmpty, isString } from 'lodash'
 import { useAlertModal } from '@Pimcore/components/modal/alert-modal/hooks/use-alert-modal'
 
-type UseApiErrorHandler = (errorData: FetchBaseQueryError | SerializedError | undefined | null) => void
+type ApiErrorData = FetchBaseQueryError | SerializedError
 
-interface IErrorData {
+interface IUseApiErrorHandlerReturn {
+  track: (errorData: ApiErrorData) => void
+}
+
+interface IApiErrorDetails {
   detail: string
   message: string
 }
 
 const DEFAULT_ERROR_CONTENT = 'Something went wrong.'
 
-export const useApiErrorHandler: UseApiErrorHandler = (errorData) => {
+export const useApiErrorHandler = (): IUseApiErrorHandlerReturn => {
   const modal = useAlertModal()
 
-  const getErrorContent = (): string | null => {
+  const handleErrorData = (errorData: ApiErrorData): string => {
     if (!isEmpty(errorData)) {
-      if ('data' in errorData && !isEmpty((errorData.data as IErrorData)?.message)) {
-        return (errorData.data as IErrorData)?.message
+      if ('data' in errorData && !isEmpty((errorData.data as IApiErrorDetails)?.message)) {
+        return (errorData.data as IApiErrorDetails)?.message
       }
 
       if ('error' in errorData && isString(errorData.error)) {
         return errorData.error
       }
     }
 
-    return null
+    return DEFAULT_ERROR_CONTENT
   }
 
-  const handleErrorData = (): void => {
-    const errorInfo = getErrorContent()
-    const errorContent = errorInfo ?? DEFAULT_ERROR_CONTENT
+  const track = (errorData: ApiErrorData): void => {
+    const errorContent = handleErrorData(errorData)
 
     modal.error({ content: errorContent })
   }
 
-  useEffect(() => {
-    if (!isEmpty(errorData)) {
-      handleErrorData()
-    }
-  }, [errorData, modal])
+  return {
+    track
+  }
 }
diff --git a/assets/js/src/core/modules/app/app-loader.tsx b/assets/js/src/core/modules/app/app-loader.tsx
@@ -12,8 +12,6 @@
 */
 
 import React, { useEffect, useState } from 'react'
-import { type SerializedError } from '@reduxjs/toolkit'
-import { type FetchBaseQueryError } from '@reduxjs/toolkit/query'
 import { api } from '@Pimcore/modules/auth/user/user-api-slice.gen'
 import { api as settingsApi } from '@Pimcore/modules/app/settings/settings-slice.gen'
 import { useAppDispatch } from '@Pimcore/app/store'
@@ -37,22 +35,19 @@ export const AppLoader = (props: IAppLoaderProps): React.JSX.Element => {
   const { i18n } = useTranslation()
 
   const [isLoading, setIsLoading] = useState(true)
-  const [errorData, setErrorData] = useState<FetchBaseQueryError | SerializedError | null | undefined>(null)
 
   const [translations] = useTranslationGetCollectionMutation()
   const [fetchMercureCookie] = useMercureCreateCookieMutation()
 
-  useApiErrorHandler(errorData)
+  const { track } = useApiErrorHandler()
 
   async function initLoadUser (): Promise<any> {
     const userFetcher = dispatch(api.endpoints.userGetCurrentInformation.initiate())
     await fetchMercureCookie()
 
     userFetcher
       .then(({ data, isSuccess, isError, error }) => {
-        if (isError) {
-          setErrorData(error)
-        }
+        isError && track(error)
 
         if (isSuccess && data !== undefined) {
           dispatch(setUser(data))
@@ -68,9 +63,7 @@ export const AppLoader = (props: IAppLoaderProps): React.JSX.Element => {
 
     settingsFetcher
       .then(({ data, isSuccess, isError, error }) => {
-        if (isError) {
-          setErrorData(error)
-        }
+        isError && track(error)
 
         if (isSuccess && data !== undefined) {
           dispatch(setSettings(data))