Chore/sentry

package.json

@@ -26,6 +26,7 @@
     "dependencies": {
         "@clavinjune/codemirror-metricsql": "^0.0.1-dev.1010230001",
         "@lezer/highlight": "^1.1.6",
+        "@sentry/react": "^7.81.1",
         "@skbkontur/react-icons": "^5.2.9",
         "@skbkontur/react-stack-layout": "1.0.3",
         "@skbkontur/react-ui": "^4.16.0",

src/Containers/ErrorContainer.tsx

@@ -1,12 +1,12 @@
 import React, { ReactElement } from "react";
 import { Layout, LayoutContent, LayoutTitle } from "../Components/Layout/Layout";
 
-export default function ErrorContainer(): ReactElement {
+export default function ErrorContainer(message = "Page not found"): ReactElement {
     return (
         <Layout>
             <LayoutContent>
                 <LayoutTitle>404</LayoutTitle>
-                <p>Page not found</p>
+                <p>{message}</p>
             </LayoutContent>
         </Layout>
     );

src/Domain/Config.ts

@@ -17,4 +17,5 @@ export interface Config {
         isPlottingAvailable: boolean;
         isSubscriptionToAllTagsAvailable: boolean;
     };
+    sentry?: { dsn: string };
 }

src/app.tsx

@@ -6,21 +6,33 @@ import { LocaleContext } from "@skbkontur/react-ui/lib/locale/LocaleContext";
 import MoiraApi from "./Api/MoiraApi";
 import { ApiProvider } from "./Api/MoiraApiInjection";
 import checkMobile from "./helpers/check-mobile";
+import * as Sentry from "@sentry/react";
+import ErrorContainer from "./Containers/ErrorContainer";
+import { initSentry } from "./helpers/initSentry";
 
 import "./style.less";
 
-const root = document.getElementById("root");
-
 const moiraApi = new MoiraApi("/api");
 
+initSentry(moiraApi);
+
+const root = document.getElementById("root");
+
 const render = (Component: ComponentType) => {
     if (root !== null) {
         ReactDOM.render(
             <BrowserRouter>
                 <LocaleContext.Provider value={{ langCode: LangCodes.en_GB }}>
-                    <ApiProvider value={moiraApi}>
-                        <Component />
-                    </ApiProvider>
+                    <Sentry.ErrorBoundary
+                        fallback={({ error, componentStack }) =>
+                            ErrorContainer(`${error.toString()};
+                            ${componentStack}`)
+                        }
+                    >
+                        <ApiProvider value={moiraApi}>
+                            <Component />
+                        </ApiProvider>
+                    </Sentry.ErrorBoundary>
                 </LocaleContext.Provider>
             </BrowserRouter>,
             root

src/helpers/common.ts

@@ -10,3 +10,21 @@ export const clearInput = (input: string | Array<string>): string => {
 
     return cleared;
 };
+
+export enum Platform {
+    LOCAL = "local",
+    DEV = "dev",
+    STAGING = "staging",
+    PROD = "prod",
+}
+
+const isPlatform = (platform: Platform): boolean => {
+    return window.location.hostname.includes(platform);
+};
+
+export const getPlatform = (): Platform => {
+    if (isPlatform(Platform.LOCAL)) return Platform.LOCAL;
+    if (isPlatform(Platform.DEV)) return Platform.DEV;
+    if (isPlatform(Platform.STAGING)) return Platform.STAGING;
+    return Platform.PROD;
+};

src/helpers/initSentry.ts

@@ -0,0 +1,25 @@
+import MoiraApi from "../Api/MoiraApi";
+import { getPlatform, Platform } from "./common";
+import * as Sentry from "@sentry/react";
+
+const getDSN = async (api: MoiraApi) => {
+    try {
+        const { sentry } = await api.getConfig();
+        return sentry?.dsn;
+    } catch (error) {
+        return Promise.reject("Error getting DSN");
+    }
+};
+
+const isLocalPlatform = getPlatform() === Platform.LOCAL;
+
+export const initSentry = async (api: MoiraApi) => {
+    const key = await getDSN(api);
+    Sentry.init({
+        dsn: key,
+        debug: isLocalPlatform,
+        environment: getPlatform(),
+        enabled: !isLocalPlatform,
+        tracesSampleRate: 1.0,
+    });
+};