add opentelemetry #178

.github/workflows/build.yaml

@@ -51,10 +51,7 @@ jobs:
             PROOFMARKET_TOOLCHAIN_REPO = "${{ secrets.PROOFMARKET_TOOLCHAIN_REPO }}"
             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 }}"
+            OTEL_TRACE_EXPORTER_URL = "${{ secrets.OTEL_TRACE_EXPORTER_URL }}"
           '
           echo "$config" > runtime-config.toml
           echo runtime-config.toml

package.json

@@ -3,10 +3,11 @@
   "version": "0.1.9",
   "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",
+    "@opentelemetry/exporter-trace-otlp-http": "^0.51.1",
+    "@opentelemetry/sdk-trace-web": "^1.24.1",
     "@reduxjs/toolkit": "^1.8.5",
     "baseui": "^13.0.0",
     "bootstrap-sass": "^3.4.3",

public/runtime-config.toml

@@ -8,7 +8,4 @@ GA_TRACKING_ID = ""
 PROOFMARKET_TOOLCHAIN_REPO = ""
 CIRCUIT_DEVELOPER_GUIDE_URL = ""
 API_RESPONSE_WAIT_TIMEOUT = ""
-DATADOG_APPLICATION_ID = ""
-DATADOG_CLIENT_TOKEN = ""
-DATADOG_SITE = ""
-DATADOG_SERVICE_NAME = ""
+OTEL_TRACE_EXPORTER_URL = ""

src/App.tsx

@@ -15,6 +15,7 @@ import { useBreakpoint } from './features/shared';
 import { MobileRouter } from './features/mobile';
 import { NotificationContainer } from './features/notifications';
 import { BREAKPOINT } from './styles/Breakpoint';
+import { exportErrorToOtelCollector } from './opentelemetry';
 
 const baseDocumentTitle = getRuntimeConfigOrThrow().SITE_DEFAULT_TITLE;
 
@@ -24,8 +25,13 @@ const baseDocumentTitle = getRuntimeConfigOrThrow().SITE_DEFAULT_TITLE;
 function App(): ReactElement {
   const bp = useBreakpoint();
 
+  throw new Error('Test error');
+
   return (
-    <ErrorBoundary fallback={<ErrorView />}>
+    <ErrorBoundary
+      fallback={<ErrorView />}
+      onError={e => exportErrorToOtelCollector(e)}
+    >
       <Helmet
         titleTemplate={`${baseDocumentTitle} | %s`}
         defaultTitle={baseDocumentTitle}

src/api/common/apiClient.ts

@@ -8,6 +8,7 @@ import ky from 'ky';
 import { LocalStorageAPI } from '@/packages/localStorageAdapter';
 import { getRuntimeConfigOrThrow } from '@/utils';
 import { apiBaseUrl } from './apiHelpers';
+import { exportErrorToOtelCollector } from '../../opentelemetry';
 
 /**
  * Create api client settings.
@@ -61,6 +62,13 @@ export const createApiClient = (params: CreateApiClientParameters) => {
           request.headers.set('Authorization', `Bearer ${LocalStorageAPI.getItem('userToken')}`);
         },
       ],
+      beforeError: [
+        error => {
+          exportErrorToOtelCollector(error);
+
+          return error;
+        },
+      ],
     },
     timeout: Number(API_RESPONSE_WAIT_TIMEOUT) ?? defaultTimeout,
     ...options,

src/features/routing/constants/routesConfig.tsx

@@ -3,7 +3,6 @@
  * @copyright Yury Korotovskikh <[email protected]>
  */
 
-import { lazy } from 'react';
 import { Navigate } from 'react-router-dom';
 import type { RouteObject } from 'react-router-dom';
 import { RouterParam } from '@/enums';

src/index.tsx

@@ -15,15 +15,15 @@ import { Provider as StyletronProvider } from 'styletron-react';
 import { BaseProvider } from 'baseui';
 import App from './App';
 import { store } from './redux';
-import { configureDatadogRUM } from './datadog';
+import { initOpentelemetry } from './opentelemetry';
 import { reportWebVitals } from './reportWebVitals';
 import configureGA from './ga';
 //import * as serviceWorkerRegistration from './serviceWorkerRegistration';
 import { checkRuntimeConfig } from './utils';
 
 checkRuntimeConfig();
-configureDatadogRUM();
 configureGA();
+initOpentelemetry();
 
 const engine = new Styletron();
 const { theme } = createTheme(engine, { enableDefaultFonts: false });