browser-sdk/packages/rum-nextjs/src/domain/appRouter/datadogRumProvider.tsx at dedd2ceb6d85d8d87da4b1e4df7fc291ef467f39 · DataDog/browser-sdk · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
'use client'

import React, { useRef, useEffect } from 'react'
import { usePathname, useParams } from 'next/navigation'
import { computeViewNameFromParams } from '../computeViewNameFromParams'
import { startNextjsView } from '../startNextjsView'

/**
 * Tracks Next.js App Router views via `usePathname` and `useParams`.
 *
 * @example
 * ```tsx
 * // app/components/datadog-rum-provider.tsx
 * 'use client'
 *
 * import { datadogRum } from '@datadog/browser-rum'
 * import { nextjsPlugin } from '@datadog/browser-rum-nextjs'
 * import { DatadogRumProvider } from '@datadog/browser-rum-nextjs/app-router'
 *
 * datadogRum.init({
 *   applicationId: '<APP_ID>',
 *   clientToken: '<CLIENT_TOKEN>',
 *   plugins: [nextjsPlugin({ router: 'app' })],
 * })
 *
 * export default DatadogRumProvider
 * ```
 *
 * ```tsx
 * // app/layout.tsx
 * import DatadogRumProvider from './components/datadog-rum-provider'
 *
 * export default function RootLayout({ children }: { children: React.ReactNode }) {
 *   return (
 *     <html>
 *       <body>
 *         <DatadogRumProvider>{children}</DatadogRumProvider>
 *       </body>
 *     </html>
 *   )
 * }
 * ```
 */
export function DatadogRumProvider({ children }: { children: React.ReactNode }) {
  const pathname = usePathname()
  const params = useParams()
  const previousPathnameRef = useRef<string | null>(null)

  useEffect(() => {
    if (previousPathnameRef.current !== pathname) {
      previousPathnameRef.current = pathname
      const viewName = computeViewNameFromParams(pathname, params as Record<string, string | string[] | undefined>)
      startNextjsView(viewName)
    }
  }, [pathname, params])

  return <>{children}</>
}