Capture Node-RED user actions in posthog

[knolleary]

Description

We currently don't have any event tracking in PostHog for things a user does inside Node-RED. That leaves us with a blind-spot in terms of understanding user behaviour.

The Funnel Gap

Our sign-up-to-value funnel (HubSpot → PostHog) tracks users through instance creation and state changes, but stops before they click "Open Editor". We can't answer critical questions:

• Do users actually open the editor after creating an instance?
• How long from sign-up to first editor access?
• Which editor type do they prefer (immersive vs standard)?
• Do they return to the editor after initial access?

Current tracking ends at: Instance created/started/restarted (instances.js)
Missing: Editor button clicks, editor sessions, time-to-editor

Proposed solution

Add PostHog events to complete the funnel:

1. Editor Access (EditorLink.vue)

• Event: $ff-editor-opened
• Properties: editor-type (immersive/standard), access-method (click/middle-click)
• Groups: instance, team

2. Device Editor Access (device/index.vue)

• Event: $ff-device-editor-opened
• Groups: device, instance, team

3. Editor Session Duration (EditorWrapper.vue)

• Track iframe load → unmount time
• Event: $ff-editor-session-ended
• Property: duration-seconds

4. First Editor Access (user property)

• Use audit logs to identify first-time opens
• Add to PostHog user properties

Potential solution details

What's Feasible

FlowFuse manages Node-RED instances through container drivers. Instances run separately:

• Standard editor: Opens Node-RED in new window (EditorLink.vue)
• Immersive editor: Embeds in iframe wrapper (EditorWrapper.vue, NR >= 4.0.2)

This issue: Track editor access and sessions from FlowFuse UI
Future work: In-editor actions (node creation, deploys) requires launcher instrumentation

Implementation Files

• /frontend/src/pages/instance/components/EditorLink.vue - Add editor opened event
• /frontend/src/pages/instance/Editor/components/EditorWrapper.vue - Track session duration
• /frontend/src/pages/device/index.vue - Track device editor access
• /frontend/src/services/product.js - Product analytics service (already integrated)

Success Metrics

• Complete funnel: sign-up → instance created → editor opened → [future: first deploy]
• Identify drop-off: instances created but editor never opened
• Measure time-to-editor-access from sign-up
• Track immersive vs standard editor adoption

Epic/Story

#3839
FlowFuse/product#3

[dimitrieh]

Updated the issue description.

@allthedoll can you review here? As this aligns with our understanding regarding sign up to value: https://github.com/FlowFuse/product/issues/3. This is a result from my discussion with Nick today.