fix(editor): Revert Fix telemetry initialization (no-changelog) (#6968)

Reverts commit b312f2ee54 and
808a92809e

cypress.config.js

@@ -18,6 +18,5 @@ module.exports = defineConfig({
 		screenshotOnRunFailure: true,
 		experimentalInteractiveRunEvents: true,
 		experimentalSessionAndOrigin: true,
-		blockHosts: ['telemetry.n8n.io'],
 	},
 });

package.json

@@ -62,7 +62,6 @@
     "turbo": "1.10.12",
     "typescript": "*",
     "vite": "^4.4.7",
-    "vite-plugin-ejs": "^1.6.4",
     "vitest": "^0.33.0",
     "vue-tsc": "^1.8.8"
   },

packages/editor-ui/index.html

@@ -9,52 +9,7 @@
 			window.BASE_PATH = '/{{BASE_PATH}}/';
 			window.REST_ENDPOINT = '{{REST_ENDPOINT}}';
 		</script>
-		<% if(!isDev){ %>
+		<script>!function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=s.api_host+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled getFeatureFlag onFeatureFlags reloadFeatureFlags".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[])</script>
-		<script type="text/javascript" src="https://cdn-rs.n8n.io/v1/ra.min.js"></script>
-		<% } %>
-		<script>
-			!(function (t, e) {
-				var o, n, p, r;
-				e.__SV ||
-					((window.posthog = e),
-					(e._i = []),
-					(e.init = function (i, s, a) {
-						function g(t, e) {
-							var o = e.split('.');
-							2 == o.length && ((t = t[o[0]]), (e = o[1])),
-								(t[e] = function () {
-									t.push([e].concat(Array.prototype.slice.call(arguments, 0)));
-								});
-						}
-						((p = t.createElement('script')).type = 'text/javascript'),
-							(p.async = !0),
-							(p.src = s.api_host + '/static/array.js'),
-							(r = t.getElementsByTagName('script')[0]).parentNode.insertBefore(p, r);
-						var u = e;
-						for (
-							void 0 !== a ? (u = e[a] = []) : (a = 'posthog'),
-								u.people = u.people || [],
-								u.toString = function (t) {
-									var e = 'posthog';
-									return 'posthog' !== a && (e += '.' + a), t || (e += ' (stub)'), e;
-								},
-								u.people.toString = function () {
-									return u.toString(1) + '.people (stub)';
-								},
-								o =
-									'capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled getFeatureFlag onFeatureFlags reloadFeatureFlags'.split(
-										' ',
-									),
-								n = 0;
-							n < o.length;
-							n++
-						)
-							g(u, o[n]);
-						e._i.push([i, s, a]);
-					}),
-					(e.__SV = 1));
-			})(document, window.posthog || []);
-		</script>
 
 		<title>n8n.io - Workflow Automation</title>
 	</head>

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

@@ -1,9 +1,9 @@
 import type { Plugin } from 'vue';
-import type { IDataObject, ITelemetrySettings, ITelemetryTrackProperties } from 'n8n-workflow';
+import type { ITelemetrySettings, ITelemetryTrackProperties, IDataObject } from 'n8n-workflow';
 import type { RouteLocation } from 'vue-router';
 
 import type { INodeCreateElement, IUpdateInformation } from '@/Interface';
-import type { IUserNodesPanelSession, RudderStack } from './telemetry.types';
+import type { IUserNodesPanelSession } from './telemetry.types';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useRootStore } from '@/stores/n8nRoot.store';
 import { useTelemetryStore } from '@/stores/telemetry.store';
@@ -11,8 +11,13 @@ import { SLACK_NODE_TYPE } from '@/constants';
 import { usePostHog } from '@/stores/posthog.store';
 
 export class Telemetry {
-	constructor(
+	private pageEventQueue: Array<{ route: RouteLocation }>;
-		private rudderStack: RudderStack,
+	private previousPath: string;
+
+	private get rudderStack() {
+		return window.rudderanalytics;
+	}
+
 	private userNodesPanelSession: IUserNodesPanelSession = {
 		sessionId: '',
 		data: {
@@ -20,10 +25,12 @@ export class Telemetry {
 			resultsNodes: [],
 			filterMode: 'Regular',
 		},
-		},
+	};
-		private pageEventQueue: Array<{ route: RouteLocation }> = [],
+
-		private previousPath: string = '',
+	constructor() {
-	) {}
+		this.pageEventQueue = [];
+		this.previousPath = '';
+	}
 
 	init(
 		telemetrySettings: ITelemetrySettings,
@@ -37,7 +44,7 @@ export class Telemetry {
 			versionCli: string;
 		},
 	) {
-		if (!telemetrySettings.enabled || !telemetrySettings.config) return;
+		if (!telemetrySettings.enabled || !telemetrySettings.config || this.rudderStack) return;
 
 		const {
 			config: { key, url },
@@ -102,12 +109,17 @@ export class Telemetry {
 
 			const pageName = route.name;
 			let properties: { [key: string]: string } = {};
-			if (route.meta?.telemetry && typeof route.meta.telemetry.getProperties === 'function') {
+			if (
+				route.meta &&
+				route.meta.telemetry &&
+				typeof route.meta.telemetry.getProperties === 'function'
+			) {
 				properties = route.meta.telemetry.getProperties(route);
 			}
 
-			const category = route.meta?.telemetry?.pageCategory || 'Editor';
+			const category =
-			this.rudderStack.page(category, pageName, properties);
+				(route.meta && route.meta.telemetry && route.meta.telemetry.pageCategory) || 'Editor';
+			this.rudderStack.page(category, pageName!, properties);
 		} else {
 			this.pageEventQueue.push({
 				route,
@@ -245,6 +257,8 @@ export class Telemetry {
 	}
 
 	private initRudderStack(key: string, url: string, options: IDataObject) {
+		window.rudderanalytics = window.rudderanalytics || [];
+
 		this.rudderStack.methods = [
 			'load',
 			'page',
@@ -271,20 +285,26 @@ export class Telemetry {
 			this.rudderStack[method] = this.rudderStack.factory(method);
 		}
 
+		this.rudderStack.loadJS = () => {
+			const script = document.createElement('script');
+
+			script.type = 'text/javascript';
+			script.async = !0;
+			script.src = 'https://cdn-rs.n8n.io/v1/ra.min.js';
+
+			const element: Element = document.getElementsByTagName('script')[0];
+
+			if (element && element.parentNode) {
+				element.parentNode.insertBefore(script, element);
+			}
+		};
+
+		this.rudderStack.loadJS();
 		this.rudderStack.load(key, url, options);
 	}
 }
 
-export const telemetry = new Telemetry(
+export const telemetry = new Telemetry();
-	window.rudderanalytics ?? {
-		identify: () => {},
-		reset: () => {},
-		track: () => {},
-		page: () => {},
-		push: () => {},
-		load: () => {},
-	},
-);
 
 export const TelemetryPlugin: Plugin<{}> = {
 	install(app) {

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

@@ -17,15 +17,17 @@ interface IUserNodesPanelSessionData {
 
 /**
  * Simplified version of:
- * https://github.com/rudderlabs/rudder-sdk-js/blob/production-staging/packages/npm/index.d.ts
+ * https://github.com/rudderlabs/rudder-sdk-js/blob/master/dist/rudder-sdk-js/index.d.ts
  */
-export interface RudderStack {
+interface RudderStack extends Array<unknown> {
 	[key: string]: unknown;
 
 	methods: string[];
 
 	factory: (method: string) => (...args: unknown[]) => RudderStack;
 
+	loadJS(): void;
+
 	/**
 	 * Native methods
 	 */

packages/editor-ui/vite.config.ts

@@ -3,7 +3,6 @@ import { resolve } from 'path';
 import { defineConfig, mergeConfig } from 'vite';
 import { defineConfig as defineVitestConfig } from 'vitest/config';
 import { sentryVitePlugin } from '@sentry/vite-plugin';
-import { ViteEjsPlugin } from 'vite-plugin-ejs';
 
 import packageJSON from './package.json';
 
@@ -63,7 +62,7 @@ const alias = [
 	},
 ];
 
-const plugins = [vue(), ViteEjsPlugin()];
+const plugins = [vue()];
 
 const { SENTRY_AUTH_TOKEN: authToken, RELEASE: release } = process.env;
 if (release && authToken) {

pnpm-lock.yaml

@@ -122,9 +122,6 @@ importers:
       vite:
         specifier: ^4.4.7
         version: 4.4.7(less@4.1.3)(sass@1.64.1)
-      vite-plugin-ejs:
-        specifier: ^1.6.4
-        version: 1.6.4
       vitest:
         specifier: ^0.33.0
         version: 0.33.0
@@ -20710,12 +20707,6 @@ packages:
       - terser
     dev: true
 
-  /vite-plugin-ejs@1.6.4:
-    resolution: {integrity: sha512-23p1RS4PiA0veXY5/gHZ60pl3pPvd8NEqdBsDgxNK8nM1rjFFDcVb0paNmuipzCgNP/Y0f/Id22M7Il4kvZ2jA==}
-    dependencies:
-      ejs: 3.1.8
-    dev: true
-
   /vite@4.4.7(@types/node@18.16.16):
     resolution: {integrity: sha512-6pYf9QJ1mHylfVh39HpuSfMPojPSKVxZvnclX1K1FyZ1PXDOcLBibdq5t1qxJSnL63ca8Wf4zts6mD8u8oc9Fw==}
     engines: {node: ^14.18.0 || >=16.0.0}