feat: Posthog integration (#9077)

# Which Problems Are Solved

- Adds a service in the console to enable Posthog integration based on
upon user environment variables

# How the Problems Are Solved

- A new service has been created in console for posthog
- This is only initiated based upon provided environment variables

# Additional Changes

N/A

# Additional Context

- Closes #[9076](https://github.com/zitadel/zitadel/issues/9076)
- Cannot be merged until this is completed
#[9070](https://github.com/zitadel/zitadel/issues/9070)

console/package.json

@@ -47,6 +47,7 @@
     "moment": "^2.29.4",
     "ngx-color": "^9.0.0",
     "opentype.js": "^1.3.4",
+    "posthog-js": "^1.191.0",
     "rxjs": "~7.8.0",
     "tinycolor2": "^1.6.0",
     "tslib": "^2.7.0",

console/src/app/app.component.ts

@@ -20,6 +20,7 @@ import { ManagementService } from './services/mgmt.service';
 import { ThemeService } from './services/theme.service';
 import { UpdateService } from './services/update.service';
 import { fallbackLanguage, supportedLanguages, supportedLanguagesRegexp } from './utils/language';
+import { PosthogService } from './services/posthog.service';
 
 @Component({
   selector: 'cnsl-root',
@@ -68,6 +69,7 @@ export class AppComponent implements OnDestroy {
     keyboardShortcuts: KeyboardShortcutsService,
     private activatedRoute: ActivatedRoute,
     @Inject(DOCUMENT) private document: Document,
+    private posthog: PosthogService,
   ) {
     console.log(
       '%cWait!',

console/src/app/app.module.ts

@@ -74,6 +74,7 @@ import { StorageService } from './services/storage.service';
 import { ThemeService } from './services/theme.service';
 import { ToastService } from './services/toast.service';
 import { LanguagesService } from './services/languages.service';
+import { PosthogService } from './services/posthog.service';
 
 registerLocaleData(localeDe);
 i18nIsoCountries.registerLocale(require('i18n-iso-countries/langs/de.json'));
@@ -242,6 +243,7 @@ const authConfig: AuthConfig = {
     ToastService,
     NavigationService,
     LanguagesService,
+    PosthogService,
     { provide: 'windowObject', useValue: window },
   ],
   bootstrap: [AppComponent],

console/src/app/services/environment.service.ts

@@ -13,6 +13,8 @@ export interface Environment {
   issuer: string;
   customer_portal?: string;
   instance_management_url?: string;
+  posthog_token?: string;
+  posthog_url?: string;
   exhausted?: boolean;
 }
 

console/src/app/services/posthog.service.ts

@@ -0,0 +1,43 @@
+import { Injectable, OnDestroy } from '@angular/core';
+import { EnvironmentService } from './environment.service';
+import { Subscription } from 'rxjs';
+import posthog from 'posthog-js';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class PosthogService implements OnDestroy {
+  private posthogToken?: string;
+  private posthogUrl?: string;
+  private envSubscription: Subscription;
+
+  constructor(private envService: EnvironmentService) {
+    this.envSubscription = this.envService.env.subscribe((env) => {
+      this.posthogToken = env.posthog_token;
+      this.posthogUrl = env.posthog_url;
+      this.init();
+    });
+  }
+
+  async init() {
+    if (this.posthogToken && this.posthogUrl) {
+      posthog.init(this.posthogToken, {
+        api_host: this.posthogUrl,
+        session_recording: {
+          maskAllInputs: true,
+          maskTextSelector: '*',
+        },
+        enable_heatmaps: true,
+        persistence: 'memory',
+      });
+    }
+  }
+
+  ngOnDestroy() {
+    if (this.envSubscription) {
+      this.envSubscription.unsubscribe();
+    }
+
+    posthog.reset();
+  }
+}

console/tsconfig.json

@@ -16,6 +16,7 @@
     "experimentalDecorators": true,
     "moduleResolution": "node",
     "importHelpers": true,
+    "skipLibCheck": true,
     "resolveJsonModule": true,
     "esModuleInterop": true,
     "target": "ES2022",

console/yarn.lock

@@ -4495,6 +4495,11 @@ core-js-compat@^3.31.0, core-js-compat@^3.33.1:
   dependencies:
     browserslist "^4.23.3"
 
+core-js@^3.38.1:
+  version "3.39.0"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.39.0.tgz#57f7647f4d2d030c32a72ea23a0555b2eaa30f83"
+  integrity sha512-raM0ew0/jJUqkJ0E6e8UDtl+y/7ktFivgWvqw8dNSQeNWoSDLvQ1H/RN3aPXB9tBd4/FhyR4RDPGhsNIMsAn7g==
+
 core-util-is@1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -5414,6 +5419,11 @@ faye-websocket@^0.11.3:
   dependencies:
     websocket-driver ">=0.5.1"
 
+fflate@^0.4.8:
+  version "0.4.8"
+  resolved "https://registry.yarnpkg.com/fflate/-/fflate-0.4.8.tgz#f90b82aefbd8ac174213abb338bd7ef848f0f5ae"
+  integrity sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA==
+
 figures@3.2.0, figures@^3.0.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/figures/-/figures-3.2.0.tgz#625c18bd293c604dc4a8ddb2febf0c88341746af"
@@ -7994,6 +8004,21 @@ postcss@^8.2.14, postcss@^8.4.21, postcss@^8.4.23, postcss@^8.4.27:
     picocolors "^1.1.0"
     source-map-js "^1.2.1"
 
+posthog-js@^1.191.0:
+  version "1.191.0"
+  resolved "https://registry.yarnpkg.com/posthog-js/-/posthog-js-1.191.0.tgz#150d0d8d6b4c4afbb42f769ff49d2e3fae5fa588"
+  integrity sha512-RSyqE9GRb6nqJa/DurtdXSlpDi15RUDAyDh13n2CvaiI5Ij7eIs5gEmfqJZchVZgJhtiOCZ5l6/zAq2NxKqbrg==
+  dependencies:
+    core-js "^3.38.1"
+    fflate "^0.4.8"
+    preact "^10.19.3"
+    web-vitals "^4.2.0"
+
+preact@^10.19.3:
+  version "10.25.0"
+  resolved "https://registry.yarnpkg.com/preact/-/preact-10.25.0.tgz#22a1c93ce97336c5d01d74f363433ab0cd5cde64"
+  integrity sha512-6bYnzlLxXV3OSpUxLdaxBmE7PMOu0aR3pG6lryK/0jmvcDFPlcXGQAt5DpK3RITWiDrfYZRI0druyaK/S9kYLg==
+
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
@@ -9582,6 +9607,11 @@ wcwidth@^1.0.1:
   dependencies:
     defaults "^1.0.3"
 
+web-vitals@^4.2.0:
+  version "4.2.4"
+  resolved "https://registry.yarnpkg.com/web-vitals/-/web-vitals-4.2.4.tgz#1d20bc8590a37769bd0902b289550936069184b7"
+  integrity sha512-r4DIlprAGwJ7YM11VZp4R884m0Vmgr6EAKe3P+kO0PPj3Unqyvv59rczf6UiGcb9Z8QxZVcqKNwv/g0WNdWwsw==
+
 webdriver-js-extender@2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/webdriver-js-extender/-/webdriver-js-extender-2.1.0.tgz#57d7a93c00db4cc8d556e4d3db4b5db0a80c3bb7"