wrap components with error boundaries, minox fixes

src/components/Drawers.tsx

@@ -30,8 +30,11 @@ import { ReactComponent as CrossIcon } from "@root/assets/Icons/cross.svg";
 import { payCart } from "@root/api/cart";
 import { enqueueSnackbar } from "notistack";
 import { Link, useNavigate } from "react-router-dom";
+import { withErrorBoundary } from "react-error-boundary";
+import { handleComponentError } from "@root/utils/handleComponentError";
+import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
 
-export default function Drawers() {
+function Drawers() {
   const [openNotificationsModal, setOpenNotificationsModal] =
     useState<boolean>(false);
   const [loading, setLoading] = useState<boolean>(false);
@@ -324,3 +327,15 @@ export default function Drawers() {
     </Box>
   );
 }
+
+export default withErrorBoundary(Drawers, {
+    fallback: (
+        <Box sx={{
+            display: "flex",
+            alignItems: "center",
+        }}>
+            <ErrorOutlineIcon color="error" />
+        </Box>
+    ),
+    onError: handleComponentError,
+})

src/pages/AccountSettings/AccountSettings.tsx

@@ -13,8 +13,10 @@ import { getMessageFromFetchError } from "@frontend/kitui";
 import { enqueueSnackbar } from "notistack";
 import { VerificationStatus } from "@root/model/account";
 import { verify } from "./helper";
+import { withErrorBoundary } from "react-error-boundary";
+import { handleComponentError } from "@root/utils/handleComponentError";
 
-export default function AccountSettings() {
+function AccountSettings() {
     const theme = useTheme();
     const upMd = useMediaQuery(theme.breakpoints.up("md"));
     const upSm = useMediaQuery(theme.breakpoints.up("sm"));
@@ -37,12 +39,6 @@ export default function AccountSettings() {
         bold: true,
     };
 
-  const verificationStatusData: Record<VerificationStatus, { text: string; color: string }> = {
-    verificated: { text: "Верификация пройдена", color: "#0D9F00" },
-    waiting: { text: "В ожидании верификации", color: "#F18956" },
-    notVerificated: { text: "Не верифицирован", color: "#E02C2C" },
-  };
-
     function handleSendDataClick() {
         sendUserData()
             .then(() => {
@@ -54,32 +50,6 @@ export default function AccountSettings() {
             });
     }
 
-  function VerificationIndicator({
-    verificationStatus,
-    sx,
-  }: {
-    verificationStatus: VerificationStatus;
-    sx?: SxProps<Theme>;
-  }) {
-    return (
-      <Box
-        sx={{
-          py: "14px",
-          px: "8.5px",
-          borderWidth: "1px",
-          borderStyle: "solid",
-          color: verificationStatusData[verificationStatus].color,
-          borderColor: verificationStatusData[verificationStatus].color,
-          borderRadius: "8px",
-          textAlign: "center",
-          ...sx,
-        }}
-      >
-        <Typography lineHeight="100%">{verificationStatusData[verificationStatus].text}</Typography>
-      </Box>
-    );
-  }
-
     return (
         <SectionWrapper
             maxWidth="lg"
@@ -266,3 +236,40 @@ export default function AccountSettings() {
         </SectionWrapper>
     );
 }
+
+export default withErrorBoundary(AccountSettings, {
+    fallback: <Typography mt="8px" textAlign="center">Ошибка при отображении настроек аккаунта</Typography>,
+    onError: handleComponentError,
+})
+
+const verificationStatusData: Record<VerificationStatus, { text: string; color: string; }> = {
+    verificated: { text: "Верификация пройдена", color: "#0D9F00" },
+    waiting: { text: "В ожидании верификации", color: "#F18956" },
+    notVerificated: { text: "Не верифицирован", color: "#E02C2C" },
+};
+
+function VerificationIndicator({
+    verificationStatus,
+    sx,
+}: {
+    verificationStatus: VerificationStatus;
+    sx?: SxProps<Theme>;
+}) {
+    return (
+        <Box
+            sx={{
+                py: "14px",
+                px: "8.5px",
+                borderWidth: "1px",
+                borderStyle: "solid",
+                color: verificationStatusData[verificationStatus].color,
+                borderColor: verificationStatusData[verificationStatus].color,
+                borderRadius: "8px",
+                textAlign: "center",
+                ...sx,
+            }}
+        >
+            <Typography lineHeight="100%">{verificationStatusData[verificationStatus].text}</Typography>
+        </Box>
+    );
+}

src/pages/Cart/Cart.tsx

@@ -6,8 +6,10 @@ import CustomWrapper from "./CustomWrapper";
 import { useCart } from "@root/utils/hooks/useCart";
 import { useLocation } from "react-router-dom";
 import { usePrevLocation } from "@root/utils/hooks/handleCustomBackNavigation";
+import { handleComponentError } from "@root/utils/handleComponentError";
+import { withErrorBoundary } from "react-error-boundary";
 
-export default function Cart() {
+function Cart() {
   const theme = useTheme();
   const upMd = useMediaQuery(theme.breakpoints.up("md"));
   const isMobile = useMediaQuery(theme.breakpoints.down(550));
@@ -71,3 +73,8 @@ export default function Cart() {
     </SectionWrapper>
   );
 }
+
+export default withErrorBoundary(Cart, {
+    fallback: <Typography mt="8px" textAlign="center">Ошибка при отображении корзины</Typography>,
+    onError: handleComponentError,
+})

src/pages/SavedTariffs/index.tsx

@@ -5,8 +5,10 @@ import { useHistoryTracker } from "@root/utils/hooks/useHistoryTracker";
 import SaveWrapper from "./SaveWrapper";
 import { useTariffStore } from "@root/stores/tariffs";
 import { type Tariff } from "@frontend/kitui";
+import { withErrorBoundary } from "react-error-boundary";
+import { handleComponentError } from "@root/utils/handleComponentError";
 
-export default function SavedTariffs() {
+function SavedTariffs() {
   const theme = useTheme();
   const upMd = useMediaQuery(theme.breakpoints.up("md"));
   const isMobile = useMediaQuery(theme.breakpoints.down(550));
@@ -65,3 +67,8 @@ export default function SavedTariffs() {
     </SectionWrapper>
   );
 }
+
+export default withErrorBoundary(SavedTariffs, {
+    fallback: <Typography mt="8px" textAlign="center">Ошибка при отображении сохраненных тарифов</Typography>,
+    onError: handleComponentError,
+})

src/pages/Support/SupportChat.tsx

@@ -35,8 +35,10 @@ import {
   useTicketMessages,
 } from "@frontend/kitui";
 import { shownMessage, sendTicketMessage } from "@root/api/ticket";
+import { withErrorBoundary } from "react-error-boundary";
+import { handleComponentError } from "@root/utils/handleComponentError";
 
-export default function SupportChat() {
+function SupportChat() {
   const theme = useTheme();
   const upMd = useMediaQuery(theme.breakpoints.up("md"));
   const isMobile = useMediaQuery(theme.breakpoints.up(460));
@@ -128,7 +130,7 @@ export default function SupportChat() {
   async function handleSendMessage() {
     if (!ticket || !messageField) return;
 
-    const [_, sendTicketMessageError] = await sendTicketMessage(
+    const [, sendTicketMessageError] = await sendTicketMessage(
       ticket.id,
       messageField
     );
@@ -318,3 +320,8 @@ export default function SupportChat() {
     </Box>
   );
 }
+
+export default withErrorBoundary(SupportChat, {
+    fallback: <Typography mt="8px" textAlign="center">Не удалось отобразить чат</Typography>,
+    onError: handleComponentError,
+})

src/pages/Support/TicketList/TicketList.tsx

@@ -5,13 +5,16 @@ import {
     Box,
     useTheme,
     Pagination,
+    Typography,
 } from "@mui/material";
 import TicketCard from "./TicketCard";
 import { setTicketApiPage, useTicketStore } from "@root/stores/tickets";
 import { Ticket } from "@frontend/kitui";
+import { withErrorBoundary } from "react-error-boundary";
+import { handleComponentError } from "@root/utils/handleComponentError";
 
 
-export default function TicketList() {
+function TicketList() {
     const theme = useTheme();
     const tickets = useTicketStore((state) => state.tickets);
     const ticketCount = useTicketStore((state) => state.ticketCount);
@@ -87,3 +90,8 @@ function sortTicketsByUpdateTime(ticket1: Ticket, ticket2: Ticket) {
     const date2 = new Date(ticket2.updated_at).getTime();
     return date2 - date1;
 }
+
+export default withErrorBoundary(TicketList, {
+    fallback: <Typography mt="8px" textAlign="center">Ошибка загрузки тикетов</Typography>,
+    onError: handleComponentError,
+});

src/pages/TariffConstructor/TariffConstructor.tsx

@@ -1,4 +1,4 @@
-import { Box, IconButton, useMediaQuery, useTheme } from "@mui/material";
+import { Box, IconButton, Typography, useMediaQuery, useTheme } from "@mui/material";
 import { Link } from "react-router-dom";
 import SectionWrapper from "@components/SectionWrapper";
 import { useCustomTariffsStore } from "@root/stores/customTariffs";
@@ -8,8 +8,10 @@ import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 import TotalPrice from "@root/components/TotalPrice";
 import { serviceNameByKey } from "@root/utils/serviceKeys";
 import { useHistoryTracker } from "@root/utils/hooks/useHistoryTracker";
+import { withErrorBoundary } from "react-error-boundary";
+import { handleComponentError } from "@root/utils/handleComponentError";
 
-export default function TariffConstructor() {
+function TariffConstructor() {
   const theme = useTheme();
   const upMd = useMediaQuery(theme.breakpoints.up("md"));
   const isTablet = useMediaQuery(theme.breakpoints.down(1000));
@@ -84,3 +86,8 @@ export default function TariffConstructor() {
     </SectionWrapper>
   );
 }
+
+export default withErrorBoundary(TariffConstructor, {
+    fallback: <Typography mt="8px" textAlign="center">Ошибка при отображении кастомных тарифов</Typography>,
+    onError: handleComponentError,
+})

src/pages/Tariffs/TariffsPage.tsx

@@ -18,6 +18,8 @@ import { Slider } from "./slider";
 import { useCartStore } from "@root/stores/cart";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 import { usePrevLocation } from "@root/utils/hooks/handleCustomBackNavigation";
+import { withErrorBoundary } from "react-error-boundary";
+import { handleComponentError } from "@root/utils/handleComponentError";
 
 const subPages = ["Шаблонизатор", "Опросник", "Сокращатель ссылок"];
 
@@ -26,7 +28,7 @@ const StepperText: Record<string, string> = {
   time: "Тарифы на время",
 };
 
-export default function TariffPage() {
+function TariffPage() {
   const theme = useTheme();
   const upMd = useMediaQuery(theme.breakpoints.up("md"));
   const isMobile = useMediaQuery(theme.breakpoints.down(600));
@@ -178,3 +180,8 @@ export default function TariffPage() {
     </SectionWrapper>
   );
 }
+
+export default withErrorBoundary(TariffPage, {
+    fallback: <Typography mt="8px" textAlign="center">Ошибка загрузки тарифов</Typography>,
+    onError: handleComponentError,
+})

src/utils/handleComponentError.ts

@@ -39,6 +39,6 @@ async function sendErrorsToServer() {
     //     body: errorsQueue,
     //     useToken: true,
     // });
-    console.log(`Sending ${errorsQueue.length} errors to server`, errorsQueue);
+    console.log(`Fake-sending ${errorsQueue.length} errors to server`, errorsQueue);
     errorsQueue = [];
 }