Replace sentry with datadog (#179)

* replace sentry with datadog #178

* minor changes #178

.github/workflows/build.yaml

@@ -49,9 +49,12 @@ jobs:
             SITE_DEFAULT_TITLE = "${{ secrets.SITE_DEFAULT_TITLE }}"
             GA_TRACKING_ID = "${{ secrets.GA_TRACKING_ID }}"
             PROOFMARKET_TOOLCHAIN_REPO = "${{ secrets.PROOFMARKET_TOOLCHAIN_REPO }}"
-            SENTRY_DSN = "${{ secrets.SENTRY_DSN }}"
             CIRCUIT_DEVELOPER_GUIDE_URL = "${{ secrets.CIRCUIT_DEVELOPER_GUIDE_URL }}"
             API_RESPONSE_WAIT_TIMEOUT = "${{ secrets.API_RESPONSE_WAIT_TIMEOUT }}"
+            DATADOG_APPLICATION_ID = "${{ secrets.DATADOG_APPLICATION_ID }}"
+            DATADOG_CLIENT_TOKEN = "${{ secrets.DATADOG_CLIENT_TOKEN }}"
+            DATADOG_SITE = "${{ secrets.DATADOG_SITE }}"
+            DATADOG_SERVICE_NAME = "${{ secrets.DATADOG_SERVICE_NAME }}"
           '
           echo "$config" > runtime-config.toml
           echo runtime-config.toml

.github/workflows/release.yaml

@@ -5,8 +5,6 @@ on:
   push:
     tags:
     - 'v*'
-    branches:
-    - master
 
 jobs:
   release:

.vscode/settings.json

@@ -1,17 +1,17 @@
 {
   "[typescript]": {
-      "editor.defaultFormatter": "esbenp.prettier-vscode"
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "[typescriptreact]": {
-      "editor.defaultFormatter": "esbenp.prettier-vscode"
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "[javascript]": {
-      "editor.defaultFormatter": "esbenp.prettier-vscode"
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "editor.codeActionsOnSave": {
-      "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "editor.formatOnSave": true,
   "editor.formatOnPaste": true,
-  "editor.formatOnType": true,
+  "editor.formatOnType": true
 }

package.json

@@ -3,12 +3,11 @@
   "version": "0.1.7",
   "private": true,
   "dependencies": {
+    "@datadog/browser-rum": "^5.17.1",
     "@loadable/component": "^5.15.3",
     "@nilfoundation/react-components": "^0.8.3",
     "@nilfoundation/ui-kit": "^2.1.3",
     "@reduxjs/toolkit": "^1.8.5",
-    "@sentry/react": "^7.21.1",
-    "@sentry/tracing": "^7.21.1",
     "baseui": "^13.0.0",
     "bootstrap-sass": "^3.4.3",
     "clsx": "^1.2.1",
@@ -24,6 +23,7 @@
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "18.2.0",
     "react-dropzone": "^14.2.3",
+    "react-error-boundary": "^4.0.13",
     "react-ga4": "^1.4.1",
     "react-helmet-async": "^1.3.0",
     "react-hook-form": "^7.39.1",

public/runtime-config.toml

@@ -6,6 +6,9 @@ READONLY_USER = ""
 SITE_DEFAULT_TITLE = ""
 GA_TRACKING_ID = ""
 PROOFMARKET_TOOLCHAIN_REPO = ""
-SENTRY_DSN = ""
 CIRCUIT_DEVELOPER_GUIDE_URL = ""
 API_RESPONSE_WAIT_TIMEOUT = ""
+DATADOG_APPLICATION_ID = ""
+DATADOG_CLIENT_TOKEN = ""
+DATADOG_SITE = ""
+DATADOG_SERVICE_NAME = ""

src/App.tsx

@@ -5,7 +5,7 @@
 
 import type { ReactElement } from 'react';
 import { Suspense } from 'react';
-import { ErrorBoundary, withProfiler } from '@sentry/react';
+import { ErrorBoundary } from 'react-error-boundary';
 import { Helmet } from 'react-helmet-async';
 import { FullScreenLoader, GALocationTracker, PageVisibilityDetector } from './components';
 import { Router, routesConfig as desktopRoutesConfig } from './features/routing';
@@ -41,4 +41,4 @@ function App(): ReactElement {
   );
 }
 
-export default withProfiler(App);
+export default App;

src/datadog.ts

@@ -0,0 +1,40 @@
+/**
+ * @file Datadog rum configuration.
+ * @copyright Yury Korotovskikh <u.korotovskiy@nil.foundation>
+ */
+
+import { datadogRum } from '@datadog/browser-rum';
+import { getRuntimeConfigOrThrow } from './utils';
+
+/**
+ * Configures Datadog Real User Monitoring (RUM) for the application.
+ *
+ * @see {@link https://docs.datadoghq.com/real_user_monitoring/browser/}
+ */
+export const configureDatadogRUM = (): void => {
+  // if (!import.meta.env.PROD) {
+  //   return;
+  // }
+
+  const { DATADOG_APPLICATION_ID, DATADOG_CLIENT_TOKEN, DATADOG_SERVICE_NAME, DATADOG_SITE } =
+    getRuntimeConfigOrThrow();
+
+  if (!DATADOG_APPLICATION_ID || !DATADOG_CLIENT_TOKEN || !DATADOG_SERVICE_NAME || !DATADOG_SITE) {
+    return;
+  }
+
+  datadogRum.init({
+    applicationId: DATADOG_APPLICATION_ID,
+    clientToken: DATADOG_CLIENT_TOKEN,
+    site: DATADOG_SITE,
+    service: DATADOG_SERVICE_NAME,
+    env: 'production',
+    sessionSampleRate: 100,
+    sessionReplaySampleRate: 100,
+    trackResources: false,
+    trackLongTasks: false,
+    trackUserInteractions: false,
+    silentMultipleInit: true,
+    allowFallbackToLocalStorage: true,
+  });
+};

src/index.tsx

@@ -15,14 +15,14 @@ import { Provider as StyletronProvider } from 'styletron-react';
 import { BaseProvider } from 'baseui';
 import App from './App';
 import { store } from './redux';
-import { configureSentry } from './sentry';
+import { configureDatadogRUM } from './datadog';
 import { reportWebVitals } from './reportWebVitals';
 import configureGA from './ga';
 //import * as serviceWorkerRegistration from './serviceWorkerRegistration';
 import { checkRuntimeConfig } from './utils';
 
 checkRuntimeConfig();
-configureSentry();
+configureDatadogRUM();
 configureGA();
 
 const engine = new Styletron();

src/types/runtime-config.d.ts

@@ -13,10 +13,13 @@ const keys = [
   'SITE_DEFAULT_TITLE',
   'PROOFMARKET_TOOLCHAIN_REPO',
   'REVALIDATE_DATA_INTERVAL',
-  'SENTRY_DSN',
   'GA_TRACKING_ID',
   'CIRCUIT_DEVELOPER_GUIDE_URL',
   'API_RESPONSE_WAIT_TIMEOUT',
+  'DATADOG_APPLICATION_ID',
+  'DATADOG_CLIENT_TOKEN',
+  'DATADOG_SITE',
+  'DATADOG_SERVICE_NAME',
 ] as const;
 
 type RuntimConfigKeys = (typeof keys)[number];

src/utils/runtimeConfig/checkRuntimeConfig.ts

@@ -15,6 +15,10 @@ const requiredEnvs: Array<keyof typeof window.RUNTIME_CONFIG> = [
   'PROOFMARKET_TOOLCHAIN_REPO',
   'SITE_DEFAULT_TITLE',
   'CIRCUIT_DEVELOPER_GUIDE_URL',
+  'DATADOG_APPLICATION_ID',
+  'DATADOG_CLIENT_TOKEN',
+  'DATADOG_SITE',
+  'DATADOG_SERVICE_NAME',
 ];
 
 /**