Error handling in Twenty codebase — part 1.1

Inspired by BulletProof React,. I applied its codebase architecture concepts to thestructured, Twenty codebase..

This article focuses only on the error handling strategies used in Twenty codebase..

Approach

In part 1.0, I mentioned that Bulletproof React mentions three ways of error handling:

1. API errors

2. In app errors

3. Error tracking

In this article, I want to provide examples and references to how Twenty handled in-app errors. The approach we take is simple:

1. Pick onSubmit method in CreateProfile.tsx file..

2. Review how the error is handled.

In this part 1.0, we review the onSubmit method in CreateProfile.tsx file..

CreateProfile.tsx

CreateProfile modal is rendered during the onboarding on the twenty.com. platform, we will review the onSubmit method:

const onSubmit: SubmitHandler<Form> = useCallback(
    async (data) => {
      try {
        if (!currentWorkspaceMember?.id) {
          throw new Error('User is not logged in');
        }
        if (!data.firstName || !data.lastName) {
          throw new Error('First name or last name is missing');
        }
 
        await updateWorkspaceMemberSettings({
          ...
        });
 
        setCurrentWorkspaceMembers((members) =>
          ...
        );
 
        setCurrentUser((current) => {
          ...
        });
 
        setNextOnboardingStatus();
      } catch (error: any) {
        enqueueErrorSnackBar({
          apolloError: CombinedGraphQLErrors.is(error) ? error : undefined,
        });
      }
    },
    [
      ...
    ],
  );

This function is wrapped in a try/catch block and the error in the catch block is used in the enqueuErrorSnackBar. What’s this function for? let’s find out.

enqueueErrorSnackBar

enqueueErrorSnackBar is defined as shown below:

import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
...
const { enqueueErrorSnackBar } = useSnackBar();

useSnackBar is defined in feedback/snack-bar-manager/hooks/useSnackBar.ts. and it returns the following functions:

return {
    handleSnackBarClose,
    enqueueSuccessSnackBar,
    enqueueErrorSnackBar,
    enqueueInfoSnackBar,
    enqueueWarningSnackBar,
};

About me:

Hey, my name is ramunarasinga. Email: ramunarasinga@gmail.com

Tired of AI slop?

I spent 3+ years studying OSS codebases and wrote 350+ articles on what makes them production-grade. I built

• An open source tool that reviews your PR..

• Codebase architecture skills, inspired by best OSS projects.

Get started for free — thinkthroo.com

References:

1. alan2207/bulletproof-react/docs/error-handling.md.

2. twentyhq/twenty.

3. twenty.com.

4. twenty/packages/twenty-front/src/pages/onboarding/CreateProfile.tsx.

5. twenty/packages/twenty-front/src/pages/onboarding/CreateProfile.tsx#L95.

6. twenty/packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/hooks/useSnackBar.ts#L18.

7. twenty/packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/hooks/useSnackBar.ts#L18.