DataDog · BeltranBulbarellaDD · Mar 6, 2026 · Mar 6, 2026 · Mar 6, 2026 · Mar 10, 2026
@@ -15,6 +15,7 @@ docs/
 /developer-extension/.wxt
 .env*
 !.env.example
+.rum-ai-toolkit/
 
 # https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored
 .pnp.*

@@ -1,5 +1,5 @@
 variables:
-  CURRENT_STAGING: staging-10
+  CURRENT_STAGING: staging-11
   APP: 'browser-sdk'
   CURRENT_CI_IMAGE: 101
   BUILD_STABLE_REGISTRY: 'registry.ddbuild.io'

@@ -6,7 +6,7 @@ rum-events-format
 .yarn
 test/**/dist
 test/**/.next
-test/apps/nextjs-app-router/next-env.d.ts
+test/apps/nextjs/next-env.d.ts
 yarn.lock
 /docs
 /developer-extension/.output

@@ -13,6 +13,7 @@ prod,react-dom,MIT,Copyright (c) Facebook, Inc. and its affiliates.
 dev,typedoc,Apache-2.0,TypeStrong
 dev,@eslint/js,MIT,Copyright OpenJS Foundation and other contributors, <www.openjsf.org>
 dev,@jsdevtools/coverage-istanbul-loader,MIT,Copyright (c) 2015 James Messinger
+dev,@module-federation/enhanced,MIT, Copyright (c) 2020 ScriptedAlchemy LLC (Zack Jackson) Zhou Shaw (zhouxiao)
 dev,@playwright/test,Apache-2.0,Copyright Microsoft Corporation
 dev,@swc/core,Apache-2.0,Copyright (c) SWC Contributors
 dev,@types/chrome,MIT,Copyright Microsoft Corporation

@@ -30,7 +30,8 @@ export default tseslint.config(
       'test/**/.next',
       'test/apps/react-heavy-spa',
       'test/apps/react-shopist-like',
-      'test/apps/nextjs-app-router',
+      'test/apps/microfrontend',
+      'test/apps/nextjs',
       'sandbox',
       'coverage',
       'rum-events-format',

@@ -9,7 +9,16 @@ import { computeStackTrace } from './computeStackTrace'
  * - No monitored function should encapsulate it, that is why we need to use callMonitored inside it.
  */
 export function createHandlingStack(
-  type: 'console error' | 'action' | 'error' | 'instrumented method' | 'log' | 'react error' | 'view' | 'vital'
+  type:
+    | 'console error'
+    | 'action'
+    | 'error'
+    | 'instrumented method'
+    | 'log'
+    | 'nextjs error'
+    | 'react error'
+    | 'view'
+    | 'vital'
 ): string {
   /**
    * Skip the two internal frames:

@@ -840,7 +840,8 @@ describe('rum public api', () => {
       rumPublicApi.stopResource('https://api.example.com/data', {
         type: ResourceType.XHR,
         statusCode: 200,
-        context: { responseSize: 1024 },
+        size: 1024,
+        context: { requestId: 'abc' },
       })
 
       expect(startResourceSpy).toHaveBeenCalledWith(
@@ -856,7 +857,8 @@ describe('rum public api', () => {
         jasmine.objectContaining({
           type: ResourceType.XHR,
           statusCode: 200,
-          context: { responseSize: 1024 },
+          size: 1024,
+          context: { requestId: 'abc' },
         })
       )
     })

@@ -749,6 +749,7 @@ export function makeRumPublicApi(
       strategy.stopResource(sanitize(url)!, {
         type: sanitize(options && options.type) as ResourceType | undefined,
         statusCode: options && options.statusCode,
+        size: options && options.size,
         context: sanitize(options && options.context) as Context,
         resourceKey: options && options.resourceKey,
       })

@@ -112,6 +112,26 @@ describe('trackManualResources', () => {
     })
   })
 
+  describe('size', () => {
+    it('should include size when provided at stop', () => {
+      startResource('https://api.example.com/data')
+      stopResource('https://api.example.com/data', { size: 1234 })
+
+      expect(rawRumEvents).toHaveSize(1)
+      const resourceEvent = rawRumEvents[0].rawRumEvent as RawRumResourceEvent
+      expect(resourceEvent.resource.size).toBe(1234)
+    })
+
+    it('should leave size undefined when not provided', () => {
+      startResource('https://api.example.com/data')
+      stopResource('https://api.example.com/data')
+
+      expect(rawRumEvents).toHaveSize(1)
+      const resourceEvent = rawRumEvents[0].rawRumEvent as RawRumResourceEvent
+      expect(resourceEvent.resource.size).toBeUndefined()
+    })
+  })
+
   describe('resourceKey', () => {
     it('should support resourceKey for tracking same url multiple times', () => {
       startResource('https://api.example.com/data', { resourceKey: 'request1' })

@@ -1,4 +1,4 @@
-import type { ClocksState, Context, ResourceType } from '@datadog/browser-core'
+import type { Context, ResourceType } from '@datadog/browser-core'
 import { clocksNow, elapsed, ResourceType as ResourceTypeEnum, toServerDuration } from '@datadog/browser-core'
 import type { RawRumResourceEvent } from '../../rawRumEvent.types'
 import { RumEventType } from '../../rawRumEvent.types'
@@ -42,6 +42,11 @@ export interface ResourceStopOptions {
    */
   statusCode?: number
 
+  /**
+   * Resource size in bytes
+   */
+  size?: number
+
   /**
    * Resource context
    */
@@ -61,38 +66,6 @@ export interface ManualResourceData {
 }
 
 export function trackManualResources(lifeCycle: LifeCycle, resourceTracker: EventTracker<ManualResourceData>) {
-  function emitResource(
-    id: string,
-    startClocks: ClocksState,
-    data: ManualResourceData,
-    statusCode?: number,
-    endClocks?: ClocksState
-  ) {
-    const duration = endClocks ? elapsed(startClocks.relative, endClocks.relative) : undefined
-
-    const rawRumEvent: RawRumResourceEvent = {
-      date: startClocks.timeStamp,
-      type: RumEventType.RESOURCE,
-      resource: {
-        id,
-        type: data.type || ResourceTypeEnum.OTHER,
-        url: sanitizeIfLongDataUrl(data.url),
-        duration: duration !== undefined ? toServerDuration(duration) : undefined,
-        method: data.method,
-        status_code: statusCode,
-      },
-      _dd: {},
-      context: data.context,
-    }
-
-    lifeCycle.notify(LifeCycleEventType.RAW_RUM_EVENT_COLLECTED, {
-      rawRumEvent,
-      startClocks,
-      duration,
-      domainContext: { isManual: true as const },
-    })
-  }
-
   function startManualResource(url: string, options: ResourceOptions = {}, startClocks = clocksNow()) {
     const lookupKey = options.resourceKey ?? url
 
@@ -114,7 +87,30 @@ export function trackManualResources(lifeCycle: LifeCycle, resourceTracker: Even
       return
     }
 
-    emitResource(stopped.id, stopped.startClocks, stopped, options.statusCode, stopClocks)
+    const duration = elapsed(stopped.startClocks.relative, stopClocks.relative)
+
+    const rawRumEvent: RawRumResourceEvent = {
+      date: stopped.startClocks.timeStamp,
+      type: RumEventType.RESOURCE,
+      resource: {
+        id: stopped.id,
+        type: stopped.type || ResourceTypeEnum.OTHER,
+        url: sanitizeIfLongDataUrl(stopped.url),
+        duration: toServerDuration(duration),
+        method: stopped.method,
+        status_code: options.statusCode,
+        size: options.size,
+      },
+      _dd: {},
+      context: stopped.context,
+    }
+
+    lifeCycle.notify(LifeCycleEventType.RAW_RUM_EVENT_COLLECTED, {
+      rawRumEvent,
+      startClocks: stopped.startClocks,
+      duration,
+      domainContext: { isManual: true },
+    })
   }
 
   return {

@@ -1,12 +1,12 @@
 # RUM Browser Monitoring - NEXTJS integration
 
-This package provides NextJS App Router integration for Datadog Browser RUM.
+This package provides NextJS integration for Datadog Browser RUM, supporting both the App Router and Pages Router.
 
-Requires Next.js v15.3+, which supports the [`instrumentation-client`][1] file convention.
+Both routers require **Next.js v15.3+**, which supports the [`instrumentation-client`][1] file convention.
 
 [1]: https://nextjs.org/docs/app/api-reference/file-conventions/instrumentation-client
 
-# Usage
+# App Router Usage
 
 ## 1. Create an `instrumentation-client.js` file in the root of your Next.js project
 
@@ -43,3 +43,90 @@ export default function RootLayout({ children }: { children: React.ReactNode })
   )
 }
 ```
+
+## 3. Report errors from error boundaries
+
+Next.js uses [error boundaries](https://nextjs.org/docs/app/api-reference/file-conventions/error) (`error.tsx` files) to catch uncaught exceptions in each route segment. Use `addNextjsError` inside these boundaries to report errors to Datadog RUM.
+
+For **Server Component** errors, Next.js sends a generic message to the client and attaches `error.digest` — a hash that links the client-side error to your server-side logs. For **Client Component** errors, `error.message` is the original message and `digest` is absent.
+
+```tsx
+// app/error.tsx (or app/dashboard/error.tsx, etc.)
+'use client'
+
+import { useEffect } from 'react'
+import { addNextjsError } from '@datadog/browser-rum-nextjs'
+
+export default function Error({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
+  useEffect(() => {
+    addNextjsError(error)
+  }, [error])
+
+  return <button onClick={reset}>Try again</button>
+}
+```
+
+For errors in the **root layout**, use `global-error.tsx` — it must provide its own `<html>` and `<body>` tags since the root layout is replaced:
+
+```tsx
+// app/global-error.tsx
+'use client'
+
+import { useEffect } from 'react'
+import { addNextjsError } from '@datadog/browser-rum-nextjs'
+
+export default function GlobalError({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
+  useEffect(() => {
+    addNextjsError(error)
+  }, [error])
+
+  return (
+    <html>
+      <body>
+        <button onClick={reset}>Try again</button>
+      </body>
+    </html>
+  )
+}
+```
+
+You can also pass custom context:
+
+```ts
+addNextjsError(error, { route: '/dashboard', userId: '123' })
+```
+
+# Pages Router Usage
+
+## 1. Create an `instrumentation-client.js` file in the root of your Next.js project
+
+Initialize the Datadog RUM SDK with the `nextjsPlugin`. The `onRouterTransitionStart` export is **not needed** for Pages Router.
+
+```js
+import { datadogRum } from '@datadog/browser-rum'
+import { nextjsPlugin } from '@datadog/browser-rum-nextjs'
+
+datadogRum.init({
+  applicationId: '<APP_ID>',
+  clientToken: '<CLIENT_TOKEN>',
+  site: 'datadoghq.com',
+  plugins: [nextjsPlugin()],
+})
+```
+
+## 2. Call the DatadogPagesRouter component from your custom App.
+
+```tsx
+// pages/_app.tsx
+import type { AppProps } from 'next/app'
+import { DatadogPagesRouter } from '@datadog/browser-rum-nextjs'
+
+export default function MyApp({ Component, pageProps }: AppProps) {
+  return (
+    <>
+      <DatadogPagesRouter />
+      <Component {...pageProps} />
+    </>
+  )
+}
+```
@@ -38,7 +38,7 @@
   },
   "devDependencies": {
     "@types/react": "19.2.11",
-    "next": "15.3.3",
+    "next": "15.5.10",
     "react": "19.2.4"
   }
 }