From d5e7d9ed4ffaa25ad6183096b2fc8aaf43632aae Mon Sep 17 00:00:00 2001
From: harshit078 <harshitsingh467@gmail.com>
Date: Tue, 12 Nov 2024 12:17:35 +0530
Subject: [PATCH] added Sentry and removed recoil

---
 .../components/PromiseRejectionEffect.tsx      |  5 +++--
 .../src/display/avatar/components/Avatar.tsx   | 18 ++++--------------
 2 files changed, 7 insertions(+), 16 deletions(-)

diff --git a/packages/twenty-front/src/modules/error-handler/components/PromiseRejectionEffect.tsx b/packages/twenty-front/src/modules/error-handler/components/PromiseRejectionEffect.tsx
index a385b1fb0261..3f06827f152a 100644
--- a/packages/twenty-front/src/modules/error-handler/components/PromiseRejectionEffect.tsx
+++ b/packages/twenty-front/src/modules/error-handler/components/PromiseRejectionEffect.tsx
@@ -1,8 +1,8 @@
 import { useCallback, useEffect } from 'react';
-
 import { ObjectMetadataItemNotFoundError } from '@/object-metadata/errors/ObjectMetadataNotFoundError';
 import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
+import * as Sentry from '@sentry/react';
 
 export const PromiseRejectionEffect = () => {
   const { enqueueSnackBar } = useSnackBar();
@@ -11,7 +11,8 @@ export const PromiseRejectionEffect = () => {
     (event: PromiseRejectionEvent) => {
       const error = event.reason;
 
-      // TODO: connect Sentry here
+      Sentry.captureException(error);
+
       if (error instanceof ObjectMetadataItemNotFoundError) {
         enqueueSnackBar(
           `Error with custom object that cannot be found : ${event.reason}`,
diff --git a/packages/twenty-ui/src/display/avatar/components/Avatar.tsx b/packages/twenty-ui/src/display/avatar/components/Avatar.tsx
index 5230e67ce07b..88e72358f2f4 100644
--- a/packages/twenty-ui/src/display/avatar/components/Avatar.tsx
+++ b/packages/twenty-ui/src/display/avatar/components/Avatar.tsx
@@ -1,9 +1,6 @@
 import { styled } from '@linaria/react';
 import { isNonEmptyString, isUndefined } from '@sniptt/guards';
-import { useContext, useMemo } from 'react';
-import { useRecoilState } from 'recoil';
-
-import { invalidAvatarUrlsState } from '@ui/display/avatar/components/states/isInvalidAvatarUrlState';
+import { useContext, useMemo, useState } from 'react';
 import { AVATAR_PROPERTIES_BY_SIZE } from '@ui/display/avatar/constants/AvatarPropertiesBySize';
 import { AvatarSize } from '@ui/display/avatar/types/AvatarSize';
 import { AvatarType } from '@ui/display/avatar/types/AvatarType';
@@ -63,7 +60,6 @@ export type AvatarProps = {
   onClick?: () => void;
 };
 
-// TODO: Remove recoil because we don't want it into twenty-ui and find a solution for invalid avatar urls
 export const Avatar = ({
   avatarUrl,
   size = 'md',
@@ -77,9 +73,7 @@ export const Avatar = ({
   backgroundColor,
 }: AvatarProps) => {
   const { theme } = useContext(ThemeContext);
-  const [invalidAvatarUrls, setInvalidAvatarUrls] = useRecoilState(
-    invalidAvatarUrlsState,
-  );
+  const [isInvalidAvatarUrl, setIsInvalidAvatarUrl] = useState(false);
 
   const avatarImageURI = useMemo(
     () => getImageAbsoluteURI(avatarUrl),
@@ -89,14 +83,10 @@ export const Avatar = ({
   const noAvatarUrl = !isNonEmptyString(avatarImageURI);
 
   const placeholderChar = placeholder?.[0]?.toLocaleUpperCase();
-
-  const showPlaceholder =
-    noAvatarUrl || invalidAvatarUrls.includes(avatarImageURI);
+  const showPlaceholder = noAvatarUrl || isInvalidAvatarUrl;
 
   const handleImageError = () => {
-    if (isNonEmptyString(avatarImageURI)) {
-      setInvalidAvatarUrls((prev) => [...prev, avatarImageURI]);
-    }
+    setIsInvalidAvatarUrl(true);
   };
 
   const fixedColor =