⚗️ Add Nuxt plugin with router tracking#4424
Conversation
Bundles Sizes Evolution
🚀 CPU Performance
🧠 Memory Performance
|
|
✅ Tests 🎉 All green!❄️ No new flaky tests detected 🎯 Code Coverage (details) 🔗 Commit SHA: 9914b2d | Docs | Datadog PR Page | Was this helpful? React with 👍/👎 or give us feedback! |
|
@codex pls review |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 0a30fc683c
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
|
@codex pls review |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 86e5acfaf2
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
|
@codex pls review |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 3416d19292
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
BeltranBulbarellaDD
changed the title
| rumPublicApi.startView(computeNuxtViewName(router.currentRoute.value.matched)) | ||
| } | ||
|
|
||
| router.afterEach((to, from, failure) => { |
There was a problem hiding this comment.
❓ question: We hook at the same place as Vue, but computeNuxtViewName differs, why?
There was a problem hiding this comment.
The view name computation differs intentionally because Nuxt’s public route model is file based, while the Vue integration exposes raw Vue Router path syntax.
There was a problem hiding this comment.
Like we discussed, can you explain why you use afterEach instead of Nuxt hooks https://nuxt.com/docs/4.x/api/advanced/hooks#app-hooks-runtime
There was a problem hiding this comment.
Yeah! So page:loading:start is not the right replacement for view tracking because it fires before route resolution and provides no to route or matched records, so we can’t compute the correct Nuxt view name from it. It would also mishandle aborted or redirected navigations, since the hook can fire even when the final resolved route differs from the navigation that started. Nuxt also documents that it may fire on page key changes or when a page is reused without setup() rerunning, so it can produce extra view starts that don’t match actual route changes. (Link)
| const raw = Array.isArray(rumConfigParam) ? rumConfigParam[0] : rumConfigParam | ||
| if (raw) { | ||
| const config = JSON.parse(raw) | ||
| datadogRum.init({ ...config, plugins: [nuxtRumPlugin(useRouter())] }) |
There was a problem hiding this comment.
❓ question: Why calling useRouter() from here and not within nuxtRumPlugin?
There was a problem hiding this comment.
Because Nuxt handles the creation of the router and it can be the Vue router or a Universal One (Link) So we pass it down to use the one Nuxt creates.
3 participants
Motivation
Add a first-party Nuxt integration for Browser RUM so Nuxt applications can plug into Datadog RUM with Nuxt-aware view tracking. This also gives us stable view names for Nuxt router templates instead of grouping views by concrete URLs.
Changes
@datadog/browser-rum-nuxtpackage with anuxtRumPlugin(router)helper./user/[id]and/guides/[...slug].view-name/trackingbehavior.Test instructions
yarn test:unit --spec packages/rum-nuxt/src/domain/nuxtPlugin.spec.tsyarn test:unit --spec packages/rum-nuxt/src/domain/router/nuxtRouter.spec.tsyarn build:apps --app nuxt-appyarn test:e2e -g "nuxt - router"Also can go into the nuxt test app package and use the developer extension to see events manually.
Checklist