updated the useApiErrorHandler hook

assets/js/src/core/hooks/use-api-error-handler.tsx

@@ -11,42 +11,48 @@
 *  @license    https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
 */
 
-import type React from 'react'
 import { useEffect } from 'react'
-import { isEmpty } from 'lodash'
+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'
-import { type MutationResultSelectorResult } from '@reduxjs/toolkit/query'
 
-interface IUseApiErrorHandlerProps {
-  errorData: MutationResultSelectorResult<any>
-  withAlert?: boolean
-}
+type UseApiErrorHandler = (errorData: FetchBaseQueryError | SerializedError | undefined | null) => void
 
-interface ErrorData {
-  status: number
-  data: {
-    detail: string
-    message: string
-  }
+interface IErrorData {
+  detail: string
+  message: string
 }
 
 const DEFAULT_ERROR_CONTENT = 'Something went wrong.'
 
-export const useApiErrorHandler: React.FC<IUseApiErrorHandlerProps> = ({ errorData, withAlert = false }) => {
+export const useApiErrorHandler: UseApiErrorHandler = (errorData) => {
   const modal = useAlertModal()
 
+  const getErrorContent = (): string | null => {
+    if (!isEmpty(errorData)) {
+      if ('data' in errorData && !isEmpty((errorData.data as IErrorData)?.message)) {
+        return (errorData.data as IErrorData)?.message
+      }
+
+      if ('error' in errorData && isString(errorData.error)) {
+        return errorData.error
+      }
+    }
+
+    return null
+  }
+
   const handleErrorData = (): void => {
-    const errorInfo = (errorData?.error as ErrorData).data?.message
+    const errorInfo = getErrorContent()
     const errorContent = errorInfo ?? DEFAULT_ERROR_CONTENT
 
-    withAlert && modal.error({ content: errorContent })
+    modal.error({ content: errorContent })
   }
 
   useEffect(() => {
-    if (!isEmpty(errorData) && errorData.isError) {
+    if (!isEmpty(errorData)) {
       handleErrorData()
     }
   }, [errorData, modal])
-
-  return null
 }

assets/js/src/core/modules/app/app-loader.tsx

@@ -12,6 +12,8 @@
 */
 
 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'
@@ -23,6 +25,7 @@ import {
   useMercureCreateCookieMutation
 } from '../asset/editor/types/folder/tab-manager/tabs/list/toolbar/tools/mercure-api-slice.gen'
 import { Content } from '@Pimcore/components/content/content'
+import { useApiErrorHandler } from '@Pimcore/hooks/use-api-error-handler'
 import { GlobalStyles } from '@Pimcore/styles/global.styles'
 
 export interface IAppLoaderProps {
@@ -34,16 +37,23 @@ 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)
+
   async function initLoadUser (): Promise<any> {
     const userFetcher = dispatch(api.endpoints.userGetCurrentInformation.initiate())
     await fetchMercureCookie()
 
     userFetcher
-      .then(({ data, isSuccess }) => {
+      .then(({ data, isSuccess, isError, error }) => {
+        if (isError) {
+          setErrorData(error)
+        }
+
         if (isSuccess && data !== undefined) {
           dispatch(setUser(data))
         }
@@ -57,7 +67,11 @@ export const AppLoader = (props: IAppLoaderProps): React.JSX.Element => {
     const settingsFetcher = dispatch(settingsApi.endpoints.systemSettingsGet.initiate())
 
     settingsFetcher
-      .then(({ data, isSuccess }) => {
+      .then(({ data, isSuccess, isError, error }) => {
+        if (isError) {
+          setErrorData(error)
+        }
+
         if (isSuccess && data !== undefined) {
           dispatch(setSettings(data))
         }

assets/js/src/core/modules/asset/editor/types/folder/tab-manager/tabs/list/list-container-inner.tsx

@@ -35,7 +35,6 @@ import { Content } from '@Pimcore/components/content/content'
 import { eventBus } from '@Pimcore/lib/event-bus'
 import { generateQueryArgsForGrid } from './helpers/gridHelpers'
 import usePagination from '@Pimcore/utils/hooks/use-pagination'
-import { useApiErrorHandler } from '@Pimcore/hooks/use-api-error-handler'
 
 interface DataPatch {
   columnId: string
@@ -63,8 +62,6 @@ export const ListContainerInner = (): React.JSX.Element => {
   const { sorting } = useListSorting()
   const [isLoading, setIsLoading] = useState(true)
 
-  useApiErrorHandler({ errorData: fetchListingResult, withAlert: true })
-
   useEffect(() => {
     setSelectedRows({})
   }, [sorting, page, pageSize, filterOptions])