✨ add UNSTABLE_useVueComponentTracker composable

Author: mormubis

packages/rum-vue/src/domain/performance/addDurationVital.ts

@@ -0,0 +1,8 @@
+import type { RumPublicApi } from '@datadog/browser-rum-core'
+import { onRumInit } from '../vuePlugin'
+
+export const addDurationVital: RumPublicApi['addDurationVital'] = (name, options) => {
+  onRumInit((_, rumPublicApi) => {
+    rumPublicApi.addDurationVital(name, options)
+  })
+}

packages/rum-vue/src/domain/performance/useVueComponentTracker.spec.ts

@@ -0,0 +1,65 @@
+import { defineComponent, h } from 'vue'
+import { mount } from '@vue/test-utils'
+import { initializeVuePlugin } from '../../../test/initializeVuePlugin'
+import { mockClock } from '../../../../core/test'
+// eslint-disable-next-line camelcase
+import { UNSTABLE_useVueComponentTracker } from './useVueComponentTracker'
+
+const MOUNT_DURATION = 50
+
+describe('UNSTABLE_useVueComponentTracker', () => {
+  it('reports a vueComponentRender vital on mount', async () => {
+    const addDurationVitalSpy = jasmine.createSpy()
+    const clock = mockClock()
+    initializeVuePlugin({ publicApi: { addDurationVital: addDurationVitalSpy } })
+
+    const TrackedComponent = defineComponent({
+      setup() {
+        UNSTABLE_useVueComponentTracker('MyComponent')
+      },
+      render() {
+        clock.tick(MOUNT_DURATION)
+        return h('div')
+      },
+    })
+
+    // eslint-disable-next-line @typescript-eslint/await-thenable
+    await mount(TrackedComponent)
+
+    expect(addDurationVitalSpy).toHaveBeenCalledTimes(1)
+    const [name, options] = addDurationVitalSpy.calls.mostRecent().args
+    expect(name).toBe('vueComponentRender')
+    expect(options).toEqual({
+      description: 'MyComponent',
+      startTime: clock.timeStamp(0),
+      duration: MOUNT_DURATION,
+      context: {
+        is_first_render: true,
+        framework: 'vue',
+      },
+    })
+  })
+
+  it('reports is_first_render: false on update', async () => {
+    const addDurationVitalSpy = jasmine.createSpy()
+    initializeVuePlugin({ publicApi: { addDurationVital: addDurationVitalSpy } })
+
+    const TrackedComponent = defineComponent({
+      props: ['count'],
+      setup() {
+        UNSTABLE_useVueComponentTracker('MyComponent')
+      },
+      render() {
+        return h('div', this.count)
+      },
+    })
+
+    // eslint-disable-next-line @typescript-eslint/await-thenable
+    const wrapper = await mount(TrackedComponent, { props: { count: 0 } })
+    await wrapper.setProps({ count: 1 })
+
+    expect(addDurationVitalSpy).toHaveBeenCalledTimes(2)
+    const options = addDurationVitalSpy.calls.mostRecent().args[1]
+    expect(options.context.is_first_render).toBe(false)
+  })
+})

packages/rum-vue/src/domain/performance/useVueComponentTracker.ts

@@ -0,0 +1,62 @@
+import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated } from 'vue'
+import { clocksNow } from '@datadog/browser-core'
+import { addDurationVital } from './addDurationVital'
+
+/**
+ * Track the performance of a Vue component.
+ *
+ * @category Performance
+ * @experimental
+ * @example
+ * ```ts
+ * import { UNSTABLE_useVueComponentTracker } from '@datadog/browser-rum-vue'
+ *
+ * // Inside a component's setup():
+ * UNSTABLE_useVueComponentTracker('MyComponent')
+ * ```
+ */
+// eslint-disable-next-line camelcase
+export function UNSTABLE_useVueComponentTracker(name: string): void {
+  let mountStartClocks: ReturnType<typeof clocksNow> | undefined
+  let updateStartClocks: ReturnType<typeof clocksNow> | undefined
+
+  onBeforeMount(() => {
+    mountStartClocks = clocksNow()
+  })
+
+  onMounted(() => {
+    if (!mountStartClocks) {
+      return
+    }
+    const duration = clocksNow().relative - mountStartClocks.relative
+    addDurationVital('vueComponentRender', {
+      description: name,
+      startTime: mountStartClocks.timeStamp,
+      duration,
+      context: {
+        is_first_render: true,
+        framework: 'vue',
+      },
+    })
+  })
+
+  onBeforeUpdate(() => {
+    updateStartClocks = clocksNow()
+  })
+
+  onUpdated(() => {
+    if (!updateStartClocks) {
+      return
+    }
+    const duration = clocksNow().relative - updateStartClocks.relative
+    addDurationVital('vueComponentRender', {
+      description: name,
+      startTime: updateStartClocks.timeStamp,
+      duration,
+      context: {
+        is_first_render: false,
+        framework: 'vue',
+      },
+    })
+  })
+}

packages/rum-vue/src/entries/main.ts

@@ -1,3 +1,5 @@
 export type { VuePluginConfiguration, VuePlugin } from '../domain/vuePlugin'
 export { vuePlugin } from '../domain/vuePlugin'
 export { addVueError } from '../domain/error/addVueError'
+// eslint-disable-next-line camelcase
+export { UNSTABLE_useVueComponentTracker } from '../domain/performance/useVueComponentTracker'