fix(editor): Disable telemetry in dev mode and in E2E tests (#6869)

* fix(editor): Disable telemetry in dev mode and in E2E tests

* fix(editor): add external js to rollup config

* fix(editor): using vite plugin to control external script loading

* fix(editor): update lock file version

* fix(editor): block telemetry host

cypress.config.js

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

package.json

@@ -63,6 +63,7 @@
     "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,6 +9,9 @@
 			window.BASE_PATH = '/{{BASE_PATH}}/';
 			window.REST_ENDPOINT = '{{REST_ENDPOINT}}';
 		</script>
+		<% if(!isDev){ %>
+			<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>

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

@@ -1,22 +1,17 @@
 import type { Plugin } from 'vue';
-import type { ITelemetrySettings, ITelemetryTrackProperties, IDataObject } from 'n8n-workflow';
+import type { IDataObject, ITelemetrySettings, ITelemetryTrackProperties } from 'n8n-workflow';
 import type { RouteLocation } from 'vue-router';
 
 import type { INodeCreateElement, IUpdateInformation } from '@/Interface';
-import type { IUserNodesPanelSession } from './telemetry.types';
+import type { IUserNodesPanelSession, RudderStack } from './telemetry.types';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useRootStore } from '@/stores/n8nRoot.store';
 import { useTelemetryStore } from '@/stores/telemetry.store';
 import { SLACK_NODE_TYPE } from '@/constants';
 
 export class Telemetry {
-	private pageEventQueue: Array<{ route: RouteLocation }>;
-	private previousPath: string;
-
-	private get rudderStack() {
-		return window.rudderanalytics;
-	}
-
+	constructor(
+		private rudderStack: RudderStack,
 		private userNodesPanelSession: IUserNodesPanelSession = {
 			sessionId: '',
 			data: {
@@ -24,12 +19,10 @@ export class Telemetry {
 				resultsNodes: [],
 				filterMode: 'Regular',
 			},
-	};
-
-	constructor() {
-		this.pageEventQueue = [];
-		this.previousPath = '';
-	}
+		},
+		private pageEventQueue: Array<{ route: RouteLocation }> = [],
+		private previousPath: string = '',
+	) {}
 
 	init(
 		telemetrySettings: ITelemetrySettings,
@@ -100,17 +93,12 @@ export class Telemetry {
 
 			const pageName = route.name;
 			let properties: { [key: string]: string } = {};
-			if (
-				route.meta &&
-				route.meta.telemetry &&
-				typeof route.meta.telemetry.getProperties === 'function'
-			) {
+			if (route.meta?.telemetry && typeof route.meta.telemetry.getProperties === 'function') {
 				properties = route.meta.telemetry.getProperties(route);
 			}
 
-			const category =
-				(route.meta && route.meta.telemetry && route.meta.telemetry.pageCategory) || 'Editor';
-			this.rudderStack.page(category, pageName!, properties);
+			const category = route.meta?.telemetry?.pageCategory || 'Editor';
+			this.rudderStack.page(category, pageName, properties);
 		} else {
 			this.pageEventQueue.push({
 				route,
@@ -234,8 +222,6 @@ export class Telemetry {
 	}
 
 	private initRudderStack(key: string, url: string, options: IDataObject) {
-		window.rudderanalytics = window.rudderanalytics || [];
-
 		this.rudderStack.methods = [
 			'load',
 			'page',
@@ -262,26 +248,20 @@ 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,17 +17,15 @@ interface IUserNodesPanelSessionData {
 
 /**
  * Simplified version of:
- * https://github.com/rudderlabs/rudder-sdk-js/blob/master/dist/rudder-sdk-js/index.d.ts
+ * https://github.com/rudderlabs/rudder-sdk-js/blob/production-staging/packages/npm/index.d.ts
  */
-interface RudderStack extends Array<unknown> {
+export interface RudderStack {
 	[key: string]: unknown;
 
 	methods: string[];
 
 	factory: (method: string) => (...args: unknown[]) => RudderStack;
 
-	loadJS(): void;
-
 	/**
 	 * Native methods
 	 */

packages/editor-ui/vite.config.ts

@@ -3,6 +3,7 @@ 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';
 
@@ -62,7 +63,7 @@ const alias = [
 	},
 ];
 
-const plugins = [vue()];
+const plugins = [vue(), ViteEjsPlugin()];
 
 const { SENTRY_AUTH_TOKEN: authToken, RELEASE: release } = process.env;
 if (release && authToken) {

pnpm-lock.yaml

@@ -124,6 +124,9 @@ 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
@@ -20715,6 +20718,12 @@ 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}