[AC-2507] Add Datadog monitoring hook (#151)

* Add datadog monitoring hook

* Address @bang9 comment

.env.example

@@ -2,5 +2,8 @@
 # Sendbird App ID
 # VITE_CHAT_WIDGET_APP_ID=
 # VITE_CHAT_WIDGET_BOT_ID=
+
 # Only for internal use
 # VITE_CHAT_AI_WIDGET_KEY=
+# VITE_CHAT_AI_WIDGET_DATADOG_CLIENT_TOKEN=
+# VITE_CHAT_AI_WIDGET_DATADOG_APP_ID=

.github/workflows/gh-deploy.yml

@@ -18,7 +18,9 @@ jobs:
         run: |
           npm install
           cp .env .env.production
-          echo "VITE_CHAT_AI_WIDGET_KEY=${{ secrets.chat_ai_widget_key }}" >> .env.production
+          echo "VITE_CHAT_AI_WIDGET_KEY=${{ secrets.chat_ai_widget_key }}" >> .env.production && \
+          echo "VITE_CHAT_AI_WIDGET_DATADOG_CLIENT_TOKEN=${{ secrets.datadog_client_token }}" >> .env.production && \
+          echo "VITE_CHAT_AI_WIDGET_DATADOG_APP_ID=${{ secrets.datadog_app_id }}" >> .env.production
           npm run build:pages
 
       - name: Deploy 🚀

.github/workflows/package-publish.yml

@@ -34,7 +34,9 @@ jobs:
         run: |
           npm install
           touch .env.production
-          echo "VITE_CHAT_AI_WIDGET_KEY=${{ secrets.chat_ai_widget_key }}" >> .env.production
+          echo "VITE_CHAT_AI_WIDGET_KEY=${{ secrets.chat_ai_widget_key }}" >> .env.production && \
+          echo "VITE_CHAT_AI_WIDGET_DATADOG_CLIENT_TOKEN=${{ secrets.datadog_client_token }}" >> .env.production && \
+          echo "VITE_CHAT_AI_WIDGET_DATADOG_APP_ID=${{ secrets.datadog_app_id }}" >> .env.production
           npm run build:npm
       - name: Publish to npm
         run: |

package.json

@@ -37,7 +37,7 @@
     "styled-components": "^5.3.11"
   },
   "devDependencies": {
-    "@tanstack/eslint-plugin-query": "^5.17.22",
+    "@datadog/browser-rum": "^5.15.0",
     "@types/dompurify": "^3.0.5",
     "@types/react": "^18.0.37",
     "@types/react-dom": "^18.0.11",

packages/self-service/src/App.tsx

@@ -29,6 +29,7 @@ function App() {
       customUserAgentParam={{
         'chat-ai-widget-deployed': 'True',
       }}
+      serviceName="genai-self-service"
       {...chatbotConfigs}
     />
   );

src/App.tsx

@@ -39,6 +39,7 @@ const App = (props: Props) => {
       customUserAgentParam={props.customUserAgentParam}
       autoOpen={props.autoOpen}
       renderWidgetToggleButton={props.renderWidgetToggleButton}
+      serviceName={props.serviceName}
     />
   );
 };

src/components/ProviderContainer.tsx

@@ -11,6 +11,7 @@ import {
 } from '../context/ConstantContext';
 import { WidgetOpenProvider } from '../context/WidgetOpenContext';
 import { useChannelStyle } from '../hooks/useChannelStyle';
+import useDatadogRum from '../hooks/useDatadog';
 import useWidgetLocalStorage from '../hooks/useWidgetLocalStorage';
 import { getTheme } from '../theme';
 import { isMobile } from '../utils';
@@ -28,6 +29,7 @@ const SBComponent = ({ children }: { children: React.ReactElement }) => {
     stringSet,
     ...restConstantProps
   } = useConstantState();
+  useDatadogRum();
 
   const userAgentCustomParams = useRef({
     ...customUserAgentParam,

src/const.ts

@@ -99,6 +99,7 @@ export interface Constant {
     onClick: () => void;
     isOpen: boolean;
   }) => React.ReactElement;
+  serviceName?: string;
 }
 
 export interface SuggestedReply {

src/context/ConstantContext.tsx

@@ -81,6 +81,7 @@ export const ConstantStateProvider = (props: ProviderProps) => {
       enableMobileView: props.enableMobileView ?? initialState.enableMobileView,
       autoOpen: props.autoOpen,
       renderWidgetToggleButton: props.renderWidgetToggleButton,
+      serviceName: props.serviceName,
     }),
     [props]
   );

src/hooks/useDatadog.ts

@@ -0,0 +1,38 @@
+import { datadogRum } from '@datadog/browser-rum';
+import { useEffect } from 'react';
+
+import { useConstantState } from '../context/ConstantContext';
+
+const DATADOG_APP_ID = import.meta.env.VITE_CHAT_AI_WIDGET_DATADOG_APP_ID;
+const DATADOG_CLIENT_TOKEN = import.meta.env
+  .VITE_CHAT_AI_WIDGET_DATADOG_CLIENT_TOKEN;
+const isProd = import.meta.env.PROD ? 'prod' : 'dev';
+
+const useDatadogRum = () => {
+  const { serviceName } = useConstantState();
+  useEffect(() => {
+    if (DATADOG_APP_ID != null && DATADOG_CLIENT_TOKEN != null) {
+      datadogRum.init({
+        applicationId: DATADOG_APP_ID,
+        clientToken: DATADOG_CLIENT_TOKEN,
+        site: 'datadoghq.com',
+        sessionSampleRate: 100,
+        sessionReplaySampleRate: 100,
+        trackResources: true,
+        trackLongTasks: true,
+        trackUserInteractions: true,
+        service: serviceName || 'genai-chatbot-widget',
+        version: APP_VERSION,
+        env: isProd ? 'production' : 'development',
+      });
+
+      datadogRum.startSessionReplayRecording();
+    }
+
+    return () => {
+      datadogRum.stopSessionReplayRecording();
+    };
+  }, []);
+};
+
+export default useDatadogRum;

src/vite-env.d.ts

@@ -1 +1,2 @@
 /// <reference types="vite/client" />
+declare const APP_VERSION: string;

vite.config.ts

@@ -16,6 +16,9 @@ export default defineConfig({
     svgr(),
     dts(),
   ],
+  define: {
+    APP_VERSION: JSON.stringify(process.env.npm_package_version),
+  },
   // to point to correct path for gh-pages
   base: '/chat-ai-widget',
   build: {
@@ -29,11 +32,13 @@ export default defineConfig({
       external: [
         'react',
         'react-dom',
+        '@datadog/browser-rum'
       ],
       output: {
         globals: {
           react: 'React',
           'react-dom': 'ReactDOM',
+          '@datadog/browser-rum': 'datadogRum'
         }
       }
     }