Define server error messages to display in FE from the server (#12973)

Currently, when a server query or mutation from the front-end fails, the
error message defined server-side is displayed in a snackbar in the
front-end.
These error messages usually contain technical details that don't belong
to the user interface, such as "ObjectMetadataCollection not found" or
"invalid ENUM value for ...".

**BE**
In addition to the original error message that is still needed (for the
request response, debugging, sentry monitoring etc.), we add a
`displayedErrorMessage` that will be used in the snackbars. It's only
relevant to add it for the messages that will reach the FE (ie. not in
jobs or in rest api for instance) and if it can help the user sort out /
fix things (ie. we do add displayedErrorMessage for "Cannot create
multiple draft versions for the same workflow" or "Cannot delete
[field], please update the label identifier field first", but not
"Object metadata does not exist"), even if in practice in the FE users
should not be able to perform an action that will not work (ie should
not be able to save creation of multiple draft versions of the same
workflows).

**FE**
To ease the usage we replaced enqueueSnackBar with enqueueErrorSnackBar
and enqueueSuccessSnackBar with an api that only requires to pass on the
error.
If no displayedErrorMessage is specified then the default error message
is `An error occured.`
This commit is contained in:
Marie
2025-07-03 14:42:10 +02:00
committed by GitHub
parent 1f1318febf
commit 288f0919db
133 changed files with 1501 additions and 711 deletions

View File

@ -1,6 +1,5 @@
import { useAuth } from '@/auth/hooks/useAuth';
import { AppPath } from '@/types/AppPath';
import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { ApolloError } from '@apollo/client';
@ -20,7 +19,7 @@ import { EmailVerificationSent } from '../sign-in-up/components/EmailVerificatio
export const VerifyEmailEffect = () => {
const { getLoginTokenFromEmailVerificationToken } = useAuth();
const { enqueueSnackBar } = useSnackBar();
const { enqueueErrorSnackBar, enqueueSuccessSnackBar } = useSnackBar();
const [searchParams] = useSearchParams();
const [isError, setIsError] = useState(false);
@ -39,9 +38,11 @@ export const VerifyEmailEffect = () => {
useEffect(() => {
const verifyEmailToken = async () => {
if (!email || !emailVerificationToken) {
enqueueSnackBar(t`Invalid email verification link.`, {
dedupeKey: 'email-verification-link-dedupe-key',
variant: SnackBarVariant.Error,
enqueueErrorSnackBar({
message: t`Invalid email verification link.`,
options: {
dedupeKey: 'email-verification-link-dedupe-key',
},
});
return navigate(AppPath.SignInUp);
}
@ -53,9 +54,11 @@ export const VerifyEmailEffect = () => {
email,
);
enqueueSnackBar(t`Email verified.`, {
dedupeKey: 'email-verification-dedupe-key',
variant: SnackBarVariant.Success,
enqueueSuccessSnackBar({
message: t`Email verified.`,
options: {
dedupeKey: 'email-verification-dedupe-key',
},
});
const workspaceUrl = getWorkspaceUrl(workspaceUrls);
@ -71,14 +74,13 @@ export const VerifyEmailEffect = () => {
verifyLoginToken(loginToken.token);
} catch (error) {
const message: string =
error instanceof ApolloError
? error.message
: 'Email verification failed';
enqueueSnackBar(t`${message}`, {
dedupeKey: 'email-verification-error-dedupe-key',
variant: SnackBarVariant.Error,
enqueueErrorSnackBar({
...(error instanceof ApolloError
? { apolloError: error }
: { message: t`Email verification failed` }),
options: {
dedupeKey: 'email-verification-error-dedupe-key',
},
});
if (
error instanceof ApolloError &&

View File

@ -4,14 +4,13 @@ import { renderHook } from '@testing-library/react';
import { RecoilRoot } from 'recoil';
import { AppPath } from '@/types/AppPath';
import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { useNavigateApp } from '~/hooks/useNavigateApp';
import { useAuth } from '../useAuth';
import { useVerifyLogin } from '../useVerifyLogin';
import { dynamicActivate } from '~/utils/i18n/dynamicActivate';
import { SOURCE_LOCALE } from 'twenty-shared/translations';
import { dynamicActivate } from '~/utils/i18n/dynamicActivate';
jest.mock('../useAuth', () => ({
useAuth: jest.fn(),
@ -37,7 +36,7 @@ const renderHooks = () => {
describe('useVerifyLogin', () => {
const mockGetAuthTokensFromLoginToken = jest.fn();
const mockEnqueueSnackBar = jest.fn();
const mockEnqueueErrorSnackBar = jest.fn();
const mockNavigate = jest.fn();
beforeEach(() => {
@ -48,7 +47,7 @@ describe('useVerifyLogin', () => {
});
(useSnackBar as jest.Mock).mockReturnValue({
enqueueSnackBar: mockEnqueueSnackBar,
enqueueErrorSnackBar: mockEnqueueErrorSnackBar,
});
(useNavigateApp as jest.Mock).mockReturnValue(mockNavigate);
@ -70,8 +69,8 @@ describe('useVerifyLogin', () => {
await result.current.verifyLoginToken('test-token');
expect(mockEnqueueSnackBar).toHaveBeenCalledWith('Authentication failed', {
variant: SnackBarVariant.Error,
expect(mockEnqueueErrorSnackBar).toHaveBeenCalledWith({
message: 'Authentication failed',
});
expect(mockNavigate).toHaveBeenCalledWith(AppPath.SignInUp);
});

View File

@ -1,5 +1,3 @@
import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
import { useAuth } from '@/auth/hooks/useAuth';
import { AppPath } from '@/types/AppPath';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
@ -7,7 +5,7 @@ import { useLingui } from '@lingui/react/macro';
import { useNavigateApp } from '~/hooks/useNavigateApp';
export const useVerifyLogin = () => {
const { enqueueSnackBar } = useSnackBar();
const { enqueueErrorSnackBar } = useSnackBar();
const navigate = useNavigateApp();
const { getAuthTokensFromLoginToken } = useAuth();
const { t } = useLingui();
@ -16,8 +14,8 @@ export const useVerifyLogin = () => {
try {
await getAuthTokensFromLoginToken(loginToken);
} catch (error) {
enqueueSnackBar(t`Authentication failed`, {
variant: SnackBarVariant.Error,
enqueueErrorSnackBar({
message: t`Authentication failed`,
});
navigate(AppPath.SignInUp);
}

View File

@ -5,7 +5,6 @@ import { RecoilRoot } from 'recoil';
import { useHandleResetPassword } from '@/auth/sign-in-up/hooks/useHandleResetPassword';
import { workspacePublicDataState } from '@/auth/states/workspacePublicDataState';
import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { SOURCE_LOCALE } from 'twenty-shared/translations';
import {
@ -36,14 +35,16 @@ const renderHooks = () => {
};
describe('useHandleResetPassword', () => {
const enqueueSnackBarMock = jest.fn();
const enqueueErrorSnackBarMock = jest.fn();
const enqueueSuccessSnackBarMock = jest.fn();
const emailPasswordResetLinkMock = jest.fn();
beforeEach(() => {
jest.clearAllMocks();
(useSnackBar as jest.Mock).mockReturnValue({
enqueueSnackBar: enqueueSnackBarMock,
enqueueErrorSnackBar: enqueueErrorSnackBarMock,
enqueueSuccessSnackBar: enqueueSuccessSnackBarMock,
});
(useEmailPasswordResetLinkMutation as jest.Mock).mockReturnValue([
emailPasswordResetLinkMock,
@ -54,8 +55,8 @@ describe('useHandleResetPassword', () => {
const { result } = renderHooks();
await act(() => result.current.handleResetPassword('')());
expect(enqueueSnackBarMock).toHaveBeenCalledWith('Invalid email', {
variant: SnackBarVariant.Error,
expect(enqueueErrorSnackBarMock).toHaveBeenCalledWith({
message: 'Invalid email',
});
});
@ -67,10 +68,9 @@ describe('useHandleResetPassword', () => {
const { result } = renderHooks();
await act(() => result.current.handleResetPassword('test@example.com')());
expect(enqueueSnackBarMock).toHaveBeenCalledWith(
'Password reset link has been sent to the email',
{ variant: SnackBarVariant.Success },
);
expect(enqueueSuccessSnackBarMock).toHaveBeenCalledWith({
message: 'Password reset link has been sent to the email',
});
});
it('should show error message if sending reset link fails', async () => {
@ -81,9 +81,7 @@ describe('useHandleResetPassword', () => {
const { result } = renderHooks();
await act(() => result.current.handleResetPassword('test@example.com')());
expect(enqueueSnackBarMock).toHaveBeenCalledWith('There was an issue', {
variant: SnackBarVariant.Error,
});
expect(enqueueErrorSnackBarMock).toHaveBeenCalledWith({});
});
it('should show error message in case of request error', async () => {
@ -93,8 +91,6 @@ describe('useHandleResetPassword', () => {
const { result } = renderHooks();
await act(() => result.current.handleResetPassword('test@example.com')());
expect(enqueueSnackBarMock).toHaveBeenCalledWith(errorMessage, {
variant: SnackBarVariant.Error,
});
expect(enqueueErrorSnackBarMock).toHaveBeenCalledWith({});
});
});

View File

@ -2,19 +2,20 @@ import { GET_AUTHORIZATION_URL_FOR_SSO } from '@/auth/graphql/mutations/getAutho
import { useSSO } from '@/auth/sign-in-up/hooks/useSSO';
import { useRedirect } from '@/domain-manager/hooks/useRedirect';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { ApolloError } from '@apollo/client';
import { MockedProvider } from '@apollo/client/testing';
import { MemoryRouter } from 'react-router-dom';
import { renderHook } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
jest.mock('@/ui/feedback/snack-bar-manager/hooks/useSnackBar');
jest.mock('@/domain-manager/hooks/useRedirect');
jest.mock('~/generated/graphql');
const mockEnqueueSnackBar = jest.fn();
const mockEnqueueErrorSnackBar = jest.fn();
const mockRedirect = jest.fn();
(useSnackBar as jest.Mock).mockReturnValue({
enqueueSnackBar: mockEnqueueSnackBar,
enqueueErrorSnackBar: mockEnqueueErrorSnackBar,
});
(useRedirect as jest.Mock).mockReturnValue({
redirect: mockRedirect,
@ -84,8 +85,10 @@ describe('useSSO', () => {
await result.current.redirectToSSOLoginPage(identityProviderId);
expect(mockEnqueueSnackBar).toHaveBeenCalledWith('Error message', {
variant: 'error',
expect(mockEnqueueErrorSnackBar).toHaveBeenCalledWith({
apolloError: new ApolloError({
graphQLErrors: [{ message: 'Error message' }],
}),
});
});
});

View File

@ -1,13 +1,13 @@
import { useCallback } from 'react';
import { useOrigin } from '@/domain-manager/hooks/useOrigin';
import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { ApolloError } from '@apollo/client';
import { t } from '@lingui/core/macro';
import { useResendEmailVerificationTokenMutation } from '~/generated-metadata/graphql';
export const useHandleResendEmailVerificationToken = () => {
const { enqueueSnackBar } = useSnackBar();
const { enqueueErrorSnackBar, enqueueSuccessSnackBar } = useSnackBar();
const [resendEmailVerificationToken, { loading }] =
useResendEmailVerificationTokenMutation();
const { origin } = useOrigin();
@ -16,8 +16,8 @@ export const useHandleResendEmailVerificationToken = () => {
(email: string | null) => {
return async () => {
if (!email) {
enqueueSnackBar(t`Invalid email`, {
variant: SnackBarVariant.Error,
enqueueErrorSnackBar({
message: t`Invalid email`,
});
return;
}
@ -31,22 +31,25 @@ export const useHandleResendEmailVerificationToken = () => {
});
if (data?.resendEmailVerificationToken?.success === true) {
enqueueSnackBar(t`Email verification link resent!`, {
variant: SnackBarVariant.Success,
enqueueSuccessSnackBar({
message: t`Email verification link resent!`,
});
} else {
enqueueSnackBar(t`There was an issue`, {
variant: SnackBarVariant.Error,
});
enqueueErrorSnackBar({});
}
} catch (error) {
enqueueSnackBar((error as Error).message, {
variant: SnackBarVariant.Error,
enqueueErrorSnackBar({
...(error instanceof ApolloError ? { apolloError: error } : {}),
});
}
};
},
[enqueueSnackBar, resendEmailVerificationToken, origin],
[
enqueueErrorSnackBar,
enqueueSuccessSnackBar,
resendEmailVerificationToken,
origin,
],
);
return { handleResendEmailVerificationToken, loading };

View File

@ -2,14 +2,14 @@ import { useCallback } from 'react';
import { currentUserState } from '@/auth/states/currentUserState';
import { workspacePublicDataState } from '@/auth/states/workspacePublicDataState';
import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { ApolloError } from '@apollo/client';
import { useLingui } from '@lingui/react/macro';
import { useRecoilValue } from 'recoil';
import { useEmailPasswordResetLinkMutation } from '~/generated-metadata/graphql';
export const useHandleResetPassword = () => {
const { enqueueSnackBar } = useSnackBar();
const { enqueueErrorSnackBar, enqueueSuccessSnackBar } = useSnackBar();
const [emailPasswordResetLink] = useEmailPasswordResetLinkMutation();
const workspacePublicData = useRecoilValue(workspacePublicDataState);
const currentUser = useRecoilValue(currentUserState);
@ -20,15 +20,15 @@ export const useHandleResetPassword = () => {
(email = currentUser?.email) => {
return async () => {
if (!email) {
enqueueSnackBar(t`Invalid email`, {
variant: SnackBarVariant.Error,
enqueueErrorSnackBar({
message: t`Invalid email`,
});
return;
}
if (!workspacePublicData?.id) {
enqueueSnackBar(t`Invalid workspace`, {
variant: SnackBarVariant.Error,
enqueueErrorSnackBar({
message: t`Invalid workspace`,
});
return;
}
@ -39,17 +39,15 @@ export const useHandleResetPassword = () => {
});
if (data?.emailPasswordResetLink?.success === true) {
enqueueSnackBar(t`Password reset link has been sent to the email`, {
variant: SnackBarVariant.Success,
enqueueSuccessSnackBar({
message: t`Password reset link has been sent to the email`,
});
} else {
enqueueSnackBar(t`There was an issue`, {
variant: SnackBarVariant.Error,
});
enqueueErrorSnackBar({});
}
} catch (error) {
enqueueSnackBar((error as Error).message, {
variant: SnackBarVariant.Error,
enqueueErrorSnackBar({
...(error instanceof ApolloError ? { apolloError: error } : {}),
});
}
};
@ -57,7 +55,8 @@ export const useHandleResetPassword = () => {
[
currentUser?.email,
workspacePublicData?.id,
enqueueSnackBar,
enqueueErrorSnackBar,
enqueueSuccessSnackBar,
t,
emailPasswordResetLink,
],

View File

@ -2,16 +2,15 @@
import { GET_AUTHORIZATION_URL_FOR_SSO } from '@/auth/graphql/mutations/getAuthorizationUrlForSSO';
import { useRedirect } from '@/domain-manager/hooks/useRedirect';
import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { useApolloClient } from '@apollo/client';
import { ApolloError, useApolloClient } from '@apollo/client';
import { useParams } from 'react-router-dom';
export const useSSO = () => {
const apolloClient = useApolloClient();
const workspaceInviteHash = useParams().workspaceInviteHash;
const { enqueueSnackBar } = useSnackBar();
const { enqueueErrorSnackBar } = useSnackBar();
const { redirect } = useRedirect();
const redirectToSSOLoginPage = async (identityProviderId: string) => {
let authorizationUrlForSSOResult;
@ -26,8 +25,8 @@ export const useSSO = () => {
},
});
} catch (error: any) {
return enqueueSnackBar(error?.message ?? 'Unknown error', {
variant: SnackBarVariant.Error,
return enqueueErrorSnackBar({
...(error instanceof ApolloError ? { apolloError: error } : {}),
});
}

View File

@ -11,17 +11,17 @@ import {
import { SignInUpMode } from '@/auth/types/signInUpMode';
import { useReadCaptchaToken } from '@/captcha/hooks/useReadCaptchaToken';
import { useBuildSearchParamsFromUrlSyncedStates } from '@/domain-manager/hooks/useBuildSearchParamsFromUrlSyncedStates';
import { useIsCurrentLocationOnAWorkspace } from '@/domain-manager/hooks/useIsCurrentLocationOnAWorkspace';
import { AppPath } from '@/types/AppPath';
import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { ApolloError } from '@apollo/client';
import { useRecoilState } from 'recoil';
import { buildAppPathWithQueryParams } from '~/utils/buildAppPathWithQueryParams';
import { isMatchingLocation } from '~/utils/isMatchingLocation';
import { useAuth } from '../../hooks/useAuth';
import { useIsCurrentLocationOnAWorkspace } from '@/domain-manager/hooks/useIsCurrentLocationOnAWorkspace';
export const useSignInUp = (form: UseFormReturn<Form>) => {
const { enqueueSnackBar } = useSnackBar();
const { enqueueErrorSnackBar } = useSnackBar();
const [signInUpStep, setSignInUpStep] = useRecoilState(signInUpStepState);
const [signInUpMode, setSignInUpMode] = useRecoilState(signInUpModeState);
@ -66,9 +66,7 @@ export const useSignInUp = (form: UseFormReturn<Form>) => {
captchaToken: token,
},
onError: (error) => {
enqueueSnackBar(`${error.message}`, {
variant: SnackBarVariant.Error,
});
enqueueErrorSnackBar({ apolloError: error });
},
onCompleted: (data) => {
setSignInUpMode(
@ -83,7 +81,7 @@ export const useSignInUp = (form: UseFormReturn<Form>) => {
readCaptchaToken,
form,
checkUserExistsQuery,
enqueueSnackBar,
enqueueErrorSnackBar,
setSignInUpStep,
setSignInUpMode,
]);
@ -145,9 +143,9 @@ export const useSignInUp = (form: UseFormReturn<Form>) => {
captchaToken: token,
verifyEmailNextPath,
});
} catch (err: any) {
enqueueSnackBar(err?.message, {
variant: SnackBarVariant.Error,
} catch (error: any) {
enqueueErrorSnackBar({
...(error instanceof ApolloError ? { apolloError: error } : {}),
});
}
},
@ -161,7 +159,7 @@ export const useSignInUp = (form: UseFormReturn<Form>) => {
signUpWithCredentialsInWorkspace,
workspaceInviteHash,
workspacePersonalInviteToken,
enqueueSnackBar,
enqueueErrorSnackBar,
buildSearchParamsFromUrlSyncedStates,
isOnAWorkspace,
],

View File

@ -1,13 +1,13 @@
import { useRedirectToWorkspaceDomain } from '@/domain-manager/hooks/useRedirectToWorkspaceDomain';
import { AppPath } from '@/types/AppPath';
import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { ApolloError } from '@apollo/client';
import { useSignUpInNewWorkspaceMutation } from '~/generated-metadata/graphql';
import { getWorkspaceUrl } from '~/utils/getWorkspaceUrl';
export const useSignUpInNewWorkspace = () => {
const { redirectToWorkspaceDomain } = useRedirectToWorkspaceDomain();
const { enqueueSnackBar } = useSnackBar();
const { enqueueErrorSnackBar } = useSnackBar();
const [signUpInNewWorkspaceMutation] = useSignUpInNewWorkspaceMutation();
@ -23,10 +23,8 @@ export const useSignUpInNewWorkspace = () => {
newTab ? '_blank' : '_self',
);
},
onError: (error: Error) => {
enqueueSnackBar(error.message, {
variant: SnackBarVariant.Error,
});
onError: (error: ApolloError) => {
enqueueErrorSnackBar({ apolloError: error });
},
});
};

View File

@ -4,16 +4,16 @@ import { useRecoilValue } from 'recoil';
import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { AppPath } from '@/types/AppPath';
import { t } from '@lingui/core/macro';
import { isDefined } from 'twenty-shared/utils';
import { useGetWorkspaceFromInviteHashQuery } from '~/generated-metadata/graphql';
import { useNavigateApp } from '~/hooks/useNavigateApp';
export const useWorkspaceFromInviteHash = () => {
const { enqueueSnackBar } = useSnackBar();
const { enqueueErrorSnackBar, enqueueInfoSnackBar } = useSnackBar();
const navigate = useNavigateApp();
const workspaceInviteHash = useParams().workspaceInviteHash;
const currentWorkspace = useRecoilValue(currentWorkspaceState);
@ -24,9 +24,7 @@ export const useWorkspaceFromInviteHash = () => {
skip: !workspaceInviteHash,
variables: { inviteHash: workspaceInviteHash || '' },
onError: (error) => {
enqueueSnackBar(error.message, {
variant: SnackBarVariant.Error,
});
enqueueErrorSnackBar({ apolloError: error });
navigate(AppPath.Index);
},
onCompleted: (data) => {
@ -35,13 +33,14 @@ export const useWorkspaceFromInviteHash = () => {
data?.findWorkspaceFromInviteHash &&
currentWorkspace.id === data.findWorkspaceFromInviteHash.id
) {
const workspaceDisplayName =
data?.findWorkspaceFromInviteHash?.displayName;
initiallyLoggedIn &&
enqueueSnackBar(
`You already belong to ${data?.findWorkspaceFromInviteHash?.displayName} workspace`,
{
variant: SnackBarVariant.Info,
},
);
enqueueInfoSnackBar({
message: workspaceDisplayName
? t`You already belong to the workspace ${workspaceDisplayName}`
: t`You already belong to this workspace`,
});
navigate(AppPath.Index);
}
},