48 skills · 409 min
Skills
Skill 38 of 48
Instrument browser-based web applications with Datadog Browser RUM.
5 minutes · 1,151 words · 8 sections
Install
npx skills add datadog-labs/agent-skills --skill dd-instrument-rumnpx skills add datadog-labs/agent-skillsThe first command installs just this skill, by the name in its SKILL.md; the second installs the whole repository.
Instrument only the browser application in scope. Do not add Datadog APM, tracing, LLM Observability, Logs, source-map upload, user identification, Vercel metadata, Shopify, Salesforce, or unrelated Datadog products.
Use normal file inspection, editing, and command tools for every step except optional RUM application creation. Use only CreateRumApplication for that operation, as described in references/common-credentials.md; never invent Datadog tool names.
init() in a component render, lifecycle hook, route handler, or repeated callback.applicationId, clientToken, site, service tags, sampling, privacy, tracking, and every other existing option as immutable. Credentials supplied by the task are for a new init only; they are not an override for an existing valid init. In this branch, do not rewrite credential lines while adding plugin wiring.site is invalid, framework/plugin prerequisites are unmet, permissions prevent the work, or multiple conflicting init calls cannot be safely consolidated.@datadog/browser-rum and every @datadog/browser-rum-* integration package on the same exact SDK version.node_modules.Identify the project root that produces browser code. In a monorepo, inspect workspace configuration, scripts, Dockerfiles, and CI/deployment configuration to find the frontend manifest used by the real build rather than editing the repository root by assumption. Record that manifest path and its package manager before editing. If several independent browser applications are plausible and the user did not select one, ask which application to instrument.
Reject non-browser applications such as Ink CLIs and projects with no HTML/browser build target.
Inspect dependencies and source layout in this order so meta-frameworks win over their underlying UI library:
nuxt -> Nuxtnext -> Next.js; distinguish App Router from Pages Router by source layout@angular/core -> Angular; distinguish standalone bootstrap from NgModulevue -> Vuesvelte or @sveltejs/kit -> Svelte or SvelteKitreact -> ReactAlso detect:
tsconfig.json or TypeScript dependency is present; otherwise preserve JavaScript.packageManager field first, then its adjacent lockfile: bun.lock or bun.lockb, pnpm-lock.yaml, yarn.lock, or package-lock.json. Use npm only when no stronger project signal exists, and never mix managers.react-scripts). Treat unmanaged HTML as CDN only when no package/bundler build owns it.Read references/rum-core.md, then read exactly the applicable framework reference:
| Target | Reference |
|---|---|
| React, React Router, TanStack Router | references/rum-react.md |
| Next.js App or Pages Router | references/rum-nextjs.md |
| Angular | references/rum-angular.md |
| Vue | references/rum-vue.md |
| Nuxt | references/rum-nuxt.md |
| Svelte, vanilla, generic SPA, iframe-hosted app | references/rum-other-frameworks.md |
Validate every prerequisite in the selected reference before provisioning credentials or editing. Do not upgrade a framework and do not silently fall back to core-only RUM when a detected framework plugin is incompatible.
Search source, HTML, and configuration files while excluding dependency, build, generated, and coverage directories such as node_modules, dist, build, .next, .nuxt, and coverage.
Check for:
@datadog/browser-rum, including renamed and namespace bindings.@datadog/browser-rum-* integration package.datadogRum.init, including aliases and local wrapper modules.DD_RUM.init, window.DD_RUM.init, DD_RUM.onReady, and Datadog CDN loader URLs.Treat package presence alone as insufficient: a dependency may be unused.
Resolve credentials through references/common-credentials.md only after analysis succeeds. If analysis found one valid existing init, reuse its existing credentials and skip credential replacement entirely. Supplied task credentials may be used only when creating a new init. Then:
references/rum-core.md. For an existing valid init, apply only missing compatible fields to that same object; do not copy credential or canonical-option placeholders over existing values.lint:fix, fix, or format and from ESLint/Prettier configuration. Run the project’s formatter or fix command only for files changed by this work.Do not add allowedTracingUrls or any backend/CORS/tracing configuration; those belong to an APM onboarding workflow.
Follow references/common-verify-report.md. Before reporting success, inspect the final diff against the pre-edit project. When an existing valid init was found, verify that every pre-existing init value—including both credentials—remains byte-for-byte unchanged and that the only setup changes are the required missing integration wiring (plus any strictly necessary dependency/lockfile change). If an existing value changed, restore it before reporting success. Do not report success unless required packages are persisted, the resulting setup contains exactly one init, and the normal build succeeds.
Instrument browser-based web applications with Datadog Browser RUM. Detect the application framework, router, package manager, bundler, entrypoint, credentials, and existing RUM setup; add or safely complete classic Browser RUM instrumentation for React, Next.js App or Pages Router, Angular, Vue, Nuxt, Svelte, vanilla JavaScript, SPAs, and iframe-hosted apps; avoid duplicate initialization; and verify the application still builds. Use when asked to add, set up, instrument, repair, or verify Datadog RUM, Browser Monitoring, Session Replay, or framework-specific Browser RUM plugins.
The verbatim description from this skill’s front matter — the string an agent matches on to decide whether to load it.
main, last pushed 17 September 2026.SKILL.md, not by matching a directory convention. 11 distinct layouts observed: agent-observability/*/SKILL.md, */SKILL.md, dd-apm/k8s-ssi/*/SKILL.md, dd-apm/linux-ssi/*/SKILL.md, dd-apm/*/SKILL.md, dd-apps/*/SKILL.md, dd-audit/*/SKILL.md, dd-browser-sdk/*/SKILL.md, dd-security/csm/*/SKILL.md, dd-software-delivery/*/SKILL.md, SKILL.md (repo root).h1 and no skipped levels:/datadog-labs/agent-skills.md, and each skill at its own .md URL.9 files · 25 KB
Everything this skill ships beside its prose. All of it is set here, as subchapters of skill 38.
Documentation the agent loads on demand, rather than up front.