diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index e854f9a935..3412e2a8b5 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -186,7 +186,8 @@ code-coverage.datadog.yml @DataDog/agent-integr /rum_expo/ @DataDog/rum-app @DataDog/rum-mobile /rum_flutter/ @DataDog/rum-app @DataDog/rum-mobile /rum_ios/ @DataDog/rum-app @DataDog/rum-mobile @DataDog/rum-mobile-ios -/rum_nextjs/ @DataDog/rum-app @DataDog/rum-browser +/rum_nextjs/ @DataDog/rum-app @DataDog/rum-browser +/rum_nuxt/ @DataDog/rum-app @DataDog/rum-browser /rum_react/ @DataDog/rum-app @DataDog/rum-browser /rum_react_native/ @DataDog/rum-app @DataDog/rum-mobile /rum_roku/ @DataDog/rum-app @DataDog/rum-mobile diff --git a/rum_nuxt/CHANGELOG.md b/rum_nuxt/CHANGELOG.md new file mode 100644 index 0000000000..ea81f15fe8 --- /dev/null +++ b/rum_nuxt/CHANGELOG.md @@ -0,0 +1,7 @@ +# CHANGELOG - Nuxt + +## 1.0.0 + +**Added**: + +* Initial Nuxt RUM Integration Tile. diff --git a/rum_nuxt/README.md b/rum_nuxt/README.md new file mode 100644 index 0000000000..29f18e1b4f --- /dev/null +++ b/rum_nuxt/README.md @@ -0,0 +1,110 @@ +# RUM Browser Monitoring - Nuxt integration + +## Overview + +The Datadog RUM Nuxt integration provides framework-specific instrumentation to help you monitor and debug Nuxt applications. This integration adds: + +- **Automatic route change detection** for Nuxt file-based routing +- **View name normalization** that converts dynamic route segments into parameterized names (for example, `/user/123` becomes `/user/[id]`) +- **Error reporting** through both Vue's global error handler and Nuxt's `app:error` hook +- **Full-stack visibility** by correlating frontend performance with backend traces and logs + +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. + +## Prerequisites + +This integration requires Nuxt v3 or v4, Vue v3.5+, and Vue Router v4+. + +## Setup + +Start by setting up [Datadog RUM][1] in your Nuxt application. + +After setting up RUM, add the [RUM-Nuxt plugin][2] to the Browser SDK. + +## Basic usage + +Create a client-side Nuxt plugin such as `plugins/datadog-rum.client.ts` and initialize the Datadog RUM SDK with `nuxtRumPlugin`: + +```ts +import { datadogRum } from '@datadog/browser-rum' +import { nuxtRumPlugin } from '@datadog/browser-rum-nuxt' +import { defineNuxtPlugin, useNuxtApp, useRouter } from 'nuxt/app' + +export default defineNuxtPlugin({ + name: 'datadog-rum', + enforce: 'pre', + setup() { + datadogRum.init({ + applicationId: '', + clientToken: '', + site: 'datadoghq.com', + plugins: [ + nuxtRumPlugin({ + router: useRouter(), + nuxtApp: useNuxtApp(), + }), + ], + }) + }, +}) +``` + +Using `enforce: 'pre'` lets the plugin capture startup errors reported through Nuxt's `app:error` hook before later plugins run. + +Passing `nuxtApp` is optional, but recommended. When provided, the integration automatically reports: + +- Vue component errors handled by `vueApp.config.errorHandler` +- Nuxt startup errors reported through `app:error` + +## Manual error reporting + +If you catch a Nuxt or Vue error and want to report it to Datadog RUM, use `addNuxtError`: + +```vue + +``` + +## Route tracking + +The `nuxtRumPlugin` automatically tracks route changes as RUM views and normalizes dynamic segments to Nuxt-style file route names: + +| Actual URL | View name | +| --------------- | ------------------- | +| `/about` | `/about` | +| `/user/123` | `/user/[id]` | +| `/blog/test` | `/blog/[[slug]]` | +| `/guides/a/b/c` | `/guides/[...slug]` | + +Query string changes do not create a new view, but hash changes do. + +## Go further with Datadog Nuxt integration + +### Traces + +Connect your RUM and trace data to get a complete view of your application's performance. See [Connect RUM and Traces][3]. + +### Logs + +To forward your Nuxt application's logs to Datadog, see [JavaScript Logs Collection][4]. + +### Metrics + +To generate custom metrics from your RUM application, see [Generate Metrics][5]. + +## Troubleshooting + +Need help? Contact [Datadog Support][6]. + +[1]: https://docs.datadoghq.com/real_user_monitoring/application_monitoring/browser/setup/client/ +[2]: https://www.npmjs.com/package/@datadog/browser-rum-nuxt +[3]: https://docs.datadoghq.com/tracing/other_telemetry/rum/ +[4]: https://docs.datadoghq.com/logs/log_collection/javascript/ +[5]: https://docs.datadoghq.com/real_user_monitoring/platform/generate_metrics/ +[6]: https://docs.datadoghq.com/help/ diff --git a/rum_nuxt/manifest.json b/rum_nuxt/manifest.json new file mode 100644 index 0000000000..1c6c7bca86 --- /dev/null +++ b/rum_nuxt/manifest.json @@ -0,0 +1,34 @@ +{ + "manifest_version": "2.0.0", + "app_uuid": "0bbcbba0-1ebc-423d-905f-4320f615fe15", + "app_id": "rum-nuxt-plugin", + "owner": "rum-browser", + "display_on_public_website": true, + "tile": { + "overview": "README.md#Overview", + "configuration": "README.md#Setup", + "support": "README.md#Troubleshooting", + "changelog": "CHANGELOG.md", + "description": "Monitor Nuxt applications with automatic route tracking and error reporting.", + "title": "Nuxt", + "media": [], + "classifier_tags": [ + "Category::Metrics", + "Category::Network", + "Category::Tracing", + "Supported OS::Android", + "Supported OS::Linux", + "Supported OS::Windows", + "Supported OS::iOS", + "Supported OS::macOS", + "Offering::Integration" + ] + }, + "author": { + "support_email": "help@datadoghq.com", + "name": "Datadog", + "homepage": "https://www.datadoghq.com", + "sales_email": "info@datadoghq.com" + }, + "assets": {} +}