feat: use sentry to catch errors and have a client feedback

src/components/App.tsx

@@ -4,6 +4,8 @@ import { Route, Routes } from 'react-router-dom';
 import { saveUrlForRedirection } from '@graasp/sdk';
 import { CustomInitialLoader, withAuthorization } from '@graasp/ui';
 
+import * as Sentry from '@sentry/react';
+
 import { DOMAIN } from '@/config/env';
 import { SIGN_IN_PATH } from '@/config/externalPaths';
 
@@ -18,6 +20,7 @@ import {
   SHARED_ITEMS_PATH,
   buildItemPath,
 } from '../config/paths';
+import FallbackComponent from './Fallback';
 import RecycleBinScreen from './RecycleBinScreen';
 import SharedItems from './SharedItems';
 import { useCurrentUserContext } from './context/CurrentUserContext';
@@ -67,24 +70,29 @@ const App = (): JSX.Element => {
   );
 
   return (
-    <Routes>
-      <Route path={HOME_PATH} element={<HomeWithAuthorization />} />
-      <Route path={SHARED_ITEMS_PATH} element={<SharedWithAuthorization />} />
-      <Route
-        path={FAVORITE_ITEMS_PATH}
-        element={<FavoriteWithAuthorization />}
-      />
-      <Route
-        path={PUBLISHED_ITEMS_PATH}
-        element={<PublishedWithAuthorization />}
-      />
-      <Route path={buildItemPath()} element={<ItemScreen />} />
-      <Route path={MEMBER_PROFILE_PATH} element={<MemberWithAuthorization />} />
-      <Route path={RECYCLE_BIN_PATH} element={<RecycleWithAuthorization />} />
-      <Route path={ITEMS_PATH} element={<HomeWithAuthorization />} />
-      <Route path={REDIRECT_PATH} element={<Redirect />} />
-      <Route element={<Redirect />} />
-    </Routes>
+    <Sentry.ErrorBoundary fallback={<FallbackComponent />}>
+      <Routes>
+        <Route path={HOME_PATH} element={<HomeWithAuthorization />} />
+        <Route path={SHARED_ITEMS_PATH} element={<SharedWithAuthorization />} />
+        <Route
+          path={FAVORITE_ITEMS_PATH}
+          element={<FavoriteWithAuthorization />}
+        />
+        <Route
+          path={PUBLISHED_ITEMS_PATH}
+          element={<PublishedWithAuthorization />}
+        />
+        <Route path={buildItemPath()} element={<ItemScreen />} />
+        <Route
+          path={MEMBER_PROFILE_PATH}
+          element={<MemberWithAuthorization />}
+        />
+        <Route path={RECYCLE_BIN_PATH} element={<RecycleWithAuthorization />} />
+        <Route path={ITEMS_PATH} element={<HomeWithAuthorization />} />
+        <Route path={REDIRECT_PATH} element={<Redirect />} />
+        <Route element={<Redirect />} />
+      </Routes>
+    </Sentry.ErrorBoundary>
   );
 };
 

src/components/Fallback.tsx

@@ -0,0 +1,42 @@
+import { useNavigate } from 'react-router';
+
+import { Box, Button, Stack, Typography } from '@mui/material';
+
+import { useBuilderTranslation } from '@/config/i18n';
+import { HOME_PATH } from '@/config/paths';
+
+import { BUILDER } from '../langs/constants';
+import ErrorImg from '../resources/warning-error.png';
+
+const FallbackComponent = (): JSX.Element => {
+  const navigate = useNavigate();
+  const { t: translateBuilder } = useBuilderTranslation();
+
+  return (
+    <Stack
+      direction="row"
+      justifyContent="center"
+      alignItems="center"
+      sx={{ width: 1, height: '100vh' }}
+    >
+      <Box sx={{ ml: 4 }}>
+        <Typography variant="h1">
+          {translateBuilder(BUILDER.FALLBACK_TITLE)}
+        </Typography>
+        <Typography>{translateBuilder(BUILDER.FALLBACK_TEXT)}</Typography>
+        <Button
+          sx={{ mt: 3 }}
+          variant="contained"
+          onClick={() => navigate(HOME_PATH)}
+        >
+          {translateBuilder(BUILDER.FALLBACK_BACK_TO_HOME)}
+        </Button>
+      </Box>
+      <Box>
+        <img src={ErrorImg} alt="error_img" />
+      </Box>
+    </Stack>
+  );
+};
+
+export default FallbackComponent;

src/components/main/MainMenu.tsx

@@ -1,37 +1,46 @@
+import { useEffect, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router';
 
 import AutoStoriesIcon from '@mui/icons-material/AutoStories';
 import DeleteIcon from '@mui/icons-material/Delete';
 import FolderIcon from '@mui/icons-material/Folder';
 import FolderSharedIcon from '@mui/icons-material/FolderShared';
 import Star from '@mui/icons-material/Star';
-import { styled, useTheme } from '@mui/material';
+import { Box, Button, styled, useTheme } from '@mui/material';
 import ListItemIcon from '@mui/material/ListItemIcon';
 
 import { MainMenu as GraaspMainMenu, LibraryIcon, MenuItem } from '@graasp/ui';
 
+import { captureMessage, showReportDialog } from '@sentry/react';
+
 import { TUTORIALS_LINK } from '../../config/constants';
-import { useBuilderTranslation } from '../../config/i18n';
+import i18n, { useBuilderTranslation } from '../../config/i18n';
 import {
   FAVORITE_ITEMS_PATH,
   HOME_PATH,
   PUBLISHED_ITEMS_PATH,
   RECYCLE_BIN_PATH,
   SHARED_ITEMS_PATH,
 } from '../../config/paths';
+import { mutations } from '../../config/queryClient';
 import { BUILDER } from '../../langs/constants';
 import { useCurrentUserContext } from '../context/CurrentUserContext';
 
-const StyledLink = styled('a')(({ theme }) => ({
+const BottomContainer = styled(Box)(({ theme }) => ({
   position: 'absolute',
   bottom: 0,
   width: '100%',
+  padding: theme.spacing(2),
+}));
+
+const StyledLink = styled('a')(({ theme }) => ({
   display: 'flex',
   alignItems: 'center',
-  padding: theme.spacing(2),
   boxSizing: 'border-box',
   color: 'grey',
   textDecoration: 'none',
+  marginTop: theme.spacing(1),
+
   '&:hover': {
     color: theme.palette.primary.main,
   },
@@ -47,21 +56,72 @@ const MainMenu = (): JSX.Element => {
   const navigate = useNavigate();
   const { pathname } = useLocation();
   const { data: member } = useCurrentUserContext();
+  const { mutate: postBug } = mutations.usePostBug();
 
+  const [isSentryFormOpen, setIsSentryFormOpen] = useState(false);
   const theme = useTheme();
   const iconColor = theme.palette.action.active;
 
   const goTo = (path: string) => {
     navigate(path);
   };
 
+  useEffect(() => {
+    if (isSentryFormOpen) {
+      setTimeout(() => {
+        const ele: HTMLButtonElement | null = document.querySelector(
+          '.form-submit > .btn',
+        );
+        const nameInput: HTMLInputElement | null =
+          document.querySelector('#id_name');
+        const emailInput: HTMLInputElement | null =
+          document.querySelector('#id_email');
+        const commentsInput: HTMLInputElement | null =
+          document.querySelector('#id_comments');
+
+        if (ele) {
+          const originalClick: any = ele.onclick;
+          ele.onclick = null;
+          ele?.addEventListener('click', (e) => {
+            e?.preventDefault();
+            originalClick?.(e);
+            postBug({
+              name: nameInput?.value || '',
+              email: emailInput?.value || '',
+              details: commentsInput?.value || '',
+            });
+          });
+        }
+      }, 1000);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isSentryFormOpen]);
+
+  const openBugReport = () => {
+    setIsSentryFormOpen(true);
+    const eventId = captureMessage(
+      `Graasp Builder | User Feedback ${Date.now()}`,
+    );
+    // this will be reported in sentry user feedback issues
+    showReportDialog({
+      eventId,
+      lang: i18n.language || 'en',
+    });
+  };
+
   const resourcesLink = (
-    <StyledLink href={TUTORIALS_LINK} target="_blank">
-      <ListItemIcon>
-        <AutoStoriesIcon />
-      </ListItemIcon>
-      {translateBuilder('Tutorials')}
-    </StyledLink>
+    <BottomContainer>
+      <Button onClick={openBugReport}>
+        {translateBuilder(BUILDER.REPORT_A_BUG)}
+      </Button>
+
+      <StyledLink href={TUTORIALS_LINK} target="_blank">
+        <ListItemIcon>
+          <AutoStoriesIcon />
+        </ListItemIcon>
+        {translateBuilder('Tutorials')}
+      </StyledLink>
+    </BottomContainer>
   );
 
   const renderAuthenticatedMemberMenuItems = () => {

src/langs/ar.json

@@ -228,5 +228,9 @@
   "USER_SWITCH_PROFILE_BUTTON": "انظر إلى الملف الشخصي",
   "USER_SWITCH_SIGN_OUT_BUTTON": "خروج",
   "USER_SWITCH_SIGNED_OUT_TOOLTIP": "أنت غير مسجل الدخول.",
-  "USER_SWITCH_SWITCH_USER_TEXT": "تسجيل الدخول بحساب آخر"
+  "USER_SWITCH_SWITCH_USER_TEXT": "تسجيل الدخول بحساب آخر",
+  "FALLBACK_TITLE": "عفواً",
+  "FALLBACK_TEXT": "حدث خطأ غير متوقع، يرحى المحاولة لاحقاً",
+  "FALLBACK_BACK_TO_HOME": "الرجوع إلى الصفحة الرئيسية",
+  "REPORT_A_BUG": "الإبلاغ عن مشكلة"
 }

src/langs/constants.ts

@@ -306,4 +306,8 @@ export const BUILDER = {
   STATUS_TOOLTIP_IS_COLLAPSIBLE: 'STATUS_TOOLTIP_IS_COLLAPSIBLE',
   STATUS_TOOLTIP_SHOW_CHATBOX: 'STATUS_TOOLTIP_SHOW_CHATBOX',
   SETTINGS_FILE_SETTINGS_TITLE: 'SETTINGS_FILE_SETTINGS_TITLE',
+  FALLBACK_TITLE: 'FALLBACK_TITLE',
+  FALLBACK_TEXT: 'FALLBACK_TEXT',
+  FALLBACK_BACK_TO_HOME: 'FALLBACK_BACK_TO_HOME',
+  REPORT_A_BUG: 'REPORT_A_BUG',
 };

src/langs/en.json

@@ -247,5 +247,9 @@
   "STATUS_TOOLTIP_IS_PUBLISHED": "Published",
   "STATUS_TOOLTIP_IS_COLLAPSIBLE": "Collapsible",
   "STATUS_TOOLTIP_SHOW_CHATBOX": "Chatbox visible",
-  "SETTINGS_FILE_SETTINGS_TITLE": "File Settings"
+  "SETTINGS_FILE_SETTINGS_TITLE": "File Settings",
+  "FALLBACK_TITLE": "Oops!",
+  "FALLBACK_TEXT": "Sorry, Something went wrong Try again later",
+  "FALLBACK_BACK_TO_HOME": "Back to homepage",
+  "REPORT_A_BUG": "Report a Bug"
 }