✨ add Vue Router v4 integration

Author: mormubis

packages/rum-vue/src/domain/router/startVueRouterView.spec.ts

@@ -0,0 +1,50 @@
+import { display } from '@datadog/browser-core'
+import type { RouteLocationMatched } from 'vue-router'
+import { initializeVuePlugin } from '../../../test/initializeVuePlugin'
+import { startVueRouterView, computeViewName } from './startVueRouterView'
+
+describe('startVueRouterView', () => {
+  it('starts a new view with the computed view name', () => {
+    const startViewSpy = jasmine.createSpy()
+    initializeVuePlugin({
+      configuration: { router: true },
+      publicApi: { startView: startViewSpy },
+    })
+
+    startVueRouterView([{ path: '/' }, { path: 'user' }, { path: ':id' }] as unknown as RouteLocationMatched[])
+
+    expect(startViewSpy).toHaveBeenCalledOnceWith('/user/:id')
+  })
+
+  it('warns if router: true is missing from plugin config', () => {
+    const warnSpy = spyOn(display, 'warn')
+    initializeVuePlugin({ configuration: {} })
+    startVueRouterView([] as unknown as RouteLocationMatched[])
+    expect(warnSpy).toHaveBeenCalledOnceWith(
+      '`router: true` is missing from the vue plugin configuration, the view will not be tracked.'
+    )
+  })
+})
+
+describe('computeViewName', () => {
+  it('returns empty string for empty matched array', () => {
+    expect(computeViewName([])).toBe('')
+  })
+
+  it('returns the path for a simple route', () => {
+    expect(computeViewName([{ path: '/users' }] as unknown as RouteLocationMatched[])).toBe('/users')
+  })
+
+  it('returns the most specific matched path for nested routes', () => {
+    // Vue Router normalizes nested matched paths to absolute paths
+    expect(computeViewName([{ path: '/users' }, { path: '/users/:id' }] as unknown as RouteLocationMatched[])).toBe(
+      '/users/:id'
+    )
+  })
+
+  it('ignores records without a path', () => {
+    expect(
+      computeViewName([{ path: '/users' }, { path: '' }, { path: '/users/:id' }] as unknown as RouteLocationMatched[])
+    ).toBe('/users/:id')
+  })
+})

packages/rum-vue/src/domain/router/startVueRouterView.ts

@@ -0,0 +1,42 @@
+import { display } from '@datadog/browser-core'
+import type { RouteLocationMatched } from 'vue-router'
+import { onVueInit } from '../vuePlugin'
+
+export function startVueRouterView(matched: RouteLocationMatched[]) {
+  onVueInit((configuration, rumPublicApi) => {
+    if (!configuration.router) {
+      display.warn('`router: true` is missing from the vue plugin configuration, the view will not be tracked.')
+      return
+    }
+    rumPublicApi.startView(computeViewName(matched))
+  })
+}
+
+export function computeViewName(matched: RouteLocationMatched[]): string {
+  if (!matched || matched.length === 0) {
+    return ''
+  }
+
+  let viewName = '/'
+
+  for (const routeRecord of matched) {
+    const path = routeRecord.path
+    if (!path) {
+      continue
+    }
+
+    // Note: Vue Router normalizes all paths in the matched array to absolute paths,
+    // so the relative-path branch below is purely defensive and not expected to be
+    // hit in practice. It mirrors the React Router implementation for consistency.
+    if (path.startsWith('/')) {
+      viewName = path
+    } else {
+      if (!viewName.endsWith('/')) {
+        viewName += '/'
+      }
+      viewName += path
+    }
+  }
+
+  return viewName
+}

packages/rum-vue/src/domain/router/vueRouter.spec.ts

@@ -0,0 +1,68 @@
+import { createMemoryHistory } from 'vue-router'
+import { initializeVuePlugin } from '../../../test/initializeVuePlugin'
+import { createRouter } from './vueRouter'
+
+describe('createRouter (wrapped)', () => {
+  it('calls startView on navigation', (done) => {
+    const startViewSpy = jasmine.createSpy()
+    initializeVuePlugin({
+      configuration: { router: true },
+      publicApi: { startView: startViewSpy },
+    })
+
+    const router = createRouter({
+      history: createMemoryHistory(),
+      routes: [
+        { path: '/', component: {} },
+        { path: '/about', component: {} },
+      ],
+    })
+
+    router
+      .push('/')
+      .then(() => {
+        expect(startViewSpy).toHaveBeenCalledWith('/')
+        return router.push('/about')
+      })
+      .then(() => {
+        expect(startViewSpy).toHaveBeenCalledWith('/about')
+        done()
+      })
+      .catch(done.fail)
+  })
+
+  it('does not call startView when navigation is blocked', (done) => {
+    const startViewSpy = jasmine.createSpy()
+    initializeVuePlugin({
+      configuration: { router: true },
+      publicApi: { startView: startViewSpy },
+    })
+
+    const router = createRouter({
+      history: createMemoryHistory(),
+      routes: [
+        { path: '/', component: {} },
+        { path: '/protected', component: {} },
+      ],
+    })
+
+    // Block all navigations to /protected
+    router.beforeEach((to) => {
+      if (to.path === '/protected') {
+        return false
+      }
+    })
+
+    router
+      .push('/')
+      .then(() => {
+        startViewSpy.calls.reset()
+        return router.push('/protected')
+      })
+      .then(() => {
+        expect(startViewSpy).not.toHaveBeenCalled()
+        done()
+      })
+      .catch(done.fail)
+  })
+})

packages/rum-vue/src/domain/router/vueRouter.ts

@@ -0,0 +1,18 @@
+import { createRouter as originalCreateRouter, isNavigationFailure, NavigationFailureType } from 'vue-router'
+import type { RouterOptions, Router } from 'vue-router'
+import { startVueRouterView } from './startVueRouterView'
+
+export function createRouter(options: RouterOptions): Router {
+  const router = originalCreateRouter(options)
+
+  // afterEach fires for the initial navigation when the app is mounted via app.use(router).
+  // In tests without mounting, an explicit router.push() is needed to trigger the hook.
+  router.afterEach((to, _from, failure) => {
+    if (failure && !isNavigationFailure(failure, NavigationFailureType.duplicated)) {
+      return
+    }
+    startVueRouterView(to.matched)
+  })
+
+  return router
+}

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

@@ -1 +1 @@
-export {}
+export { createRouter } from '../domain/router/vueRouter'