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,20 @@
 import React, { ReactElement } from "react";
 import { Layout, LayoutContent, LayoutTitle } from "../Components/Layout/Layout";
 
-export default function ErrorContainer(): ReactElement {
+interface IErrorContainerProps {
+    message: string;
+    title: string;
+}
+
+export default function ErrorContainer({
+    message = "Page not found",
+    title = "404",
+}: IErrorContainerProps): ReactElement {
     return (
         <Layout>
             <LayoutContent>
-                <LayoutTitle>404</LayoutTitle>
-                <p>Page not found</p>
+                <LayoutTitle>{title}</LayoutTitle>
+                <p>{message}</p>
             </LayoutContent>
         </Layout>
     );

src/Domain/Config.ts

@@ -17,4 +17,11 @@ export interface Config {
         isPlottingAvailable: boolean;
         isSubscriptionToAllTagsAvailable: boolean;
     };
+    sentry?: { dsn: string; platform: Platform };
+}
+
+export enum Platform {
+    DEV = "dev",
+    STAGING = "staging",
+    PROD = "prod",
 }

src/app.tsx

@@ -6,21 +6,32 @@ 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 title={error.toString()} message={componentStack} />
+                        )}
+                    >
+                        <ApiProvider value={moiraApi}>
+                            <Component />
+                        </ApiProvider>
+                    </Sentry.ErrorBoundary>
                 </LocaleContext.Provider>
             </BrowserRouter>,
             root

src/helpers/initSentry.ts

@@ -0,0 +1,28 @@
+import MoiraApi from "../Api/MoiraApi";
+import * as Sentry from "@sentry/react";
+
+const getDSNConfig = async (api: MoiraApi) => {
+    try {
+        const res = await api.getConfig();
+        return res.sentry;
+    } catch (error) {
+        return Promise.reject("Error getting DSN");
+    }
+};
+
+export const initSentry = async (api: MoiraApi) => {
+    const config = await getDSNConfig(api);
+    if (!config) {
+        return;
+    }
+
+    const { dsn, platform } = config;
+    const isLocalPlatform = platform !== undefined;
+    Sentry.init({
+        dsn,
+        debug: isLocalPlatform,
+        environment: platform,
+        enabled: !isLocalPlatform,
+        tracesSampleRate: 1.0,
+    });
+};