⚡ Support telemetry page (#2756)

* support telemetry page events

* add log level to FE settings

* add debug logging

* fix types

* state fix

* move call

packages/editor-ui/src/plugins/telemetry/index.ts

@@ -3,7 +3,7 @@ import {
 	ITelemetrySettings,
 	IDataObject,
 } from 'n8n-workflow';
-import { INodeCreateElement } from "@/Interface";
+import { ILogLevel, INodeCreateElement } from "@/Interface";
 
 declare module 'vue/types/vue' {
 	interface Vue {
@@ -35,6 +35,8 @@ interface IUserNodesPanelSession {
 
 class Telemetry {
 
+	private pageEventQueue: Array<{category?: string, name?: string | null}>;
+
 	private get telemetry() {
 		// @ts-ignore
 		return window.rudderanalytics;
@@ -49,14 +51,20 @@ class Telemetry {
 		},
 	};
 
-	init(options: ITelemetrySettings, instanceId: string) {
+	constructor() {
+		this.pageEventQueue = [];
+	}
+
+	init(options: ITelemetrySettings, instanceId: string, logLevel?: ILogLevel) {
 		if (options.enabled && !this.telemetry) {
 			if(!options.config) {
 				return;
 			}
 
-			this.loadTelemetryLibrary(options.config.key, options.config.url, { integrations: { All: false }, loadIntegration: false });
+			const logging = logLevel === 'debug' ? { logLevel: 'DEBUG'} : {};
+			this.loadTelemetryLibrary(options.config.key, options.config.url, { integrations: { All: false }, loadIntegration: false, ...logging});
 			this.telemetry.identify(instanceId);
+			this.flushPageEvents();
 		}
 	}
 
@@ -66,10 +74,26 @@ class Telemetry {
 		}
 	}
 
-	page(category?: string, name?: string | undefined | null) {
+	page(category?: string, name?: string | null) {
 		if (this.telemetry)	{
 			this.telemetry.page(category, name);
 		}
+		else {
+			this.pageEventQueue.push({
+				category,
+				name,
+			});
+		}
+	}
+
+	flushPageEvents() {
+		const queue = this.pageEventQueue;
+		this.pageEventQueue = [];
+		queue.forEach(({category, name}) => {
+			if (this.telemetry) {
+				this.telemetry.page(category, name);
+			}
+		});
 	}
 
 	trackNodesPanel(event: string, properties: IDataObject = {}) {