|
| 1 | +# RUM Browser Monitoring - Nuxt integration |
| 2 | + |
| 3 | +## Overview |
| 4 | + |
| 5 | +The Datadog RUM Nuxt integration provides framework-specific instrumentation to help you monitor and debug Nuxt applications. This integration adds: |
| 6 | + |
| 7 | +- **Automatic route change detection** for Nuxt file-based routing |
| 8 | +- **View name normalization** that converts dynamic route segments into parameterized names (for example, `/user/123` becomes `/user/[id]`) |
| 9 | +- **Error reporting** through both Vue's global error handler and Nuxt's `app:error` hook |
| 10 | +- **Full-stack visibility** by correlating frontend performance with backend traces and logs |
| 11 | + |
| 12 | +Combined with Datadog RUM's core capabilities, you can debug performance bottlenecks, track user journeys, monitor Core Web Vitals, and analyze every user session with context. |
| 13 | + |
| 14 | +## Prerequisites |
| 15 | + |
| 16 | +This integration requires Nuxt v3 or v4, Vue v3.5+, and Vue Router v4+. |
| 17 | + |
| 18 | +## Setup |
| 19 | + |
| 20 | +Start by setting up [Datadog RUM][1] in your Nuxt application. |
| 21 | + |
| 22 | +After setting up RUM, add the [RUM-Nuxt plugin][2] to the Browser SDK. |
| 23 | + |
| 24 | +## Basic usage |
| 25 | + |
| 26 | +Create a client-side Nuxt plugin such as `plugins/datadog-rum.client.ts` and initialize the Datadog RUM SDK with `nuxtRumPlugin`: |
| 27 | + |
| 28 | +```ts |
| 29 | +import { datadogRum } from '@datadog/browser-rum' |
| 30 | +import { nuxtRumPlugin } from '@datadog/browser-rum-nuxt' |
| 31 | +import { defineNuxtPlugin, useNuxtApp, useRouter } from 'nuxt/app' |
| 32 | + |
| 33 | +export default defineNuxtPlugin({ |
| 34 | + name: 'datadog-rum', |
| 35 | + enforce: 'pre', |
| 36 | + setup() { |
| 37 | + datadogRum.init({ |
| 38 | + applicationId: '<APP_ID>', |
| 39 | + clientToken: '<CLIENT_TOKEN>', |
| 40 | + site: 'datadoghq.com', |
| 41 | + plugins: [ |
| 42 | + nuxtRumPlugin({ |
| 43 | + router: useRouter(), |
| 44 | + nuxtApp: useNuxtApp(), |
| 45 | + }), |
| 46 | + ], |
| 47 | + }) |
| 48 | + }, |
| 49 | +}) |
| 50 | +``` |
| 51 | + |
| 52 | +Using `enforce: 'pre'` lets the plugin capture startup errors reported through Nuxt's `app:error` hook before later plugins run. |
| 53 | + |
| 54 | +Passing `nuxtApp` is optional, but recommended. When provided, the integration automatically reports: |
| 55 | + |
| 56 | +- Vue component errors handled by `vueApp.config.errorHandler` |
| 57 | +- Nuxt startup errors reported through `app:error` |
| 58 | + |
| 59 | +## Manual error reporting |
| 60 | + |
| 61 | +If you catch a Nuxt or Vue error and want to report it to Datadog RUM, use `addNuxtError`: |
| 62 | + |
| 63 | +```vue |
| 64 | +<script setup lang="ts"> |
| 65 | +import { onErrorCaptured } from 'vue' |
| 66 | +import { addNuxtError } from '@datadog/browser-rum-nuxt' |
| 67 | +
|
| 68 | +onErrorCaptured((error, instance, info) => { |
| 69 | + addNuxtError(error, instance, info) |
| 70 | +}) |
| 71 | +</script> |
| 72 | +``` |
| 73 | + |
| 74 | +## Route tracking |
| 75 | + |
| 76 | +The `nuxtRumPlugin` automatically tracks route changes as RUM views and normalizes dynamic segments to Nuxt-style file route names: |
| 77 | + |
| 78 | +| Actual URL | View name | |
| 79 | +| --------------- | ------------------- | |
| 80 | +| `/about` | `/about` | |
| 81 | +| `/user/123` | `/user/[id]` | |
| 82 | +| `/blog/test` | `/blog/[[slug]]` | |
| 83 | +| `/guides/a/b/c` | `/guides/[...slug]` | |
| 84 | + |
| 85 | +Query string changes do not create a new view, but hash changes do. |
| 86 | + |
| 87 | +## Go further with Datadog Nuxt integration |
| 88 | + |
| 89 | +### Traces |
| 90 | + |
| 91 | +Connect your RUM and trace data to get a complete view of your application's performance. See [Connect RUM and Traces][3]. |
| 92 | + |
| 93 | +### Logs |
| 94 | + |
| 95 | +To forward your Nuxt application's logs to Datadog, see [JavaScript Logs Collection][4]. |
| 96 | + |
| 97 | +### Metrics |
| 98 | + |
| 99 | +To generate custom metrics from your RUM application, see [Generate Metrics][5]. |
| 100 | + |
| 101 | +## Troubleshooting |
| 102 | + |
| 103 | +Need help? Contact [Datadog Support][6]. |
| 104 | + |
| 105 | +[1]: https://docs.datadoghq.com/real_user_monitoring/application_monitoring/browser/setup/client/ |
| 106 | +[2]: https://www.npmjs.com/package/@datadog/browser-rum-nuxt |
| 107 | +[3]: https://docs.datadoghq.com/tracing/other_telemetry/rum/ |
| 108 | +[4]: https://docs.datadoghq.com/logs/log_collection/javascript/ |
| 109 | +[5]: https://docs.datadoghq.com/real_user_monitoring/platform/generate_metrics/ |
| 110 | +[6]: https://docs.datadoghq.com/help/ |
0 commit comments