feat(editor, core): Integrate PostHog (#3865)

* Integrate PostHog - Part 1: Groundwork (#3753)

* Integrate PostHog - Part 2: Event capture (#3779)

* Integrate PostHog - Part 3: Session recordings (#3789)

* Integrate PostHog - Part 4: Experiments (#3825)

* Finalize PostHog integration (#3866)

* 📦 Update `package-lock.json`

* 🐛 Account for absent PH hooks file

* ✨ Create new env `EXTERNAL_FRONTEND_HOOKS_FILES`

* ⚡ Adjust env used for injecting PostHog

* 🐛 Switch to semicolon delimiter

* ⚡ Simplify to `externalFrontendHookPath`

* Refactor FE hooks flow (#3884)

* Add env var for session recordings

* inject frontend hooks even when telemetry is off

* allow multiple hooks files

* cr

* 🐛 Handle missing ref errors

* 🔥 Remove outdated `continue`

* 🎨 Change one-liners to blocks

* 📦 Update `package-lock.json`

Co-authored-by: Ahsan Virani <ahsan.virani@gmail.com>

packages/editor-ui/src/views/NodeView.vue

@@ -435,15 +435,23 @@ export default mixins(
 		methods: {
 			onRunNode(nodeName: string, source: string) {
 				const node = this.$store.getters.getNodeByName(nodeName);
-				this.$telemetry.track('User clicked execute node button', { node_type: node ? node.type : null, workflow_id: this.$store.getters.workflowId, source: 'canvas' });
+				const telemetryPayload = {
+					node_type: node ? node.type : null,
+					workflow_id: this.$store.getters.workflowId,
+					source: 'canvas',
+				};
+				this.$telemetry.track('User clicked execute node button', telemetryPayload);
+				this.$externalHooks().run('nodeView.onRunNode', telemetryPayload);
 				this.runWorkflow(nodeName, source);
 			},
 			onRunWorkflow() {
 				this.getWorkflowDataToSave().then((workflowData) => {
-					this.$telemetry.track('User clicked execute workflow button', {
+					const telemetryPayload = {
 						workflow_id: this.$store.getters.workflowId,
 						node_graph_string: JSON.stringify(TelemetryHelpers.generateNodesGraph(workflowData as IWorkflowBase, this.getNodeTypes()).nodeGraph),
-					});
+					};
+					this.$telemetry.track('User clicked execute workflow button', telemetryPayload);
+					this.$externalHooks().run('nodeView.onRunWorkflow', telemetryPayload);
 				});
 
 				this.runWorkflow();
@@ -2042,6 +2050,9 @@ export default mixins(
 				this.$store.commit('setStateDirty', false);
 
 				this.setZoomLevel(1);
+
+				if (window.featureFlag && !window.featureFlag.isEnabled('show-welcome-note')) return;
+
 				setTimeout(() => {
 					this.$store.commit('setNodeViewOffsetPosition', {newOffset: [0, 0]});
 					// For novice users (onboardingFlowEnabled == true)

packages/editor-ui/src/views/SettingsCommunityNodesView.vue

@@ -180,7 +180,9 @@ export default mixins(
 	},
 	methods: {
 		openInstallModal(event: MouseEvent) {
-			this.$telemetry.track('user clicked cnr install button', { is_empty_state: this.getInstalledPackages.length === 0 });
+			const telemetryPayload = { is_empty_state: this.getInstalledPackages.length === 0 };
+			this.$telemetry.track('user clicked cnr install button', telemetryPayload);
+			this.$externalHooks().run('settingsCommunityNodesView.openInstallModal', telemetryPayload);
 			this.$store.dispatch('ui/openModal', COMMUNITY_PACKAGE_INSTALL_MODAL_KEY);
 		},
 		onDescriptionTextClick(event: MouseEvent) {

packages/editor-ui/src/views/SettingsPersonalView.vue

@@ -3,7 +3,7 @@
 		<div :class="$style.container">
 			<div :class="$style.header">
 				<n8n-heading size="2xlarge">{{ $locale.baseText('settings.personal.personalSettings') }}</n8n-heading>
-				<div :class="$style.user">
+				<div :class="$style.user" ref="user">
 					<span :class="$style.username">
 						<n8n-text  color="text-light">{{currentUser.fullName}}</n8n-text>
 					</span>
@@ -14,14 +14,16 @@
 				<div :class="$style.sectionHeader">
 					<n8n-heading size="large">{{ $locale.baseText('settings.personal.basicInformation') }}</n8n-heading>
 				</div>
-				<n8n-form-inputs
-					v-if="formInputs"
-					:inputs="formInputs"
-					:eventBus="formBus"
-					@input="onInput"
-					@ready="onReadyToSubmit"
-					@submit="onSubmit"
-				/>
+				<div>
+					<n8n-form-inputs
+						v-if="formInputs"
+						:inputs="formInputs"
+						:eventBus="formBus"
+						@input="onInput"
+						@ready="onReadyToSubmit"
+						@submit="onSubmit"
+					/>
+				</div>
 			</div>
 			<div>
 				<div :class="$style.sectionHeader">
@@ -101,6 +103,10 @@ export default mixins(
 				},
 			},
 		];
+
+		if (this.$refs.user) {
+			this.$externalHooks().run('settingsPersonalView.mounted', { userRef: this.$refs.user });
+		}
 	},
 	computed: {
 		currentUser() {

packages/editor-ui/src/views/TemplatesCollectionView.vue

@@ -106,11 +106,13 @@ export default mixins(workflowHelpers).extend({
 			this.navigateTo(event, VIEWS.TEMPLATE, id);
 		},
 		onUseWorkflow({event, id}: {event: MouseEvent, id: string}) {
-			this.$telemetry.track('User inserted workflow template', {
+			const telemetryPayload = {
 				template_id: id,
 				wf_template_repo_session_id: this.$store.getters['templates/currentSessionId'],
 				source: 'collection',
-			});
+			};
+			this.$externalHooks().run('templatesCollectionView.onUseWorkflow', telemetryPayload);
+			this.$telemetry.track('User inserted workflow template', telemetryPayload);
 
 			this.navigateTo(event, VIEWS.TEMPLATE_IMPORT, id);
 		},

packages/editor-ui/src/views/TemplatesWorkflowView.vue

@@ -89,11 +89,14 @@ export default mixins(workflowHelpers).extend({
 	},
 	methods: {
 		openWorkflow(id: string, e: PointerEvent) {
-			this.$telemetry.track('User inserted workflow template', {
+			const telemetryPayload = {
 				source: 'workflow',
 				template_id: id,
 				wf_template_repo_session_id: this.$store.getters['templates/currentSessionId'],
-			});
+			};
+
+			this.$externalHooks().run('templatesWorkflowView.openWorkflow', telemetryPayload);
+			this.$telemetry.track('User inserted workflow template', telemetryPayload);
 
 			if (e.metaKey || e.ctrlKey) {
 				const route = this.$router.resolve({ name: VIEWS.TEMPLATE_IMPORT, params: { id } });