feat: add more telemetry events

Author: antfu

packages/devtools/client/components/AssetDetails.vue

@@ -244,7 +244,7 @@ async function renameAsset() {
                 title="Copy public path"
                 icon="carbon-copy"
                 :border="false"
-                @click="copy(asset.publicPath)"
+                @click="copy(asset.publicPath, 'assets-public-path')"
               />
               <NButton
                 v-tooltip="'Open in browser'"

packages/devtools/client/components/CodeSnippets.vue

@@ -4,6 +4,7 @@ import type { CodeSnippet } from '../../types'
 
 const props = defineProps<{
   codeSnippets: CodeSnippet[]
+  eventType?: string
 }>()
 
 const selected = shallowRef<CodeSnippet | undefined>(props.codeSnippets[0])
@@ -45,7 +46,7 @@ watchEffect(() => {
       <div flex="~ gap-2" px3 pb3 n="sm primary">
         <NButton
           icon="carbon-copy"
-          @click="copy(selected!.code)"
+          @click="copy(selected!.code, eventType || `code-snippet-${selected.name}`)"
         >
           Copy
         </NButton>

packages/devtools/client/components/ComponentDetails.vue

@@ -19,7 +19,10 @@ const copy = useCopy()
   <div flex="~ col gap1" items-start of-hidden>
     <div flex="~ gap2" px3>
       <ComponentName :component="component" />
-      <NButton title="Copy name" flex-none icon="carbon-copy" :border="false" @click="copy(`<${name}></${name}>`)" />
+      <NButton
+        title="Copy name" flex-none icon="carbon-copy" :border="false"
+        @click="copy(`<${name}></${name}>`, 'component-name')"
+      />
       <NBadge
         v-if="component.global"
         n="green"

packages/devtools/client/components/ComposableItem.vue

@@ -55,7 +55,7 @@ const docsUrl = computed(() => {
             :markdown="item.meta.description"
           />
           <div flex="~ gap2" n="primary xs">
-            <NButton icon="carbon-copy" @click="copy(name)">
+            <NButton icon="carbon-copy" @click="copy(name, 'imports-name')">
               Copy
             </NButton>
             <NButton v-if="filepath" icon="carbon-code" @click="filepath && openInEditor(filepath)">

packages/devtools/client/components/NpmVersionCheck.vue

@@ -32,6 +32,12 @@ async function updateWithConfirm() {
   const processId = await update(async (command) => {
     return PromiseConfirm.start(command)
   })
+
+  telemetry('npm:update', {
+    packageName: props.packageName,
+    oldVersion: info.value?.current,
+  })
+
   if (processId && shouldRestartServer.value) {
     restartDialogs.value.push({
       id: processId,

packages/devtools/client/components/OpenGraphMissingTabs.vue

@@ -108,7 +108,7 @@ const selectedTab = ref(tabs[0])
         <p flex="~ gap-1 wrap items-center">
           <NButton
             icon="carbon-copy" n="xs" px-2
-            @click="copy(codeSnippet)"
+            @click="copy(codeSnippet, 'open-graph-suggestion')"
           >
             Copy
           </NButton>
@@ -133,7 +133,7 @@ const selectedTab = ref(tabs[0])
           <div flex="~ gap-2" n="sm primary" absolute right-2 top-2>
             <NButton
               icon="carbon-copy"
-              @click="copy(codeSnippet)"
+              @click="copy(codeSnippet, 'open-graph-suggestion')"
             >
               Copy
             </NButton>

packages/devtools/client/components/PictureInPictureButton.vue

@@ -40,7 +40,7 @@ function popup() {
         <p>
           Your current browser does not seem to support the API, or the flag is not enabled yet.
           You can try enabling the flag by visiting
-          <NButton n="xs primary" title="Click to Copy" @click="copy('chrome://flags/#document-picture-in-picture-api')">
+          <NButton n="xs primary" title="Click to Copy" @click="copy('chrome://flags/#document-picture-in-picture-api', 'external-docs')">
             chrome://flags/#document-picture-in-picture-api
           </NButton>
           and restart the browser.

packages/devtools/client/components/ServerRouteDetails.vue

@@ -347,7 +347,7 @@ const copy = useCopy()
               n="xs blue"
               icon="carbon:copy"
               :border="false"
-              @click="copy(finalURL)"
+              @click="copy(finalURL, 'server-route-url')"
             />
             <NButton
               v-tooltip="'Open in Editor'"

packages/devtools/client/components/TimelineArgumentView.vue

@@ -82,7 +82,7 @@ const copy = useCopy()
             <NButton
               title="Copy to clipboard"
               icon="carbon-copy"
-              @click="copy(JSON.stringify(clone, null, 2))"
+              @click="copy(JSON.stringify(clone, null, 2), 'timeline-argument')"
             >
               Copy
             </NButton>

packages/devtools/client/composables/editor.ts

@@ -1,4 +1,5 @@
 import { useClipboard } from '@vueuse/core'
+import { telemetryEvent } from '../../src/server-rpc/telemetry'
 
 export function useOpenInEditor() {
   const config = useServerConfig()
@@ -30,9 +31,13 @@ export function useOpenInEditor() {
 export function useCopy() {
   const clipboard = useClipboard()
 
-  return (text: string) => {
+  return (text: string, type?: string) => {
     clipboard.copy(text)
 
+    telemetry('copy', {
+      copyType: type,
+    })
+
     devtoolsUiShowNotification({
       message: 'Copied to clipboard',
       icon: 'carbon-checkmark',