fix: add visual-editing telemetry (#2263)

* chore(dnd-telemetry): wip

* chore(dnd-telemetry): add sendVisualEditingTelemetry

* chore(dnd-telemetry): throw error if unknown event is passed

* chore(dnd-telemetry): rename sendVisualEditingTelemetry > sendTelemetry, update event name

* chore(dnd-telemetry): fix linter issues - node env turbo definition, no console

* chore(dnd-telemetry): remove telemetry vars from studio turbo config

* chore(dnd-telemetry): add debug env variable to studio turbo.json

* chore(dnd-telemetry): wip

* chore(dnd-telemetry): remove custom debug vars, rely on new studio implementation

* chore(dnd-telemetry): remove unused env vars

* chore(dnd-telemetry): update sequence end event to be completed

apps/studio/.env.local

@@ -12,6 +12,8 @@ SANITY_STUDIO_PAGE_BUILDER_DEMO_PREVIEW_URL=""
 SANITY_STUDIO_REMIX_PREVIEW_URL=""
 SANITY_STUDIO_SVELTE_PREVIEW_URL=""
 
+SANITY_STUDIO_DEBUG_TELEMETRY=true
+
 # If these are not specified, and a Linear branch URL not used, then the Studio will connect to production deployment with the values below are used:
 # SANITY_STUDIO_ASTRO_PREVIEW_URL="https://visual-editing-astro-git-preview.sanity.dev/shoes"
 # SANITY_STUDIO_LIVE_NEXT_PREVIEW_URL="https://live-visual-editing-next.sanity.dev/"

apps/studio/turbo.json

@@ -16,7 +16,8 @@
         "SANITY_STUDIO_SVELTE_PREVIEW_URL",
         "SANITY_STUDIO_VERCEL_BRANCH_URL",
         "SANITY_STUDIO_VERCEL_ENV",
-        "SANITY_STUDIO_PRESENTATION_ENABLE_LIVE_DRAFT_EVENTS"
+        "SANITY_STUDIO_PRESENTATION_ENABLE_LIVE_DRAFT_EVENTS",
+        "SANITY_STUDIO_DEBUG_TELEMETRY"
       ],
       "outputs": [".sanity/**", "dist/**"]
     },
@@ -32,7 +33,8 @@
         "SANITY_STUDIO_REMIX_PREVIEW_URL",
         "SANITY_STUDIO_STEGA_DEBUG",
         "SANITY_STUDIO_SVELTE_PREVIEW_URL",
-        "SANITY_STUDIO_PRESENTATION_ENABLE_LIVE_DRAFT_EVENTS"
+        "SANITY_STUDIO_PRESENTATION_ENABLE_LIVE_DRAFT_EVENTS",
+        "SANITY_STUDIO_DEBUG_TELEMETRY"
       ]
     }
   }

packages/presentation/src/PostMessageTelemetry.tsx

@@ -0,0 +1,25 @@
+import {useTelemetry} from '@sanity/telemetry/react'
+import {memo, useEffect, type FC} from 'react'
+import type {VisualEditingConnection} from './types'
+
+export interface PostMessageTelemetryProps {
+  comlink: VisualEditingConnection
+}
+
+const PostMessageTelemetry: FC<PostMessageTelemetryProps> = (props) => {
+  const {comlink} = props
+
+  const telemetry = useTelemetry()
+
+  useEffect(() => {
+    return comlink.on('visual-editing/telemetry-log', async (message) => {
+      const {event, data} = message
+
+      // SANITY_STUDIO_DEBUG_TELEMETRY ensures noop/in-browser logging for telemetry events
+      data ? telemetry.log(event, data) : telemetry.log(event)
+    })
+  }, [comlink, telemetry])
+
+  return null
+}
+export default memo(PostMessageTelemetry)

packages/presentation/src/PresentationTool.tsx

@@ -79,6 +79,7 @@ const PostMessageRefreshMutations = lazy(() => import('./editor/PostMessageRefre
 const PostMessagePerspective = lazy(() => import('./PostMessagePerspective'))
 const PostMessagePreviewSnapshots = lazy(() => import('./editor/PostMessagePreviewSnapshots'))
 const PostMessageSchema = lazy(() => import('./overlays/schema/PostMessageSchema'))
+const PostMessageTelemetry = lazy(() => import('./PostMessageTelemetry'))
 
 const Container = styled(Flex)`
   overflow-x: auto;
@@ -605,6 +606,7 @@ export default function PresentationTool(props: {
         {visualEditingComlink && (
           <PostMessagePerspective comlink={visualEditingComlink} perspective={perspective} />
         )}
+        {visualEditingComlink && <PostMessageTelemetry comlink={visualEditingComlink} />}
         {params.id && params.type && (
           <RevisionSwitcher
             documentId={params.id}

packages/visual-editing-helpers/src/types/comlink.ts

@@ -272,6 +272,15 @@ export type VisualEditingNodeMsg =
         state: SerializableObject
       }
     }
+  | {
+      type: 'visual-editing/telemetry-log'
+      data: {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        event: any
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        data: any
+      }
+    }
 
 /**
  * @public

packages/visual-editing/src/ui/Overlays.tsx

@@ -40,6 +40,7 @@ import {overlayStateReducer} from './overlayStateReducer'
 import {PreviewSnapshotsProvider} from './preview/PreviewSnapshotsProvider'
 import {SchemaProvider} from './schema/SchemaProvider'
 import {SharedStateProvider} from './shared-state/SharedStateProvider.tsx'
+import {sendTelemetry} from './telemetry/sendTelemetry.ts'
 import {useController} from './useController'
 import {usePerspectiveSync} from './usePerspectiveSync'
 import {useReportDocuments} from './useReportDocuments'
@@ -128,7 +129,12 @@ const OverlaysController: FunctionComponent<{
         comlink?.post('visual-editing/toggle', {enabled: false})
       } else if (message.type === 'overlay/dragEnd') {
         const {insertPosition, target, dragGroup, flow, preventInsertDefault} = message
+
         dispatchDragEndEvent({insertPosition, target, dragGroup, flow, preventInsertDefault})
+
+        if (insertPosition) {
+          sendTelemetry('Visual Editing Drag Sequence Completed', null, comlink)
+        }
       } else if (message.type === 'overlay/dragUpdateCursorPosition') {
         onDrag(message.x, message.y)
 

packages/visual-editing/src/ui/telemetry/sendTelemetry.ts

@@ -0,0 +1,34 @@
+import {defineEvent} from '@sanity/telemetry'
+import type {VisualEditingNode} from '../../types'
+
+const events = {
+  'Visual Editing Drag Sequence Completed': defineEvent({
+    name: 'Visual Editing Drag Sequence Completed',
+    description: 'An array is successfully reordered using drag and drop.',
+    version: 1,
+  }),
+}
+
+type EventDataMap = {
+  [K in keyof typeof events]: (typeof events)[K] extends ReturnType<typeof defineEvent<infer T>>
+    ? T
+    : never
+}
+
+function sendTelemetry<K extends keyof typeof events>(
+  name: K,
+  data: EventDataMap[K] extends void ? null | undefined : EventDataMap[K],
+  comlink: VisualEditingNode | undefined,
+): void {
+  if (!comlink) return
+
+  const event = events[name]
+
+  if (!event) {
+    throw new Error(`Telemetry event: ${name} does not exist`)
+  } else {
+    comlink.post('visual-editing/telemetry-log', {event, data})
+  }
+}
+
+export {sendTelemetry}