DEV Community

Ramu Narasinga
Ramu Narasinga

Posted on

Error handling in Twenty codebase — part 1.1

#opensource #twenty #errors #snackbar

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,
        });
      }
    },
    [
      ...
    ],
  );
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

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

return {
    handleSnackBarClose,
    enqueueSuccessSnackBar,
    enqueueErrorSnackBar,
    enqueueInfoSnackBar,
    enqueueWarningSnackBar,
};
Enter fullscreen mode Exit fullscreen mode

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

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.

Top comments (0)