RudderStack Analytics Integration with HyperTrace

Dockerfile

@@ -1,6 +1,9 @@
 FROM nginx:1.21-alpine
 COPY dist/hypertrace-ui /usr/share/nginx/html
 COPY conf/default.conf /etc/nginx/conf.d/default.conf
+COPY copy-secrets.sh /usr/share/nginx/html
 RUN chmod a+w /var/cache/nginx /var/run
+RUN chmod +x /usr/share/nginx/html/copy-secrets.sh
 EXPOSE 2020
 HEALTHCHECK --interval=1s --retries=5 --timeout=1s CMD wget -qO- http://localhost:2020/graphql?query={__schema{queryType{name}}} &> /dev/null || exit 1
+ENTRYPOINT copy-secrets.sh

angular.json

@@ -24,6 +24,7 @@
             "tsConfig": "tsconfig.app.json",
             "assets": [
               "src/favicon.png",
+              "src/secrets.js",
               {
                 "glob": "**/*",
                 "input": "./projects/assets-library/assets",

copy-secrets.sh

@@ -0,0 +1,14 @@
+#!/bin/sh
+touch secrets.js
+if [ -z $ENABLE_ANALYTICS ]
+then
+   ENABLE_ANALYTICS="false"
+fi
+echo "window.ENABLE_ANALYTICS = \"$ENABLE_ANALYTICS\";" > secrets.js
+if [ "$ENABLE_ANALYTICS" = "true" ]
+then
+    echo "window.RUDDERSTACK_HT_WRITE_KEY = \"$RUDDERSTACK_HT_WRITE_KEY\";" >> secrets.js
+    echo "window.RUDDERSTACK_HT_DATAPLANE_URL = \"$RUDDERSTACK_HT_DATAPLANE_URL\";" >> secrets.js
+else 
+    echo "Analytics is disabled"
+fi

package.json

@@ -65,6 +65,7 @@
     "lodash-es": "^4.17.21",
     "mixpanel-browser": "^2.45.0",
     "ngx-color": "7.0.0",
+    "rudder-sdk-js": "^2.3.0",
     "rxjs": "~6.6.7",
     "tslib": "^2.3.1",
     "uuid": "^8.3.2",

projects/common/package.json

@@ -22,7 +22,8 @@
     "d3-interpolate": "^2.0.1",
     "d3-color": "^1.4.0",
     "@fullstory/browser": "^1.4.9",
-    "mixpanel-browser": "^2.41.0"
+    "mixpanel-browser": "^2.41.0",
+    "rudder-sdk-js": "^2.3.0"
   },
   "devDependencies": {
     "@hypertrace/test-utils": "^0.0.0"

projects/common/src/public-api.ts

@@ -107,6 +107,7 @@ export * from './telemetry/telemetry';
 export { FullStoryTelemetry } from './telemetry/providers/fullstory/full-story-provider';
 export { FreshPaintTelemetry } from './telemetry/providers/freshpaint/freshpaint-provider';
 export { MixPanelTelemetry } from './telemetry/providers/mixpanel/mixpanel-provider';
+export { RudderStackTelemetry } from './telemetry/providers/rudderstack/rudderstack-provider';
 export { TrackDirective } from './telemetry/track/track.directive';
 
 // Time

projects/common/src/telemetry/providers/rudderstack/rudderstack-provider.ts

@@ -0,0 +1,41 @@
+import { Injectable } from '@angular/core';
+import { Dictionary } from '../../../utilities/types/types';
+
+import { apiObject, identify, load, page, track } from 'rudder-sdk-js';
+import { TelemetryProviderConfig, UserTelemetryProvider, UserTraits } from '../../telemetry';
+
+export interface RudderStackConfig extends TelemetryProviderConfig {
+  writeKey: string;
+}
+
+@Injectable({ providedIn: 'root' })
+export class RudderStackTelemetry implements UserTelemetryProvider<RudderStackConfig> {
+  public initialize(config: RudderStackConfig): void {
+    try {
+      load(config.writeKey, config.orgId, { configUrl: config.orgId });
+    } catch (error) {
+      /**
+       * Fail silently
+       */
+
+      // tslint:disable-next-line: no-console
+      console.error('Failed to load Rudderstack', error);
+    }
+  }
+
+  public identify(userTraits: UserTraits): void {
+    identify(undefined, userTraits as apiObject);
+  }
+
+  public trackEvent(name: string, eventData: Dictionary<unknown>): void {
+    track(name, eventData as apiObject);
+  }
+
+  public trackPage(name: string, eventData: Dictionary<unknown>): void {
+    page(name, name, eventData as apiObject);
+  }
+
+  public trackError(name: string, eventData: Dictionary<unknown>): void {
+    this.trackEvent(name, eventData);
+  }
+}

src/app/root.module.ts

@@ -2,14 +2,23 @@ import { HttpClientModule } from '@angular/common/http';
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { UserTelemetryModule } from '@hypertrace/common';
+import { RudderStackTelemetry, UserTelemetryModule } from '@hypertrace/common';
 import { ObservabilityDashboardModule } from '@hypertrace/observability';
 import { ApplicationFrameModule } from './application-frame/application-frame.module';
 import { ConfigModule } from './config.module';
 import { RootComponent } from './root.component';
 import { RootRoutingModule } from './routes/root-routing.module';
 import { NavigationModule } from './shared/navigation/navigation.module';
 
+export type CustomWindow = Window &
+  typeof globalThis & {
+    RUDDERSTACK_HT_DATAPLANE_URL?: string;
+    RUDDERSTACK_HT_WRITE_KEY?: string;
+    ENABLE_ANALYTICS?: 'true' | 'false';
+  };
+
+declare const window: CustomWindow;
+
 @NgModule({
   imports: [
     BrowserModule,
@@ -20,7 +29,18 @@ import { NavigationModule } from './shared/navigation/navigation.module';
     HttpClientModule,
     ApplicationFrameModule,
     ObservabilityDashboardModule,
-    UserTelemetryModule.forRoot([])
+    UserTelemetryModule.forRoot([
+      {
+        telemetryProvider: RudderStackTelemetry,
+        enableErrorTracking: true,
+        enableEventTracking: true,
+        enablePageTracking: true,
+        initConfig: {
+          orgId: window.RUDDERSTACK_HT_DATAPLANE_URL,
+          writeKey: window.RUDDERSTACK_HT_WRITE_KEY
+        }
+      }
+    ])
   ],
   declarations: [RootComponent],
   bootstrap: [RootComponent]

src/app/shared/telemetry/user-telemetry-orchestration.service.ts

@@ -1,18 +1,25 @@
 import { Injectable } from '@angular/core';
 import { UserTelemetryService } from '@hypertrace/common';
 
+import { CustomWindow } from '../../root.module';
+
+declare const window: CustomWindow;
+
 @Injectable({
   providedIn: 'root'
 })
 export class UserTelemetryOrchestrationService {
   public constructor(private readonly userTelemetryService: UserTelemetryService) {}
 
   public initialize(): void {
-    this.userTelemetryService.initialize();
+    if (window.ENABLE_ANALYTICS === 'true') {
+      this.userTelemetryService.initialize();
 
-    /**
-     * To Identify user or keep it anonymous, please call this.userTelemetryService.identify()
-     * to identify the user.
-     */
+      /**
+       * To Identify user or keep it anonymous, please call this.userTelemetryService.identify()
+       * to identify the user.
+       */
+      this.userTelemetryService.identify({});
+    }
   }
 }

src/index.html

@@ -7,6 +7,7 @@
 
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.png" />
+    <script src="/secrets.js"></script>
     <link
       href="https://fonts.googleapis.com/css?family=Roboto+Mono|Work+Sans:400,500,600&display=swap"
       rel="stylesheet"

src/secrets.js

@@ -0,0 +1,6 @@
+// Replace the below values with respective write key and dataplane URL on local
+// Please be mindful while pushing changes in this file as it is served to the browser
+// Ensure that it doesn't have any secrets
+window.ENABLE_ANALYTICS = 'false'; // this will be string as the environment variables are string
+window.RUDDERSTACK_HT_WRITE_KEY = 'RUDDERSTACK_HT_WRITE_KEY';
+window.RUDDERSTACK_HT_DATAPLANE_URL = 'RUDDERSTACK_HT_DATAPLANE_URL';