Add openreplay (#4685)

* Add openreplay

* Add env variables for openreplay

* Add openreplay env for k8s

Author: jamakase

airbyte-webapp/nginx/default.conf.template

@@ -19,6 +19,7 @@ server {
                 window.TRACKING_STRATEGY = "$TRACKING_STRATEGY";
                 window.PAPERCUPS_STORYTIME = "$PAPERCUPS_STORYTIME";
                 window.FULLSTORY = "$FULLSTORY";
+                window.OPENREPLAY = "$OPENREPLAY";
                 window.AIRBYTE_VERSION = "$AIRBYTE_VERSION";
                 window.API_URL = "$API_URL";
                 window.IS_DEMO = "$IS_DEMO";

airbyte-webapp/package-lock.json

@@ -16,6 +16,7 @@
     "@fortawesome/free-solid-svg-icons": "^5.12.1",
     "@fortawesome/react-fontawesome": "^0.1.8",
     "@fullstory/browser": "^1.4.9",
+    "@openreplay/tracker": "^3.0.5",
     "@papercups-io/chat-widget": "^1.1.5",
     "@papercups-io/storytime": "^1.0.6",
     "@rest-hooks/legacy": "^2.0.5",

airbyte-webapp/package.json

@@ -0,0 +1,16 @@
+import { useMemo } from "react";
+import OpenReplay from "@openreplay/tracker";
+
+const useOpenReplay = (projectKey: string): OpenReplay => {
+  return useMemo(() => {
+    const tracker = new OpenReplay({
+      projectKey: projectKey,
+    });
+
+    tracker.start();
+
+    return tracker;
+  }, [projectKey]);
+};
+
+export default useOpenReplay;

airbyte-webapp/src/components/hooks/useOpenReplay.tsx

@@ -6,6 +6,7 @@ declare global {
     TRACKING_STRATEGY?: string;
     PAPERCUPS_STORYTIME?: string;
     FULLSTORY?: string;
+    OPENREPLAY?: string;
     AIRBYTE_VERSION?: string;
     API_URL?: string;
     IS_DEMO?: string;
@@ -32,6 +33,9 @@ type Config = {
     baseUrl: string;
     enableStorytime: boolean;
   };
+  openreplay: {
+    projectKey: string;
+  };
   fullstory: Fullstory.SnippetOptions;
   apiUrl: string;
   healthCheckInterval: number;
@@ -67,6 +71,9 @@ const config: Config = {
     baseUrl: "https://app.papercups.io",
     enableStorytime: window.PAPERCUPS_STORYTIME !== "disabled",
   },
+  openreplay: {
+    projectKey: window.OPENREPLAY !== "disabled" ? "6611843272536134" : "",
+  },
   fullstory: {
     orgId: "13AXQ4",
     devMode: window.FULLSTORY === "disabled",

airbyte-webapp/src/config/index.ts

@@ -26,6 +26,7 @@ import useWorkspace from "components/hooks/services/useWorkspaceHook";
 import { AnalyticsService } from "core/analytics/AnalyticsService";
 import { useNotificationService } from "components/hooks/services/Notification/NotificationService";
 import { useApiHealthPoll } from "components/hooks/services/Health";
+import useOpenReplay from "../components/hooks/useOpenReplay";
 
 export enum Routes {
   Preferences = "/preferences",
@@ -160,15 +161,17 @@ const OnboardingsRoutes = () => {
 };
 
 export const Routing: React.FC = () => {
+  useApiHealthPoll(config.healthCheckInterval);
   useSegment(config.segment.token);
   useFullStory(config.fullstory);
-  useApiHealthPoll(config.healthCheckInterval);
+  const tracker = useOpenReplay(config.openreplay.projectKey);
 
   const { workspace } = useWorkspace();
 
   useEffect(() => {
     if (workspace) {
       AnalyticsService.identify(workspace.customerId);
+      tracker.setUserID(workspace.customerId);
     }
   }, [workspace]);
 

airbyte-webapp/src/pages/routes.tsx

@@ -35,6 +35,7 @@ INTERNAL_API_HOST=airbyte-server-svc:8001
 WORKER_ENVIRONMENT=kubernetes
 PAPERCUPS_STORYTIME=disabled
 FULLSTORY=disabled
+OPENREPLAY=disabled
 IS_DEMO=false
 LOG_LEVEL=INFO
 

kube/overlays/dev/.env

@@ -35,6 +35,7 @@ INTERNAL_API_HOST=airbyte-server-svc:8001
 WORKER_ENVIRONMENT=kubernetes
 PAPERCUPS_STORYTIME=enabled
 FULLSTORY=enabled
+OPENREPLAY=enabled
 IS_DEMO=false
 LOG_LEVEL=INFO
 

kube/overlays/stable-with-resource-limits/.env

@@ -35,6 +35,7 @@ INTERNAL_API_HOST=airbyte-server-svc:8001
 WORKER_ENVIRONMENT=kubernetes
 PAPERCUPS_STORYTIME=enabled
 FULLSTORY=enabled
+OPENREPLAY=enabled
 IS_DEMO=false
 LOG_LEVEL=INFO
 

kube/overlays/stable/.env

@@ -53,6 +53,11 @@ spec:
                 configMapKeyRef:
                   name: airbyte-env
                   key: FULLSTORY
+            - name: OPENREPLAY
+              valueFrom:
+                configMapKeyRef:
+                  name: airbyte-env
+                  key: OPENREPLAY
             - name: IS_DEMO
               valueFrom:
                 configMapKeyRef: