feat: using telemetry tracker in few atomic components (#1129)

anandtiwary · web-flow · commit 2018fb2f9788 · 2021-09-28T14:34:24.000-07:00
* feat: adding user telemetry config and service

* feat: adding error handler and a track directive

* feat: adding ootb providers

* feat: using telemetry in with link components

* refactor: using abstract service approach

* refactor: updating api for htTrack directive

* revert: package-lock.json

* revert: revert package.json

* revert: revert package.json peer deps

* refactor: adding tests and addressing commments

* refactor: fix lint errors

* refactor: adding packages and modifying code

* refactor: adding tracking directive on common components

* refactor: fixing tests

* revert: package json changes

* refactor: adding mixpanel types
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -37,6 +37,7 @@
     "@angular/platform-browser-dynamic": "^12.2.1",
     "@angular/router": "^12.2.1",
     "@apollo/client": "^3.4.13",
+    "@fullstory/browser": "^1.4.9",
     "@hypertrace/hyperdash": "^1.2.1",
     "@hypertrace/hyperdash-angular": "^2.6.0",
     "@types/d3-hierarchy": "^2.0.0",
@@ -62,12 +63,11 @@
     "graphql-tag": "^2.12.5",
     "iso8601-duration": "^1.3.0",
     "lodash-es": "^4.17.21",
+    "mixpanel-browser": "^2.41.0",
     "rxjs": "~6.6.7",
     "tslib": "^2.3.1",
     "uuid": "^8.3.2",
-    "zone.js": "~0.11.4",
-    "@fullstory/browser": "^1.4.9",
-    "mixpanel-browser": "^2.41.0"
+    "zone.js": "~0.11.4"
   },
   "devDependencies": {
     "@angular-builders/jest": "^11.2.0",
@@ -92,6 +92,7 @@
     "@types/d3-zoom": "^1.7.5",
     "@types/jest": "^26.0.24",
     "@types/lodash-es": "^4.17.4",
+    "@types/mixpanel-browser": "^2.35.7",
     "@types/node": "^16.7.10",
     "@types/uuid": "^8.3.1",
     "@types/webpack-env": "^1.16.2",
diff --git a/projects/common/src/public-api.ts b/projects/common/src/public-api.ts
@@ -98,6 +98,17 @@ export * from './utilities/rxjs/subscription-lifeycle.service';
 export * from './utilities/types/angular-change-object';
 export * from './utilities/types/types';
 
+// Telemetry
+export * from './telemetry/user-telemetry.module';
+export * from './telemetry/track/user-telemetry-tracking.module';
+export * from './telemetry/track/track.directive';
+export * from './telemetry/user-telemetry.service';
+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 { TrackDirective } from './telemetry/track/track.directive';
+
 // Time
 export * from './time/fixed-time-range';
 export * from './time/interval-duration.service';
diff --git a/projects/common/src/telemetry/providers/freshpaint/load-snippet/index.js b/projects/common/src/telemetry/providers/freshpaint/load-snippet/index.js
@@ -1,6 +1,6 @@
 // tslint:disable
 
-export const loadFreshPaint = () => {
+const loadFreshPaint = () => {
   if (window.freshpaint) {
     return window.freshpaint;
   }
@@ -79,3 +79,7 @@ export const loadFreshPaint = () => {
 
   return freshpaint;
 };
+
+module.exports = {
+  loadFreshPaint
+};
diff --git a/projects/common/src/telemetry/providers/google-analytics/load-snippet/index.js b/projects/common/src/telemetry/providers/google-analytics/load-snippet/index.js
@@ -1,6 +1,6 @@
 // tslint:disable
 
-export const loadGA = () => {
+const loadGA = () => {
   /**
    * Creates a temporary global ga object and loads analytics.js.
    * Parameters o, a, and m are all used internally. They could have been
@@ -49,3 +49,7 @@ export const loadGA = () => {
 
   return ga;
 };
+
+module.exports = {
+  loadGA
+};
diff --git a/projects/common/src/telemetry/track/user-telemetry-tracking.module.ts b/projects/common/src/telemetry/track/user-telemetry-tracking.module.ts
@@ -0,0 +1,10 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { TrackDirective } from './track.directive';
+
+@NgModule({
+  imports: [CommonModule],
+  declarations: [TrackDirective],
+  exports: [TrackDirective]
+})
+export class UserTelemetryTrackingModule {}
diff --git a/projects/common/src/telemetry/user-telemetry-impl.service.ts b/projects/common/src/telemetry/user-telemetry-impl.service.ts
@@ -1,4 +1,4 @@
-import { Injectable, Injector } from '@angular/core';
+import { Injectable, Injector, Optional } from '@angular/core';
 import { NavigationEnd, Router } from '@angular/router';
 import { filter } from 'rxjs/operators';
 import { Dictionary } from '../utilities/types/types';
@@ -9,7 +9,7 @@ import { UserTelemetryService } from './user-telemetry.service';
 export class UserTelemetryImplService extends UserTelemetryService {
   private telemetryProviders: UserTelemetryInternalConfig[] = [];
 
-  public constructor(private readonly injector: Injector, private readonly router: Router) {
+  public constructor(private readonly injector: Injector, @Optional() private readonly router?: Router) {
     super();
     this.setupAutomaticPageTracking();
   }
@@ -69,7 +69,7 @@ export class UserTelemetryImplService extends UserTelemetryService {
   }
 
   private setupAutomaticPageTracking(): void {
-    this.router.events
+    this.router?.events
       .pipe(filter((event): event is NavigationEnd => event instanceof NavigationEnd))
       .subscribe(route => this.trackPageEvent(`Visited: ${route.url}`, { url: route.url }));
   }
diff --git a/projects/common/src/telemetry/user-telemetry.module.ts b/projects/common/src/telemetry/user-telemetry.module.ts
@@ -4,7 +4,12 @@ import { UserTelemetryRegistrationConfig } from './telemetry';
 import { UserTelemetryImplService } from './user-telemetry-impl.service';
 import { UserTelemetryService } from './user-telemetry.service';
 
+const USER_TELEMETRY_PROVIDER_TOKENS = new InjectionToken<UserTelemetryRegistrationConfig<unknown>[][]>(
+  'USER_TELEMETRY_PROVIDER_TOKENS'
+);
+
 @NgModule()
+// tslint:disable:no-unnecessary-class
 export class UserTelemetryModule {
   public constructor(
     @Inject(USER_TELEMETRY_PROVIDER_TOKENS) providerConfigs: UserTelemetryRegistrationConfig<unknown>[][],
@@ -35,7 +40,3 @@ export class UserTelemetryModule {
     };
   }
 }
-
-const USER_TELEMETRY_PROVIDER_TOKENS = new InjectionToken<UserTelemetryRegistrationConfig<unknown>[][]>(
-  'USER_TELEMETRY_PROVIDER_TOKENS'
-);
diff --git a/projects/components/src/breadcrumbs/breadcrumbs.component.test.ts b/projects/components/src/breadcrumbs/breadcrumbs.component.test.ts
@@ -1,7 +1,9 @@
 import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { RouterTestingModule } from '@angular/router/testing';
 import { IconLibraryTestingModule } from '@hypertrace/assets-library';
-import { NavigationService } from '@hypertrace/common';
+import { NavigationService, TrackDirective } from '@hypertrace/common';
 import { byText, createHostFactory, mockProvider, Spectator } from '@ngneat/spectator/jest';
+import { MockDirective } from 'ng-mocks';
 import { EMPTY } from 'rxjs';
 import { BreadcrumbsComponent } from './breadcrumbs.component';
 import { BreadcrumbsModule } from './breadcrumbs.module';
@@ -13,7 +15,8 @@ describe('BreadcrumbsComponent', () => {
   const createHost = createHostFactory({
     declareComponent: false,
     component: BreadcrumbsComponent,
-    imports: [BreadcrumbsModule, HttpClientTestingModule, IconLibraryTestingModule],
+    imports: [BreadcrumbsModule, HttpClientTestingModule, IconLibraryTestingModule, RouterTestingModule],
+    declarations: [MockDirective(TrackDirective)],
     providers: [
       mockProvider(NavigationService, {
         navigation$: EMPTY,
diff --git a/projects/components/src/breadcrumbs/breadcrumbs.component.ts b/projects/components/src/breadcrumbs/breadcrumbs.component.ts
@@ -15,6 +15,8 @@ import { IconSize } from '../icon/icon-size';
           [ngClass]="{ navigable: breadcrumb.url !== undefined }"
           *ngFor="let breadcrumb of this.breadcrumbs; last as isLast; first as isFirst"
           [htTooltip]="this.tooltipMap.get(breadcrumb)"
+          [htTrack]
+          [htTrackLabel]="breadcrumb.label"
         >
           <ht-icon
             class="icon"
diff --git a/projects/components/src/breadcrumbs/breadcrumbs.module.ts b/projects/components/src/breadcrumbs/breadcrumbs.module.ts
@@ -1,12 +1,13 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { UserTelemetryTrackingModule } from '@hypertrace/common';
 import { IconModule } from '../icon/icon.module';
 import { LabelModule } from '../label/label.module';
 import { TooltipModule } from '../tooltip/tooltip.module';
 import { BreadcrumbsComponent } from './breadcrumbs.component';
 
 @NgModule({
-  imports: [CommonModule, IconModule, LabelModule, TooltipModule],
+  imports: [CommonModule, IconModule, LabelModule, TooltipModule, UserTelemetryTrackingModule],
   declarations: [BreadcrumbsComponent],
   exports: [BreadcrumbsComponent]
 })
diff --git a/projects/components/src/button/button.component.test.ts b/projects/components/src/button/button.component.test.ts
@@ -1,6 +1,8 @@
 import { RouterTestingModule } from '@angular/router/testing';
 import { IconType } from '@hypertrace/assets-library';
+import { TrackDirective } from '@hypertrace/common';
 import { createHostFactory, Spectator } from '@ngneat/spectator/jest';
+import { MockDirective } from 'ng-mocks';
 import { IconSize } from '../icon/icon-size';
 import { ButtonRole, ButtonSize, ButtonStyle } from './button';
 import { ButtonComponent } from './button.component';
@@ -12,6 +14,7 @@ describe('Button Component', () => {
   const createHost = createHostFactory({
     component: ButtonComponent,
     imports: [ButtonModule, RouterTestingModule],
+    declarations: [MockDirective(TrackDirective)],
     providers: [],
     declareComponent: false
   });
diff --git a/projects/components/src/button/button.component.ts b/projects/components/src/button/button.component.ts
@@ -10,7 +10,7 @@ import { ButtonRole, ButtonSize, ButtonStyle } from './button';
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <ht-event-blocker event="click" class="button-container" [enabled]="this.disabled">
-      <button class="button" [ngClass]="this.getStyleClasses()">
+      <button class="button" [ngClass]="this.getStyleClasses()" [htTrack] [htTrackLabel]="this.label">
         <ht-icon
           *ngIf="this.icon && !this.trailingIcon"
           [icon]="this.icon"
diff --git a/projects/components/src/button/button.module.ts b/projects/components/src/button/button.module.ts
@@ -1,12 +1,13 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { UserTelemetryTrackingModule } from '@hypertrace/common';
 import { EventBlockerModule } from '../event-blocker/event-blocker.module';
 import { IconModule } from '../icon/icon.module';
 import { LabelModule } from '../label/label.module';
 import { ButtonComponent } from './button.component';
 
 @NgModule({
-  imports: [CommonModule, IconModule, LabelModule, EventBlockerModule],
+  imports: [CommonModule, IconModule, LabelModule, EventBlockerModule, UserTelemetryTrackingModule],
   declarations: [ButtonComponent],
   exports: [ButtonComponent]
 })
diff --git a/projects/components/src/link/link.component.test.ts b/projects/components/src/link/link.component.test.ts
@@ -1,5 +1,6 @@
 import { RouterLinkWithHref } from '@angular/router';
-import { NavigationService } from '@hypertrace/common';
+import { RouterTestingModule } from '@angular/router/testing';
+import { NavigationService, TrackDirective } from '@hypertrace/common';
 import { createHostFactory, mockProvider, SpectatorHost } from '@ngneat/spectator/jest';
 import { MockDirective } from 'ng-mocks';
 import { of } from 'rxjs';
@@ -11,9 +12,9 @@ describe('Link component', () => {
 
   const createHost = createHostFactory({
     component: LinkComponent,
-    imports: [LetAsyncModule],
+    imports: [LetAsyncModule, RouterTestingModule],
     providers: [mockProvider(NavigationService)],
-    declarations: [MockDirective(RouterLinkWithHref)]
+    declarations: [MockDirective(RouterLinkWithHref), MockDirective(TrackDirective)]
   });
 
   test('Link contents should be displayed if params/url is undefined', () => {
diff --git a/projects/components/src/link/link.component.ts b/projects/components/src/link/link.component.ts
@@ -18,6 +18,8 @@ import { EMPTY, Observable } from 'rxjs';
       [queryParamsHandling]="navData?.extras?.queryParamsHandling"
       [skipLocationChange]="navData?.extras?.skipLocationChange"
       [replaceUrl]="navData?.extras?.replaceUrl"
+      [htTrack]
+      htTrackLabel="{{ navData && navData.path ? navData.path : '' }}"
     >
       <ng-content></ng-content>
     </a>
diff --git a/projects/components/src/link/link.module.ts b/projects/components/src/link/link.module.ts
@@ -1,12 +1,13 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
+import { UserTelemetryTrackingModule } from '@hypertrace/common';
 import { LetAsyncModule } from '../let-async/let-async.module';
 import { LinkComponent } from './link.component';
 
 @NgModule({
   declarations: [LinkComponent],
   exports: [LinkComponent],
-  imports: [CommonModule, RouterModule, LetAsyncModule]
+  imports: [CommonModule, RouterModule, LetAsyncModule, UserTelemetryTrackingModule]
 })
 export class LinkModule {}

Original file line number	Diff line number	Diff line change
`@@ -15,6 +15,8 @@ import { IconSize } from '../icon/icon-size';`
`15`	`15`	`[ngClass]="{ navigable: breadcrumb.url !== undefined }"`
`16`	`16`	`*ngFor="let breadcrumb of this.breadcrumbs; last as isLast; first as isFirst"`
`17`	`17`	`[htTooltip]="this.tooltipMap.get(breadcrumb)"`
	`18`	`+ [htTrack]`
	`19`	`+ [htTrackLabel]="breadcrumb.label"`
`18`	`20`	`>`
`19`	`21`	`<ht-icon`
`20`	`22`	`class="icon"`