🪟 🔧 Add Datadog support to webapp, cleanup sentry init

airbyte-webapp/package.json

@@ -24,6 +24,7 @@
     "validate-links": "ts-node --skip-project ./scripts/validate-links.ts"
   },
   "dependencies": {
+    "@datadog/browser-rum": "^4.21.2",
     "@floating-ui/react-dom": "^1.0.0",
     "@fortawesome/fontawesome-svg-core": "^6.1.1",
     "@fortawesome/free-brands-svg-icons": "^6.1.1",
@@ -162,7 +163,9 @@
   },
   "jest": {
     "transformIgnorePatterns": [],
-    "snapshotSerializers": ["./scripts/classname-serializer.js"],
+    "snapshotSerializers": [
+      "./scripts/classname-serializer.js"
+    ],
     "coveragePathIgnorePatterns": [
       ".stories.tsx"
     ]

airbyte-webapp/src/config/types.ts

@@ -6,6 +6,10 @@ declare global {
     AIRBYTE_VERSION?: string;
     API_URL?: string;
     CLOUD?: string;
+    REACT_APP_DATADOG_APPLICATION_ID: string;
+    REACT_APP_DATADOG_CLIENT_TOKEN: string;
+    REACT_APP_DATADOG_SITE: string;
+    REACT_APP_DATADOG_SERVICE: string;
     REACT_APP_SENTRY_DSN?: string;
     REACT_APP_WEBAPP_TAG?: string;
     REACT_APP_INTERCOM_APP_ID?: string;

airbyte-webapp/src/index.tsx

@@ -1,21 +1,17 @@
-import * as Sentry from "@sentry/react";
-import { Integrations } from "@sentry/tracing";
 import { lazy, Suspense } from "react";
 import ReactDOM from "react-dom";
 
 import "react-reflex/styles.css";
 import { isCloudApp } from "utils/app";
+import { loadDatadog } from "utils/datadog";
 import { loadOsano } from "utils/dataPrivacy";
+import { loadSentry } from "utils/sentry";
 
 import "./globals";
 
-// We do not follow default config approach since we want to init sentry asap
-Sentry.init({
-  dsn: process.env.REACT_APP_SENTRY_DSN || window.REACT_APP_SENTRY_DSN,
-  release: process.env.REACT_APP_WEBAPP_TAG || window.REACT_APP_WEBAPP_TAG || "dev",
-  integrations: [new Integrations.BrowserTracing()],
-  tracesSampleRate: 1.0, // may need to adjust this in the future
-});
+// We do not follow default config approach since we want to init sentry/datadog asap
+loadSentry();
+loadDatadog();
 
 // In Cloud load the Osano script (GDPR consent tool before anything else)
 if (isCloudApp()) {

airbyte-webapp/src/utils/datadog.ts

@@ -0,0 +1,28 @@
+import { datadogRum } from "@datadog/browser-rum";
+export const loadDatadog = (): void => {
+  const applicationId = window.REACT_APP_DATADOG_APPLICATION_ID ?? process.env.REACT_APP_DATADOG_APPLICATION_ID;
+  if (!applicationId) {
+    return;
+  }
+
+  const clientToken = window.REACT_APP_DATADOG_CLIENT_TOKEN ?? process.env.REACT_APP_DATADOG_CLIENT_TOKEN;
+  const site = window.REACT_APP_DATADOG_SITE ?? process.env.REACT_APP_DATADOG_SITE;
+  const service = window.REACT_APP_DATADOG_SERVICE ?? process.env.REACT_APP_DATADOG_SERVICE;
+  const version = window.REACT_APP_WEBAPP_TAG ?? process.env.REACT_APP_WEBAPP_TAG ?? "dev";
+
+  datadogRum.init({
+    applicationId,
+    clientToken,
+    site,
+    service,
+    version,
+    sampleRate: 100,
+    sessionReplaySampleRate: 0,
+    trackInteractions: false,
+    trackResources: true,
+    trackLongTasks: true,
+    defaultPrivacyLevel: "mask-user-input",
+  });
+
+  datadogRum.startSessionReplayRecording();
+};

airbyte-webapp/src/utils/sentry.ts

@@ -0,0 +1,19 @@
+import * as Sentry from "@sentry/react";
+import { Integrations } from "@sentry/tracing";
+
+export const loadSentry = (): void => {
+  const dsn = window.REACT_APP_SENTRY_DSN ?? process.env.REACT_APP_SENTRY_DSN;
+  if (!dsn) {
+    return;
+  }
+
+  const release = window.REACT_APP_WEBAPP_TAG ?? process.env.REACT_APP_WEBAPP_TAG ?? "dev";
+  const integrations = [new Integrations.BrowserTracing()];
+
+  Sentry.init({
+    dsn,
+    release,
+    integrations,
+    tracesSampleRate: 1.0,
+  });
+};