Skip to main content

Error handling

EVA often returns very useful error messages when an error occurs when you fetch a service. It is our job to show those messages to the users, so they understand why something is going wrong.

Hooks you can use in your project#

useHandleErrorResponse (available in eva-suite-composite) - handle errors from services called with hooks.useCallService (click to expand)

You would want to use this hook everytime you use the hooks.useCallService hook, because it potentially could return an error:

import { useContext } from 'react';import { hooks } from '@springtree/eva-sdk-react-recoil';import useHandleErrorResponse from '@springtree/eva-suite-composite';import { useIntl } from 'react-intl';import { NotificationContext } from '@springtree/eva-suite-ui';
const useManageRoles = () => {  const intl = useIntl();  const { addNotification } = useContext(NotificationContext);  const handleError = useHandleErrorResponse();
  const createRole = hooks.useCallService({    service: CoreManagement.CreateRole,    options: {      onSuccess: () => {        addNotification({          message: intl.formatMessage({ id: 'role.creation.message.success' }),          iconType: 'success',          showIcon: true,        });
        // Add side effect      },      onError: async (e) => {        handleError(e, 'CreateRole');      },    },  });
  const updateRole = hooks.useCallService({    service: CoreManagement.UpdateRole,    options: {      onSuccess: () => {        addNotification({          message: intl.formatMessage({ id: 'role.update.message.success' }),          iconType: 'success',          showIcon: true,        });
        // add side effect      },      onError: async (e) => {        handleError(e, 'UpdateRole');      },    },  });
  const deleteRole = hooks.useCallService({    service: CoreManagement.DeleteRole,    options: {      onSuccess: () => {        addNotification({          message: intl.formatMessage({ id: 'role.delete.message.success' }),          iconType: 'success',          showIcon: true,        });
        // add side effect      },      onError: async (e) => {        handleError(e, 'DeleteRole');      },    },  });
  return {    createRole,    updateRole,    deleteRole,  };};

useServiceError (available in eva-suite-composite) - parse errors from service state built with either builders.buildServiceState or builders.buildServiceFamilyState (click to expand)

Usage:

import { useServiceError } from '@springtree/eva-suite-composite';import { serviceState, serviceFamilyState } from '../services.state.ts';
const Example = () => {  // ...  const parsedError = useServiceError({ serviceState });  const parsedFamilyError = useServiceError({    serviceFamilyState,    parameter: 'example_param',  });  //...};

useHandle404 (available in eva-suite-composite) - handle 404 / EnntityNotFound type of errors (display a notification and navigate back) (click to expand)

This hook is meant to be used with useServiceError:

import { useMemo } from 'react';import { useSetRequest } from '@springtree/eva-suite-react-hooks';import { hooks, builders } from '@springtree/eva-sdk-react-recoil';import { useHandle404, useServiceError } from '@springtree/eva-suite-composite';
const organizationUnitServiceFamilyState = builders.buildServiceFamilyState({  requireLoggedIn: true,  requireEmployee: true,  service: Core.GetOrganizationUnit,  key: 'Example:Core.GetOrganizationUnit',});
const useOrganizationUnit = (id?: number) => {  const response = hooks.useGetState(    organizationUnitServiceFamilyState.response(id),  );  const isLoading = hooks.useIsLoading({    state: organizationUnitServiceFamilyState.response(id),  });  const isLoadingWithoutPreviousResponse = useMemo(    () => isLoading && !response,    [isLoading, response],  );
  const serviceError = useServiceError({    parameter: id,    serviceFamilyState: organizationUnitServiceFamilyState,  });  useHandle404(    serviceError,    `No OrganizationUnit found with ID ${id}! Redirecting...`,  );
  const request = useMemo(    () => ({ OrganizationUnitID: id }),    [id],  );  useSetRequest(    organizationUnitServiceFamilyState.request(id),    request,  );
  return response;};

References#