diff --git a/assets/js/src/core/hooks/use-api-error-handler.tsx b/assets/js/src/core/hooks/use-api-error-handler.tsx index 8a3af8d39..22ab8e298 100644 --- a/assets/js/src/core/hooks/use-api-error-handler.tsx +++ b/assets/js/src/core/hooks/use-api-error-handler.tsx @@ -11,28 +11,31 @@ * @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)) { @@ -40,19 +43,16 @@ export const useApiErrorHandler: UseApiErrorHandler = (errorData) => { } } - 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 index 387be6381..23a433f8d 100644 --- 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,12 +35,11 @@ export const AppLoader = (props: IAppLoaderProps): React.JSX.Element => { const { i18n } = useTranslation() const [isLoading, setIsLoading] = useState(true) - const [errorData, setErrorData] = useState(null) const [translations] = useTranslationGetCollectionMutation() const [fetchMercureCookie] = useMercureCreateCookieMutation() - useApiErrorHandler(errorData) + const { track } = useApiErrorHandler() async function initLoadUser (): Promise { const userFetcher = dispatch(api.endpoints.userGetCurrentInformation.initiate()) @@ -50,9 +47,7 @@ export const AppLoader = (props: IAppLoaderProps): React.JSX.Element => { 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))