Merge branch 'user-telemetry-2' into user-telemetry-3

Author: anandtiwary

package-lock.json

@@ -36,15 +36,13 @@
     "@angular/platform-browser": "^12.2.1",
     "@angular/platform-browser-dynamic": "^12.2.1",
     "@angular/router": "^12.2.1",
-    "@apollo/client": "^3.4.9",
-    "@fullstory/browser": "^1.4.9",
-    "mixpanel-browser": "^2.41.0",
+    "@apollo/client": "^3.4.13",
     "@hypertrace/hyperdash": "^1.2.1",
     "@hypertrace/hyperdash-angular": "^2.6.0",
     "@types/d3-hierarchy": "^2.0.0",
     "@types/d3-transition": "1.1.5",
     "apollo-angular": "^2.6.0",
-    "core-js": "^3.16.3",
+    "core-js": "^3.18.0",
     "d3-array": "^2.12.0",
     "d3-axis": "^2.1.0",
     "d3-brush": "^1.1.6",
@@ -75,7 +73,7 @@
     "@angular/cli": "12.2.1",
     "@angular/compiler-cli": "~12.2.1",
     "@angular/language-service": "~12.2.1",
-    "@commitlint/cli": "^12.1.4",
+    "@commitlint/cli": "^13.1.0",
     "@commitlint/config-conventional": "^13.1.0",
     "@compodoc/compodoc": "^1.1.14",
     "@ngneat/spectator": "^8.0.4",
@@ -109,7 +107,7 @@
     "ng-packagr": "^12.2.1",
     "prettier": "^2.2.1",
     "pretty-quick": "^3.1.1",
-    "ts-node": "~10.0.0",
+    "ts-node": "~10.2.1",
     "tslint": "~6.1.3",
     "tslint-config-prettier": "^1.18.0",
     "typescript": "~4.3.5",

package.json

@@ -78,6 +78,7 @@ const iconsRootPath = 'assets/icons';
         { key: IconType.Search, url: `${iconsRootPath}/search.svg` },
         { key: IconType.SidebarCollapse, url: `${iconsRootPath}/sidebar-collapse.svg` },
         { key: IconType.SidebarExpand, url: `${iconsRootPath}/sidebar-expand.svg` },
+        { key: IconType.SidebarLeft, url: `${iconsRootPath}/sidebar-left.svg` },
         { key: IconType.Sort, url: `${iconsRootPath}/sort.svg` },
         { key: IconType.Slack, url: `${iconsRootPath}/slack.svg` },
         { key: IconType.Spinner, url: `${iconsRootPath}/spinner.svg` },

projects/assets-library/assets/icons/sidebar-left.svg

@@ -99,6 +99,7 @@ export const enum IconType {
   Share = 'share',
   SidebarCollapse = 'svg:sidebar-collapse',
   SidebarExpand = 'svg:sidebar-expand',
+  SidebarLeft = 'svg:sidebar-left',
   Slack = 'svg:slack',
   Sort = 'svg:sort',
   SpanId = 'bookmark_border',

projects/assets-library/src/icons/icon-library.module.ts

@@ -20,9 +20,7 @@
     "zone.js": "~0.11.4",
     "lodash-es": "^4.17.21",
     "d3-interpolate": "^2.0.1",
-    "d3-color": "^1.4.0",
-    "@fullstory/browser": "^1.4.9",
-    "mixpanel-browser": "^2.41.0"
+    "d3-color": "^1.4.0"
   },
   "devDependencies": {
     "@hypertrace/test-utils": "^0.0.0"

projects/assets-library/src/icons/icon-type.ts

@@ -0,0 +1,32 @@
+import { createServiceFactory, mockProvider } from '@ngneat/spectator/jest';
+import { UserTelemetryImplService } from '../user-telemetry-impl.service';
+import { TelemetryGlobalErrorHandler } from './telemetry-global-error-handler';
+
+describe('Telemetry Global Error Handler ', () => {
+  const createService = createServiceFactory({
+    service: TelemetryGlobalErrorHandler,
+    providers: [
+      mockProvider(UserTelemetryImplService, {
+        trackErrorEvent: jest.fn()
+      })
+    ]
+  });
+
+  test('should delegate to telemetry provider after registration', () => {
+    const spectator = createService();
+    try {
+      spectator.service.handleError(new Error('Test error'));
+    } catch (_) {
+      // NoOP
+    }
+
+    expect(spectator.inject(UserTelemetryImplService).trackErrorEvent).toHaveBeenCalledWith(
+      'Test error',
+      expect.objectContaining({
+        message: 'Test error',
+        name: 'Error',
+        isError: true
+      })
+    );
+  });
+});

projects/common/package.json

@@ -1,13 +1,13 @@
 import { LocationStrategy, PathLocationStrategy } from '@angular/common';
 import { ErrorHandler, Injectable, Injector } from '@angular/core';
-import { UserTelemetryInternalService } from '../user-telemetry-internal.service';
+import { UserTelemetryImplService } from '../user-telemetry-impl.service';
 
 @Injectable()
 export class TelemetryGlobalErrorHandler implements ErrorHandler {
   public constructor(private readonly injector: Injector) {}
 
   public handleError(error: Error): Error {
-    const telemetryService = this.injector.get(UserTelemetryInternalService);
+    const telemetryService = this.injector.get(UserTelemetryImplService);
 
     const location = this.injector.get(LocationStrategy);
     const message = error.message ?? error.toString();

projects/common/src/telemetry/error-handler/telemetry-global-error-handler.test.ts

@@ -1,22 +1,16 @@
-import { InjectionToken, ProviderToken } from '@angular/core';
+import { ProviderToken } from '@angular/core';
 import { Dictionary } from './../utilities/types/types';
-export interface UserTraits extends Dictionary<unknown> {
-  email?: string;
-  companyName?: string;
-  name?: string;
-  displayName?: string;
-}
 
-export interface UserTelemetryRegistrationConfig<InitConfig> {
-  telemetryProvider: ProviderToken<UserTelemetryProvider<InitConfig>>;
-  initConfig: InitConfig;
+export interface UserTelemetryRegistrationConfig<TInitConfig> {
+  telemetryProvider: ProviderToken<UserTelemetryProvider<TInitConfig>>;
+  initConfig: TInitConfig;
   enablePageTracking: boolean;
   enableEventTracking: boolean;
   enableErrorTracking: boolean;
 }
 
-export interface UserTelemetryProvider<InitConfig = unknown> {
-  initialize(config: InitConfig): void;
+export interface UserTelemetryProvider<TInitConfig = unknown> {
+  initialize(config: TInitConfig): void;
   identify(userTraits: UserTraits): void;
   trackEvent?(name: string, eventData: Dictionary<unknown>): void;
   trackPage?(url: string, eventData: Dictionary<unknown>): void;
@@ -28,6 +22,14 @@ export interface TelemetryProviderConfig {
   orgId: string;
 }
 
-export const USER_TELEMETRY_PROVIDER_TOKENS = new InjectionToken<UserTelemetryRegistrationConfig<unknown>[][]>(
-  'USER_TELEMETRY_PROVIDER_TOKENS'
-);
+export interface UserTraits extends Dictionary<unknown> {
+  email?: string;
+  companyName?: string;
+  name?: string;
+  displayName?: string;
+}
+
+export const enum TrackUserEventsType {
+  Click = 'click',
+  ContextMenu = 'context-menu'
+}

projects/common/src/telemetry/error-handler/telemetry-global-error-handler.ts

@@ -0,0 +1,67 @@
+import { CommonModule } from '@angular/common';
+import { fakeAsync } from '@angular/core/testing';
+import { createDirectiveFactory, mockProvider, SpectatorDirective } from '@ngneat/spectator/jest';
+import { UserTelemetryImplService } from '../user-telemetry-impl.service';
+import { TrackDirective } from './track.directive';
+
+describe('Track directive', () => {
+  let spectator: SpectatorDirective<TrackDirective>;
+
+  const createDirective = createDirectiveFactory<TrackDirective>({
+    directive: TrackDirective,
+    imports: [CommonModule],
+    providers: [
+      mockProvider(UserTelemetryImplService, {
+        trackEvent: jest.fn()
+      })
+    ]
+  });
+
+  test('propagates events with default config', fakeAsync(() => {
+    spectator = createDirective(
+      `
+    <div class="content" [htTrack] [htTrackLabel]="label">Test Content</div>
+  `,
+      {
+        hostProps: {
+          events: ['click'],
+          label: 'Content'
+        }
+      }
+    );
+
+    const telemetryService = spectator.inject(UserTelemetryImplService);
+
+    spectator.click(spectator.element);
+    spectator.tick();
+
+    expect(telemetryService.trackEvent).toHaveBeenCalledWith(
+      'click: Content',
+      expect.objectContaining({ type: 'click' })
+    );
+  }));
+
+  test('propagates events with custom config', fakeAsync(() => {
+    spectator = createDirective(
+      `
+    <div class="content" [htTrack]="events" [htTrackLabel]="label">Test Content</div>
+  `,
+      {
+        hostProps: {
+          events: ['mouseover'],
+          label: 'Content'
+        }
+      }
+    );
+
+    const telemetryService = spectator.inject(UserTelemetryImplService);
+
+    spectator.dispatchMouseEvent(spectator.element, 'mouseover');
+    spectator.tick();
+
+    expect(telemetryService.trackEvent).toHaveBeenCalledWith(
+      'mouseover: Content',
+      expect.objectContaining({ type: 'mouseover' })
+    );
+  }));
+});