chore(editor): Add telemetry for canvas experiment #18871

autologie · 2025-08-27T15:06:16Z

Summary

This PR implements telemetry events for the focus panel with canvas experiment. To try out the branch, paste featureFlags.override('ndv_in_focus_panel', 'variant'); in the browser's console.

Related Linear tickets, Github issues, and Community forum posts

https://linear.app/n8n/issue/SUG-120/feature-telemetry-for-focus-panel

Review / Merge checklist

PR title and summary are descriptive. (conventions)
Docs updated or follow-up ticket created.
Tests included.
PR Labeled with release/backport (if the PR is an urgent fix that needs to be backported)

bundlemon · 2025-08-27T15:12:10Z

BundleMon

Unchanged files (2)

Status	Path	Size	Limits
✅	WASM Dependencies _{tree-sitter-bash.wasm}	181.26KB	-
✅	WASM Dependencies _{tree-sitter.wasm}	74.47KB	-

No change in files bundle size

Groups updated (2)

Status	Path	Size	Limits
✅	*/.js	5.72MB (+360.06KB +6.55%)	-
✅	*/.css	195.09KB (+3.84KB +2.01%)	-

Final result: ✅

View report in BundleMon website ➡️

Current branch size history | Target branch size history

codecov · 2025-08-28T11:58:08Z

Codecov Report

❌ Patch coverage is 64.05229% with 55 lines in your changes missing coverage. Please review.

Files with missing lines	Patch %	Lines
...ontend/editor-ui/src/components/ParameterInput.vue	0.00%	12 Missing ⚠️
...d/editor-ui/src/composables/useCanvasOperations.ts	69.69%	10 Missing ⚠️
...end/editor-ui/src/components/Node/NodeCreation.vue	0.00%	7 Missing ⚠️
packages/frontend/editor-ui/src/App.vue	0.00%	4 Missing ⚠️
...ntend/editor-ui/src/components/NodeDetailsView.vue	40.00%	3 Missing ⚠️
...end/editor-ui/src/components/NodeDetailsViewV2.vue	40.00%	3 Missing ⚠️
.../frontend/editor-ui/src/stores/focusPanel.store.ts	50.00%	3 Missing ⚠️
...ackages/frontend/editor-ui/src/stores/ndv.store.ts	75.00%	3 Missing ⚠️
...frontend/editor-ui/src/stores/nodeCreator.store.ts	0.00%	3 Missing ⚠️
...sLogStreaming/EventDestinationSettingsModal.ee.vue	0.00%	2 Missing ⚠️
... and 5 more

📢 Thoughts on this report? Let us know!

autologie · 2025-08-28T12:11:04Z

@claude please review changes

claude · 2025-08-28T12:11:17Z

Claude finished @autologie's task —— View job

Code Review Completed ✅

I've reviewed the telemetry implementation for the canvas experiment. Here's my comprehensive feedback:

✅ Strengths

1. Well-designed telemetry context system

useTelemetryContext composable provides clean Vue 3 composition pattern using inject/provide
Smart hierarchical context merging allows child components to override parent context
Type-safe with proper TypeScript definitions in /src/types/telemetry.ts
Good test coverage with comprehensive scenarios

2. Strategic telemetry placement

Correctly identifies the three key views: ndv, focus_panel, zoomed_view
Applied at appropriate component boundaries:
- NodeDetailsView.vue:42 - Standard NDV
- FocusPanel.vue:71 - Focus panel view
- ExperimentalEmbeddedNodeDetails.vue:32 - Zoomed canvas view

3. Consistent integration patterns

Uses same TelemetryNdvSource enum for tracking navigation sources
Extends existing focusPanelStore with telemetry-formatted data
Builds on existing telemetry infrastructure without disruption

🔍 Areas for Improvement

1. Test coverage concerns (Codecov: 65.58%)

Missing coverage in key files:
- ParameterInput.vue - 14 untested lines with new telemetry calls
- useCanvasOperations.ts - 10 untested lines around tracking logic
- Multiple Vue components with new telemetry integration

2. Potential performance considerations

useTelemetryContext() is called in component setup but context might be recreated on each component mount
Consider memoizing context creation for frequently mounted components

3. Type safety edge cases

// In focusPanel.store.ts:174-182
focusedNodeParametersInTelemetryFormat: computed<
  Array<{ parameterPath: string; nodeType: string; nodeId: string }>
>(() =>
  focusedNodeParameters.value.map((x) => ({
    // nodeType could be 'unresolved' - consider a more specific union type
    nodeType: isRichParameter(x) ? x.node.type : 'unresolved',

4. Minor consistency issues

Some telemetry calls use view_shown context while others use direct source parameters
Mix of direct telemetry tracking and context-based tracking could be standardized

🎯 Recommendations

Add tests for telemetry integration - Focus on the files flagged by Codecov, especially ParameterInput.vue and useCanvasOperations.ts
Consider context caching - For components that mount/unmount frequently, cache telemetry context to avoid overhead
Refine type definitions - Make nodeType: 'unresolved' a proper union type member rather than a fallback string
Documentation - Add JSDoc comments to key telemetry functions explaining the experimental context

📦 Bundle Impact Assessment

The +359KB JS increase seems reasonable for comprehensive telemetry instrumentation across 36 files. The size impact is acceptable for the observability value gained.

✅ Overall Assessment

This is a well-architected telemetry implementation that follows Vue 3 best practices and integrates cleanly with the existing codebase. The main concern is test coverage, but the core design and implementation quality are solid. The telemetry will provide valuable insights into how users interact with the different canvas experiment views.

Recommendation: Approve with minor improvements - Address test coverage and consider the performance optimizations mentioned above.

autologie · 2025-08-28T10:35:46Z

packages/frontend/editor-ui/src/components/Node/NodeCreation.vue

Just so to make it easier to find where telemetry is sent in the codebase by grep

autologie · 2025-08-28T10:40:35Z

packages/frontend/editor-ui/src/composables/useCanvasOperations.ts

+					? undefined
+					: experimentalNdvStore.isNdvInFocusPanelEnabled &&
+							focusPanelStore.focusPanelActive &&
+							focusPanelStore.resolvedParameter === undefined


Here I'm also tweaking the condition itself to account for the case where the parameter is not enriched

cubic-dev-ai

2 issues found across 36 files

_{React with 👍 or 👎 to teach cubic. You can also tag @cubic-dev-ai to give feedback, ask questions, or re-run the review.}

packages/frontend/editor-ui/src/stores/ndv.store.ts

.../frontend/editor-ui/src/components/SettingsLogStreaming/EventDestinationSettingsModal.ee.vue

alexgrozav

I like the idea! It makes our telemetry usage cleaner. I'd love to see this composable used in other places too.

alexgrozav · 2025-08-29T09:08:56Z

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

+	| 'other';
+
+export interface TelemetryContext {
+	view_shown: TelemetryNdvType;


I would like this composable to be as reusable as possible, not scoped to the ndv. The naming view_shown kind of suggests that you indicate what route you're on.

Can we rename it to something like { view_shown: 'ndv', ndv_source: TelemetryNdvType } or just { ndv_source: TelemetryNdvType } instead?

Interesting idea, I updated like e292ec1, what do you think? Note that we still need lastSetActiveNodeSource in NDV store because useTelemetryContext is essentially just an inject/provide.

alexgrozav

Looking great! Thank you for addressing the feedback!

currents-bot · 2025-08-29T10:20:23Z

✅

E2E Tests: n8n tests passed after 5m 32.4s

🟢 549 · 🔴 0 · ⚪️ 0

View Run Details

Run Details

Project: n8n
Groups: 2
Framework: Playwright
Run Status: Passed
Commit: f549145
Spec files: 111
Overall tests: 549
Duration: 5m 32.4s
Parallelization: 3

Groups

GroupId	Results	Spec Files Progress
ui	🟢 140 · 🔴 0 · ⚪️ 0	32 / 32
No name	🟢 409 · 🔴 0 · ⚪️ 0	79 / 79

This message was posted automatically by currents.dev | Integration Settings

chore: add new telemetry parameters

6ebcd27

autologie changed the title ~~chore(editor): Add new telemetry parameters~~ chore(editor): Add telemetry for canvas experiment Aug 27, 2025

refactor: use method consistently for setting active node name

c24ea9f

n8n-assistant bot added the n8n team Authored by the n8n team label Aug 27, 2025

autologie added 3 commits August 28, 2025 12:31

add more telemetry events

8a673dc

fix tests

f520de6

add tests fot useTelemetryContext

97d6bde

autologie commented Aug 28, 2025

View reviewed changes

autologie marked this pull request as ready for review August 28, 2025 12:43

cubic-dev-ai bot reviewed Aug 28, 2025

View reviewed changes

packages/frontend/editor-ui/src/stores/ndv.store.ts Show resolved Hide resolved

.../frontend/editor-ui/src/components/SettingsLogStreaming/EventDestinationSettingsModal.ee.vue Show resolved Hide resolved

autologie requested a review from alexgrozav August 29, 2025 08:03

alexgrozav requested changes Aug 29, 2025

View reviewed changes

refactor: include ndv_source in TelemetryContext

e292ec1

autologie force-pushed the sug-120-canvas-experiment-telemetry branch from 8a71789 to e292ec1 Compare August 29, 2025 09:47

autologie requested a review from alexgrozav August 29, 2025 09:53

alexgrozav previously approved these changes Aug 29, 2025

View reviewed changes

fix: make ndv_source computed

f549145

autologie dismissed alexgrozav’s stale review via f549145 August 29, 2025 10:25

autologie requested a review from alexgrozav August 29, 2025 10:27

alexgrozav approved these changes Aug 29, 2025

View reviewed changes

autologie merged commit de87f67 into master Aug 29, 2025
34 checks passed

autologie deleted the sug-120-canvas-experiment-telemetry branch August 29, 2025 10:56

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

chore(editor): Add telemetry for canvas experiment #18871

chore(editor): Add telemetry for canvas experiment #18871

autologie commented Aug 27, 2025 •

edited

Loading

Uh oh!

bundlemon bot commented Aug 27, 2025 •

edited

Loading

Uh oh!

codecov bot commented Aug 28, 2025 •

edited

Loading

Uh oh!

autologie commented Aug 28, 2025

Uh oh!

claude bot commented Aug 28, 2025 •

edited

Loading

Uh oh!

autologie Aug 28, 2025

Uh oh!

autologie Aug 28, 2025

Uh oh!

cubic-dev-ai bot left a comment

Uh oh!

Uh oh!

Uh oh!

alexgrozav left a comment

Uh oh!

alexgrozav Aug 29, 2025 •

edited

Loading

Uh oh!

autologie Aug 29, 2025

Uh oh!

alexgrozav left a comment

Uh oh!

currents-bot bot commented Aug 29, 2025 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

chore(editor): Add telemetry for canvas experiment #18871

chore(editor): Add telemetry for canvas experiment #18871

Conversation

autologie commented Aug 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Related Linear tickets, Github issues, and Community forum posts

Review / Merge checklist

Uh oh!

bundlemon bot commented Aug 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

BundleMon

Uh oh!

codecov bot commented Aug 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

autologie commented Aug 28, 2025

Uh oh!

claude bot commented Aug 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Review Completed ✅

✅ Strengths

🔍 Areas for Improvement

🎯 Recommendations

📦 Bundle Impact Assessment

✅ Overall Assessment

Uh oh!

autologie Aug 28, 2025

Choose a reason for hiding this comment

Uh oh!

autologie Aug 28, 2025

Choose a reason for hiding this comment

Uh oh!

cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

alexgrozav left a comment

Choose a reason for hiding this comment

Uh oh!

alexgrozav Aug 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

autologie Aug 29, 2025

Choose a reason for hiding this comment

Uh oh!

alexgrozav left a comment

Choose a reason for hiding this comment

Uh oh!

currents-bot bot commented Aug 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

autologie commented Aug 27, 2025 •

edited

Loading

bundlemon bot commented Aug 27, 2025 •

edited

Loading

codecov bot commented Aug 28, 2025 •

edited

Loading

claude bot commented Aug 28, 2025 •

edited

Loading

alexgrozav Aug 29, 2025 •

edited

Loading

currents-bot bot commented Aug 29, 2025 •

edited

Loading