Add error handling

package.json

@@ -110,6 +110,7 @@
     "react": "^18.2.0",
     "react-cool-dimensions": "^3.0.1",
     "react-dom": "^18.2.0",
+    "react-error-boundary": "^4.0.13",
     "react-helmet": "^6.1.0",
     "react-hook-form": "^7.48.2",
     "react-router-dom": "^6.23.1",

src/components/Main/RegistrationCard/index.tsx

@@ -2,7 +2,7 @@ import { useRef, useState } from "react";
 import { CSSTransition } from "react-transition-group";
 import { SLACK_WORKSPACE_URL } from "../../../constants";
 import { openURLInDefaultBrowser } from "../../../utils/actions/openURLInDefaultBrowser";
-import { sendTrackingEvent } from "../../../utils/actions/sendTrackingEvent";
+import { sendUserActionTrackingEvent } from "../../../utils/actions/sendUserActionTrackingEvent";
 import { SlackLogoIcon } from "../../common/icons/16px/SlackLogoIcon";
 import { CrossIcon } from "../../common/icons/CrossIcon";
 import { trackingEvents } from "../tracking";
@@ -25,7 +25,7 @@ export const RegistrationCard = ({
   const registrationCardRef = useRef<HTMLDivElement>(null);
 
   const handleSlackLinkClick = () => {
-    sendTrackingEvent(trackingEvents.PROMOTION_SLACK_LINK_CLICKED);
+    sendUserActionTrackingEvent(trackingEvents.PROMOTION_SLACK_LINK_CLICKED);
     openURLInDefaultBrowser(SLACK_WORKSPACE_URL);
   };
 

src/components/RecentActivity/CreateEnvironmentWizard/RegisterStep/index.tsx

@@ -2,7 +2,7 @@ import { KeyboardEvent, useContext, useEffect, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { actions as globalActions } from "../../../../actions";
 import { usePrevious } from "../../../../hooks/usePrevious";
-import { sendTrackingEvent } from "../../../../utils/actions/sendTrackingEvent";
+import { sendUserActionTrackingEvent } from "../../../../utils/actions/sendUserActionTrackingEvent";
 import { isValidEmailFormat } from "../../../../utils/isValidEmailFormat";
 import { ConfigContext } from "../../../common/App/ConfigContext";
 import { EnvelopeIcon } from "../../../common/icons/16px/EnvelopeIcon";
@@ -72,7 +72,9 @@ export const RegisterStep = ({ onNext }: RegisterStepProps) => {
   }, [setFocus]);
 
   const onSubmit = (data: RegistrationFormValues) => {
-    sendTrackingEvent(trackingEvents.LOCAL_REGISTRATION_FORM_SUBMITTED);
+    sendUserActionTrackingEvent(
+      trackingEvents.LOCAL_REGISTRATION_FORM_SUBMITTED
+    );
     window.sendMessageToDigma({
       action: globalActions.PERSONALIZE_REGISTER,
       payload: {

src/components/RecentActivity/CreateEnvironmentWizard/index.tsx

@@ -155,7 +155,9 @@ export const CreateEnvironmentWizard = ({
         }
       });
 
-      sendTrackingEvent(trackingEvents.CREATE_NEW_ENVIRONMENT_FORM_SUBMITTED);
+      sendUserActionTrackingEvent(
+        trackingEvents.CREATE_NEW_ENVIRONMENT_FORM_SUBMITTED
+      );
       return;
     }
 

src/components/Tests/TestCard/index.tsx

@@ -1,6 +1,5 @@
 import { isString } from "../../../typeGuards/isString";
 import { changeScope } from "../../../utils/actions/changeScope";
-import { sendTrackingEvent } from "../../../utils/actions/sendTrackingEvent";
 import { sendUserActionTrackingEvent } from "../../../utils/actions/sendUserActionTrackingEvent";
 import { formatEnvironmentName } from "../../../utils/formatEnvironmentName";
 import { formatTimeDistance } from "../../../utils/formatTimeDistance";
@@ -105,7 +104,7 @@ export const TestCard = ({
 
   const handleRunButtonClick = () => {
     if (test.spanInfo.methodCodeObjectId) {
-      sendTrackingEvent(trackingEvents.RUN_TEST_BUTTON_CLICKED);
+      sendUserActionTrackingEvent(trackingEvents.RUN_TEST_BUTTON_CLICKED);
       window.sendMessageToDigma<RunTestPayload>({
         action: actions.RUN_TEST,
         payload: {

src/components/common/App/index.tsx

@@ -1,12 +1,16 @@
-import { useContext, useEffect, useState } from "react";
+import { ErrorInfo, useContext, useEffect, useState } from "react";
+import { ErrorBoundary } from "react-error-boundary";
 import { ThemeProvider } from "styled-components";
 import { actions } from "../../../actions";
 import { dispatcher } from "../../../dispatcher";
 import { Theme } from "../../../globals";
+import { logger } from "../../../logging";
 import { isBoolean } from "../../../typeGuards/isBoolean";
 import { isNull } from "../../../typeGuards/isNull";
 import { isObject } from "../../../typeGuards/isObject";
 import { isString } from "../../../typeGuards/isString";
+import { sendErrorTrackingEvent } from "../../../utils/actions/sendErrorTrackingEvent";
+import { ErrorScreen } from "../ErrorScreen";
 import { ConfigContext } from "./ConfigContext";
 import { getStyledComponentsTheme } from "./getTheme";
 import { GlobalStyle } from "./styles";
@@ -58,6 +62,14 @@ export const App = ({ theme, children }: AppProps) => {
   const [codeFont, setCodeFont] = useState(defaultCodeFont);
   const [config, setConfig] = useState(useContext(ConfigContext));
 
+  const handleError = (error: Error, info: ErrorInfo) => {
+    logger.error(error, info);
+    sendErrorTrackingEvent(error, {
+      severity: "high",
+      level: "App react component"
+    });
+  };
+
   useEffect(() => {
     if (theme) {
       setCurrentTheme(theme);
@@ -443,7 +455,9 @@ export const App = ({ theme, children }: AppProps) => {
     <ConfigContext.Provider value={config}>
       <ThemeProvider theme={styledComponentsTheme}>
         <GlobalStyle />
-        {children}
+        <ErrorBoundary fallback={<ErrorScreen />} onError={handleError}>
+          {children}
+        </ErrorBoundary>
       </ThemeProvider>
     </ConfigContext.Provider>
   );

src/components/common/ErrorScreen/ErrorScreen.stories.tsx

@@ -0,0 +1,18 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { ErrorScreen } from ".";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta: Meta<typeof ErrorScreen> = {
+  title: "common/ErrorScreen",
+  component: ErrorScreen,
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
+    layout: "fullscreen"
+  }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

src/components/common/ErrorScreen/index.tsx

@@ -0,0 +1,20 @@
+import { trackingEvents } from "../../../trackingEvents";
+import { sendUserActionTrackingEvent } from "../../../utils/actions/sendUserActionTrackingEvent";
+import { NewButton } from "../v3/NewButton";
+import * as s from "./styles";
+
+export const ErrorScreen = () => {
+  const onRefreshButtonClick = () => {
+    sendUserActionTrackingEvent(
+      trackingEvents.ERROR_SCREEN_REFRESH_BUTTON_CLICKED
+    );
+    window.location.href = "/";
+  };
+
+  return (
+    <s.Container>
+      <span>Oops, something went wrong</span>
+      <NewButton onClick={onRefreshButtonClick} label={"Refresh"} />
+    </s.Container>
+  );
+};

src/components/common/ErrorScreen/styles.ts

@@ -0,0 +1,11 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  height: 100%;
+  text-align: center;
+`;

src/containers/Dashboard/index.tsx

@@ -7,13 +7,18 @@ import {
 import { Dashboard } from "../../components/Dashboard";
 import { App } from "../../components/common/App";
 import { dispatcher } from "../../dispatcher";
+import { handleUncaughtError } from "../../utils/handleUncaughtError";
 import { GlobalStyle } from "./styles";
 
 initializeDigmaMessageListener(dispatcher);
 
 window.sendMessageToDigma = sendMessage;
 window.cancelMessageToDigma = cancelMessage;
 
+window.onerror = (message, source, lineno, colno, error) => {
+  handleUncaughtError("dashboard", message, source, lineno, colno, error);
+};
+
 const rootElement = document.getElementById("root");
 
 if (rootElement) {

src/containers/Documentation/index.tsx

@@ -7,13 +7,18 @@ import {
 import { Documentation } from "../../components/Documentation";
 import { App } from "../../components/common/App";
 import { dispatcher } from "../../dispatcher";
+import { handleUncaughtError } from "../../utils/handleUncaughtError";
 import { GlobalStyle } from "./styles";
 
 initializeDigmaMessageListener(dispatcher);
 
 window.sendMessageToDigma = sendMessage;
 window.cancelMessageToDigma = cancelMessage;
 
+window.onerror = (message, source, lineno, colno, error) => {
+  handleUncaughtError("documentation", message, source, lineno, colno, error);
+};
+
 const rootElement = document.getElementById("root");
 
 if (rootElement) {

src/containers/InstallationWizard/index.tsx

@@ -7,13 +7,25 @@ import {
 import { InstallationWizard } from "../../components/InstallationWizard";
 import { App } from "../../components/common/App";
 import { dispatcher } from "../../dispatcher";
+import { handleUncaughtError } from "../../utils/handleUncaughtError";
 import { GlobalStyle } from "./styles";
 
 initializeDigmaMessageListener(dispatcher);
 
 window.sendMessageToDigma = sendMessage;
 window.cancelMessageToDigma = cancelMessage;
 
+window.onerror = (message, source, lineno, colno, error) => {
+  handleUncaughtError(
+    "installationWizard",
+    message,
+    source,
+    lineno,
+    colno,
+    error
+  );
+};
+
 const rootElement = document.getElementById("root");
 
 if (rootElement) {

src/containers/Main/index.tsx

@@ -7,13 +7,18 @@ import {
 } from "../../api";
 import { App } from "../../components/common/App";
 import { dispatcher } from "../../dispatcher";
+import { handleUncaughtError } from "../../utils/handleUncaughtError";
 import { router } from "./router";
 
 initializeDigmaMessageListener(dispatcher);
 
 window.sendMessageToDigma = sendMessage;
 window.cancelMessageToDigma = cancelMessage;
 
+window.onerror = (message, source, lineno, colno, error) => {
+  handleUncaughtError("main", message, source, lineno, colno, error);
+};
+
 const rootElement = document.getElementById("root");
 
 if (rootElement) {

src/containers/Main/router.tsx

@@ -1,4 +1,9 @@
-import { Navigate, RouteObject, createHashRouter } from "react-router-dom";
+import {
+  Navigate,
+  RouteObject,
+  createHashRouter,
+  useRouteError
+} from "react-router-dom";
 import { Assets } from "../../components/Assets";
 import { Errors } from "../../components/Errors";
 import { Highlights } from "../../components/Highlights";
@@ -11,6 +16,9 @@ export const routes: RouteObject[] = [
   {
     path: "/",
     element: <Main />,
+    ErrorBoundary: () => {
+      throw useRouteError();
+    },
     children: [
       {
         index: true,

src/containers/Notifications/index.tsx

@@ -7,13 +7,18 @@ import {
 import { Notifications } from "../../components/Notifications";
 import { App } from "../../components/common/App";
 import { dispatcher } from "../../dispatcher";
+import { handleUncaughtError } from "../../utils/handleUncaughtError";
 import { GlobalStyle } from "./styles";
 
 initializeDigmaMessageListener(dispatcher);
 
 window.sendMessageToDigma = sendMessage;
 window.cancelMessageToDigma = cancelMessage;
 
+window.onerror = (message, source, lineno, colno, error) => {
+  handleUncaughtError("notifications", message, source, lineno, colno, error);
+};
+
 const rootElement = document.getElementById("root");
 
 if (rootElement) {

src/containers/RecentActivity/index.tsx

@@ -7,13 +7,18 @@ import {
 import { RecentActivity } from "../../components/RecentActivity";
 import { App } from "../../components/common/App";
 import { dispatcher } from "../../dispatcher";
+import { handleUncaughtError } from "../../utils/handleUncaughtError";
 import { GlobalStyle } from "./styles";
 
 initializeDigmaMessageListener(dispatcher);
 
 window.sendMessageToDigma = sendMessage;
 window.cancelMessageToDigma = cancelMessage;
 
+window.onerror = (message, source, lineno, colno, error) => {
+  handleUncaughtError("recentActivity", message, source, lineno, colno, error);
+};
+
 const rootElement = document.getElementById("root");
 
 if (rootElement) {

src/containers/Troubleshooting/index.tsx

@@ -7,13 +7,18 @@ import {
 import { Troubleshooting } from "../../components/Troubleshooting";
 import { App } from "../../components/common/App";
 import { dispatcher } from "../../dispatcher";
+import { handleUncaughtError } from "../../utils/handleUncaughtError";
 import { GlobalStyle } from "./styles";
 
 initializeDigmaMessageListener(dispatcher);
 
 window.sendMessageToDigma = sendMessage;
 window.cancelMessageToDigma = cancelMessage;
 
+window.onerror = (message, source, lineno, colno, error) => {
+  handleUncaughtError("troubleshooting", message, source, lineno, colno, error);
+};
+
 const rootElement = document.getElementById("root");
 
 if (rootElement) {

src/trackingEvents.ts

@@ -1,6 +1,8 @@
 export const trackingEvents = {
   TROUBLESHOOTING_LINK_CLICKED: "troubleshooting link clicked",
   USER_ACTION: "user-action",
+  ERROR: "error",
+  ERROR_SCREEN_REFRESH_BUTTON_CLICKED: "error screen refresh button clicked",
   PAGINATION_BUTTON_CLICKED: "pagination button clicked",
   CAROUSEL_NAVIGATION_BUTTON_CLICKED: "carousel navigation button clicked",
   CAROUSEL_PAGE_BUTTON_CLICKED: "carousel page button clicked"