-
Notifications
You must be signed in to change notification settings - Fork 190
📝 [RUM-16097] Add migration skills for v4→v5 and v5→v6 SDK upgrades #4640
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Closed
Closed
Changes from all commits
Commits
Show all changes
40 commits
Select commit
Hold shift + click to select a range
b3e06d8
📝 Add migration skills for v4→v5 and v5→v6 SDK upgrades
mormubis 894be96
📝 Fix sendLogsAfterSessionExpiration migration guidance
mormubis cc0914e
📝 Improve upgrade-browser-sdk-v7 skill based on evaluation findings
mormubis 47a96b5
📝 Fix forwardErrorsToLogs guidance in upgrade-browser-sdk-v7 skill
mormubis 3213eee
📝 Improve CDN startDurationVital guidance in v7 skill
mormubis 0f76a4e
📝 Apply writing-skills review: common mistakes, portable greps, riche…
mormubis 26ee496
📝 Fix vital capture grep to match window.DD_RUM and property assignments
mormubis 0abed60
📝 Remove AP2 from v5 CDN site list (not published for v5)
mormubis c2c294c
📝 Fix package.json search to recurse into monorepo sub-packages
mormubis a1d2670
📝 Add *.jsx to all grep search patterns
mormubis 53960d1
📝 Add *.html to v5 step 3 API migration search
mormubis 131a15a
📝 Fix context.event regex to use word boundary
mormubis c96656e
📝 Add .click() to v5 trusted events search
mormubis 2630471
📝 Add allowedTracingUrls and propagatorTypes to v6 tracestate search
mormubis da113fc
📝 Fix forwardConsoleLogs example to preserve existing levels
mormubis 9408d99
📝 Add Logs init search for projects relying on default forwardErrorsT…
mormubis 42463cd
📝 Add *.svelte and *.vue to captured vital return value search
mormubis 7dffd20
📝 Correct action name change: CSS text-transform ignored, not lowercased
mormubis 4bc7e60
📝 Fix bare | to \| in v7 step 3 option search
mormubis bb025a1
📝 Add *.html to v5 beforeSend migration search
mormubis 4521dc9
📝 Add network errors to forwardErrorsToLogs description
mormubis e4fc08a
📝 Scope forwardConsoleLogs addition to forwardErrorsToLogs true/omitt…
mormubis 8382ab0
📝 Add *.vue and *.svelte to v5 and v6 migration searches
mormubis 87358ab
📝 Correct enablePrivacyForActionName: false does not restore innerText
mormubis 15552e6
📝 List all US1-FED flat bundle names (rum, logs, rum-slim)
mormubis 1ee7d5d
📝 Add TypeScript-safe example for __ddIsTrusted trusted events
mormubis 243766c
📝 Add *.html, *.vue, *.svelte to v7 vital wrapper and Logs init searches
mormubis 32702c5
📝 Fix v6 Session Replay CSP chunk name to datadogRecorder-*
mormubis f5714dd
📝 Clarify traceparent should be added to existing CORS headers, not r…
mormubis 4d72dc6
📝 Clarify tracestate should be added to existing CORS headers, not re…
mormubis 81e42f5
📝 Fix session.plan guidance: field removed, replace with has_replay/s…
mormubis 8ba9a0c
📝 Add allowedTracingUrls search to v7 baggage CORS guidance
mormubis c62eeb0
📝 Preserve explicit trackResources/trackLongTasks: false from v4
mormubis 11b34bf
📝 Only disable tracking options that were not already enabled in v5
mormubis 7e1c9c8
📝 Add *.jsx to v7 crossorigin search
mormubis 06fcd06
📝 Add RUM init call search to v5 step 4 for projects relying on defaults
mormubis 91e171b
📝 Add RUM init call search to v6 step 3 for projects relying on false…
mormubis 7f0dab7
📝 Add search for main logger config in v5 decoupling guidance
mormubis 32c0733
📝 Fix v7 package.json search and add vue/svelte to forwardErrorsToLog…
mormubis 2350acf
📝 Add *.tsx to v7 crossorigin audit search
mormubis File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,292 @@ | ||
| --- | ||
| name: upgrade-browser-sdk-v5 | ||
| description: Use when upgrading Datadog Browser SDK from v4 to v5, when encountering removed options like proxyUrl, sampleRate, replaySampleRate, premiumSampleRate, allowedTracingOrigins, or deprecated APIs like addRumGlobalContext, removeUser | ||
| --- | ||
|
|
||
| # Upgrade Datadog Browser SDK to v5 | ||
|
|
||
| Systematic migration guide from v4 to v5. Follow steps 1-7 in order. Each step includes a search pattern to find affected code. | ||
|
|
||
| ## Step 1: Update SDK version | ||
|
|
||
| **CDN setup** — update script `src` URLs: | ||
|
|
||
| | v4 pattern | v5 replacement | | ||
| | -------------------------------------------------------- | -------------------------------------------------------- | | ||
| | `datadoghq-browser-agent.com/us1/v4/datadog-rum.js` | `datadoghq-browser-agent.com/us1/v5/datadog-rum.js` | | ||
| | `datadoghq-browser-agent.com/us1/v4/datadog-logs.js` | `datadoghq-browser-agent.com/us1/v5/datadog-logs.js` | | ||
| | `datadoghq-browser-agent.com/us1/v4/datadog-rum-slim.js` | `datadoghq-browser-agent.com/us1/v5/datadog-rum-slim.js` | | ||
|
|
||
| Replace `us1` with your site: `eu1`, `us3`, `us5`, `ap1`. For US1-FED, the pattern is flat with no site prefix: `datadog-rum-v5.js`, `datadog-logs-v5.js`, `datadog-rum-slim-v5.js`. Note: AP2 is not available for v5 — upgrade to v6 first if you need AP2. | ||
|
|
||
| Search: `grep -r "datadoghq-browser-agent.com.*v4" --include="*.html" --include="*.js" --include="*.ts" --include="*.tsx" --include="*.jsx"` | ||
|
|
||
| **npm setup** — update `package.json` dependencies: | ||
|
|
||
| ``` | ||
| "@datadog/browser-rum": "^5.0.0" | ||
| "@datadog/browser-logs": "^5.0.0" | ||
| "@datadog/browser-rum-slim": "^5.0.0" | ||
| ``` | ||
|
|
||
| Then run your package manager (`npm install`, `yarn install`, etc.) and rebuild. | ||
|
|
||
| Also upgrade framework integrations to v5 if used: `@datadog/browser-rum-react`. | ||
|
|
||
| Search: `grep -r "@datadog/browser-" --include="package.json" .` | ||
|
|
||
| ## Step 2: Replace deprecated init parameters | ||
|
|
||
| These v4 parameter names no longer exist in v5. Replace them: | ||
|
|
||
| | Deprecated parameter (v4) | Replacement (v5) | | ||
| | ------------------------- | ------------------------- | | ||
| | `proxyUrl` | `proxy` | | ||
| | `sampleRate` | `sessionSampleRate` | | ||
| | `allowedTracingOrigins` | `allowedTracingUrls` | | ||
| | `tracingSampleRate` | `traceSampleRate` | | ||
| | `trackInteractions` | `trackUserInteractions` | | ||
| | `premiumSampleRate` | `sessionReplaySampleRate` | | ||
| | `replaySampleRate` | `sessionReplaySampleRate` | | ||
|
|
||
| Search: `grep -rn 'proxyUrl\|sampleRate\|allowedTracingOrigins\|tracingSampleRate\|trackInteractions\|premiumSampleRate\|replaySampleRate' --include="*.js" --include="*.ts" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue" --include="*.svelte"` | ||
|
|
||
| **Note**: `sampleRate` matches broadly. Look specifically for init config objects — `sessionSampleRate` is the v5 name for the session sampling rate. | ||
|
|
||
| ## Step 3: Replace deprecated public APIs | ||
|
|
||
| These v4 API method names no longer exist in v5: | ||
|
|
||
| ### RUM APIs | ||
|
|
||
| | Deprecated API (v4) | Replacement (v5) | | ||
| | ------------------------------- | ------------------------------------ | | ||
| | `DD_RUM.removeUser` | `DD_RUM.clearUser` | | ||
| | `DD_RUM.addRumGlobalContext` | `DD_RUM.setGlobalContextProperty` | | ||
| | `DD_RUM.removeRumGlobalContext` | `DD_RUM.removeGlobalContextProperty` | | ||
| | `DD_RUM.getRumGlobalContext` | `DD_RUM.getGlobalContext` | | ||
| | `DD_RUM.setRumGlobalContext` | `DD_RUM.setGlobalContext` | | ||
|
|
||
| ### Logs APIs | ||
|
|
||
| | Deprecated API (v4) | Replacement (v5) | | ||
| | ----------------------------------- | ------------------------------------- | | ||
| | `DD_LOGS.addLoggerGlobalContext` | `DD_LOGS.setGlobalContextProperty` | | ||
| | `DD_LOGS.removeLoggerGlobalContext` | `DD_LOGS.removeGlobalContextProperty` | | ||
| | `DD_LOGS.getLoggerGlobalContext` | `DD_LOGS.getGlobalContext` | | ||
| | `DD_LOGS.setLoggerGlobalContext` | `DD_LOGS.setGlobalContext` | | ||
| | `logger.addContext` | `logger.setContextProperty` | | ||
| | `logger.removeContext` | `logger.removeContextProperty` | | ||
|
|
||
| Search: `grep -rn 'removeUser\|addRumGlobalContext\|removeRumGlobalContext\|getRumGlobalContext\|setRumGlobalContext\|addLoggerGlobalContext\|removeLoggerGlobalContext\|getLoggerGlobalContext\|setLoggerGlobalContext\|\.addContext\|\.removeContext' --include="*.js" --include="*.ts" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue" --include="*.svelte"` | ||
|
|
||
| ## Step 4: Update Session Replay configuration | ||
|
|
||
| v5 changes several Session Replay defaults and behaviors: | ||
|
|
||
| ### 4a. `defaultPrivacyLevel` changed to `"mask"` | ||
|
|
||
| In v4, the default was `mask-user-input`. In v5, **all content is masked by default**. | ||
|
|
||
| To preserve v4 behavior (only mask user input): | ||
|
|
||
| ```js | ||
| DD_RUM.init({ | ||
| defaultPrivacyLevel: 'mask-user-input', | ||
| }) | ||
| ``` | ||
|
|
||
| ### 4b. Recording starts automatically | ||
|
|
||
| Sessions sampled for Session Replay are now automatically recorded. You no longer need to call `startSessionReplayRecording()`. | ||
|
|
||
| To preserve v4 behavior (manual recording start): | ||
|
|
||
| ```js | ||
| DD_RUM.init({ | ||
| startSessionReplayRecordingManually: true, | ||
| }) | ||
| ``` | ||
|
|
||
| ### 4c. Default `sessionReplaySampleRate` is now `0` | ||
|
|
||
| In v4, the default replay sample rate was 100. In v5, it's `0` — no replays unless you set it explicitly. | ||
|
|
||
| **Action**: Ensure `sessionReplaySampleRate` is explicitly set in your init config: | ||
|
|
||
| ```js | ||
| DD_RUM.init({ | ||
| sessionReplaySampleRate: 100, // or your desired rate | ||
| }) | ||
| ``` | ||
|
|
||
| ### 4d. `trackResources` and `trackLongTasks` must be explicit | ||
|
|
||
| When using `sessionReplaySampleRate` (instead of the removed `replaySampleRate` or `premiumSampleRate`), resources and long tasks are no longer collected by default. Enable them explicitly — **unless** the v4 config already set them to `false` intentionally: | ||
|
|
||
| ```js | ||
| DD_RUM.init({ | ||
| sessionReplaySampleRate: 100, | ||
| trackResources: true, // omit if v4 explicitly had trackResources: false | ||
| trackLongTasks: true, // omit if v4 explicitly had trackLongTasks: false | ||
| }) | ||
| ``` | ||
|
|
||
| Search: `grep -rn 'sessionReplaySampleRate\|startSessionReplayRecording\|defaultPrivacyLevel\|trackResources\|trackLongTasks' --include="*.js" --include="*.ts" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue" --include="*.svelte"` | ||
|
|
||
| Also search for all RUM init calls to catch projects that omit these options and rely on v4 defaults: `grep -rn 'DD_RUM\.init\|datadogRum\.init' --include="*.js" --include="*.ts" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue" --include="*.svelte"`. For each init call, verify that `sessionReplaySampleRate`, `defaultPrivacyLevel`, and `trackResources`/`trackLongTasks` are explicitly set. | ||
|
|
||
| ## Step 5: Update changed APIs and behaviors | ||
|
|
||
| ### 5a. `beforeSend` must return a boolean | ||
|
|
||
| `beforeSend` callback functions should return `true` to keep the event or `false` to discard it. If no value is returned, the event is kept. This resolves TypeScript compilation errors. | ||
|
|
||
| ```js | ||
| beforeSend: (event, context) => { | ||
| // return true to keep, false to discard | ||
| return true | ||
| } | ||
| ``` | ||
|
|
||
| ### 5b. `beforeSend` action context: `context.event` → `context.events` | ||
|
|
||
| With frustration signals, an action event can be associated with multiple DOM events. `context.event` is replaced by `context.events` (array). | ||
|
|
||
| ```js | ||
| // v4 | ||
| beforeSend: (event, context) => { | ||
| if (event.type === 'action') { | ||
| const domEvent = context.event | ||
| } | ||
| } | ||
|
|
||
| // v5 | ||
| beforeSend: (event, context) => { | ||
| if (event.type === 'action') { | ||
| const domEvents = context.events // array | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| ### 5c. `beforeSend` performance entry is now a `PerformanceEntry` object | ||
|
|
||
| The `performanceEntry` in `beforeSend` context is now the raw `PerformanceEntry` object, not a JSON representation. The `PerformanceEntryRepresentation` type has been removed. | ||
|
|
||
| ### 5d. `startTime` removed from XHR `beforeSend` context | ||
|
|
||
| The `context.startTime` property has been removed from XHR resource `beforeSend` context. Use the `performanceEntry` instead. | ||
|
|
||
| ### 5e. `view.in_foreground_periods` removed from `beforeSend` | ||
|
|
||
| This attribute is now computed by the backend. Remove any `beforeSend` code that accesses `view.in_foreground_periods`. | ||
|
|
||
| ### 5f. Frustration signals collected automatically | ||
|
|
||
| Set `trackUserInteractions: true` to collect all user interactions, including frustration signals. The `trackFrustrations` parameter is no longer needed. | ||
|
|
||
| ### 5g. Resource method names are uppercase | ||
|
|
||
| Resource `method` field is now always uppercase (e.g., `GET`, `POST`). Update any dashboards or monitors filtering on `resource.method`. | ||
|
|
||
| ### 5h. `session.plan` field removed | ||
|
|
||
| The `session.plan` field (`lite`/`premium`) is removed in v5 and not emitted on any event type. Replace any dashboard or monitor filter on `session.plan` with the new replay fields: | ||
|
|
||
| - `@session.sampled_for_replay:true` — session was sampled for Session Replay | ||
| - `@session.has_replay:true` — session has an actual replay recording | ||
|
|
||
| Search: `grep -rn 'beforeSend\|trackFrustrations\|PerformanceEntryRepresentation\|in_foreground_periods\|context\.event\b\|startTime' --include="*.js" --include="*.ts" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue" --include="*.svelte"` | ||
|
mormubis marked this conversation as resolved.
|
||
|
|
||
| ## Step 6: Handle trusted events | ||
|
|
||
| v5 only listens to user-generated (trusted) events. Script-generated events are ignored by default. | ||
|
|
||
| If you rely on programmatic events (e.g., `dispatchEvent`), add the `__ddIsTrusted` attribute: | ||
|
|
||
| ```js | ||
| // JavaScript | ||
| const click = new Event('click') | ||
| click.__ddIsTrusted = true | ||
|
mormubis marked this conversation as resolved.
|
||
| document.dispatchEvent(click) | ||
| ``` | ||
|
|
||
| ```ts | ||
| // TypeScript | ||
| const click = new Event('click') as Event & { __ddIsTrusted?: boolean } | ||
| click.__ddIsTrusted = true | ||
| document.dispatchEvent(click) | ||
| ``` | ||
|
|
||
| Or allow all untrusted events globally: | ||
|
|
||
| ```js | ||
| DD_RUM.init({ | ||
| allowUntrustedEvents: true, | ||
| }) | ||
| ``` | ||
|
|
||
| Search: `grep -rn 'dispatchEvent\|new Event\|new MouseEvent\|new KeyboardEvent\|\.click()' --include="*.js" --include="*.ts" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue" --include="*.svelte"` | ||
|
|
||
| ## Step 7: Update infrastructure | ||
|
|
||
| ### CSP `connect-src` domains changed | ||
|
|
||
| v5 sends data to new intake domains. Update your Content Security Policy: | ||
|
|
||
| | Datadog site | New `connect-src` domain | | ||
| | ------------ | ------------------------------------------ | | ||
| | US1 | `https://browser-intake-datadoghq.com` | | ||
| | US3 | `https://browser-intake-us3-datadoghq.com` | | ||
| | US5 | `https://browser-intake-us5-datadoghq.com` | | ||
| | EU1 | `https://browser-intake-datadoghq.eu` | | ||
| | US1-FED | `https://browser-intake-ddog-gov.com` | | ||
| | US2-FED | `https://browser-intake-us2-ddog-gov.com` | | ||
|
mormubis marked this conversation as resolved.
|
||
| | AP1 | `https://browser-intake-ap1-datadoghq.com` | | ||
|
|
||
| ### CORS headers for distributed tracing | ||
|
|
||
| v5 adds `tracecontext` as a default propagator. If you use `allowedTracingUrls`, your server must accept the `traceparent` header. Add it to your existing `Access-Control-Allow-Headers` — do not replace the full list: | ||
|
|
||
| ``` | ||
| # Add traceparent alongside your existing headers | ||
| Access-Control-Allow-Headers: <existing-headers>, traceparent | ||
| ``` | ||
|
|
||
| ### Logs: `error.origin` removed | ||
|
|
||
| Update dashboards/monitors using `error.origin` to use `origin` instead. | ||
|
mormubis marked this conversation as resolved.
|
||
|
|
||
| ### Logs: console error prefix removed | ||
|
|
||
| The `"console error:"` prefix is removed from log messages. Update queries using this prefix to use `@origin:console` instead. | ||
|
mormubis marked this conversation as resolved.
|
||
|
|
||
| ### Logs: main logger decoupled | ||
|
|
||
| Runtime errors, network logs, report logs, and console logs no longer inherit the main logger's context, level, or handler. Use global context and dedicated init parameters instead. | ||
|
mormubis marked this conversation as resolved.
|
||
|
|
||
| Search for main logger configuration that may have been relying on this inheritance: `grep -rn 'DD_LOGS\.logger\.setLevel\|DD_LOGS\.logger\.setHandler\|DD_LOGS\.logger\.setContext\|DD_LOGS\.logger\.setContextProperty' --include="*.js" --include="*.ts" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue" --include="*.svelte"`. For each match, verify the setting is intentional for the main logger only — it will no longer affect runtime errors, network logs, or console logs. | ||
|
|
||
| ## Common Mistakes | ||
|
|
||
| | Mistake | What goes wrong | Fix | | ||
| | -------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | | ||
| | Setting `sessionReplaySampleRate > 0` without enabling `trackResources` and `trackLongTasks` | Resources and long tasks are silently not collected — they no longer default to `true` when using `sessionReplaySampleRate` | Always add `trackResources: true, trackLongTasks: true` alongside any non-zero `sessionReplaySampleRate` | | ||
| | Using `context.event` instead of `context.events` in `beforeSend` for action events | Action context property renamed — `context.event` is `undefined`, DOM event details are lost | Update to `context.events` (array); iterate if you need all associated DOM events | | ||
| | Not updating CSP `connect-src` to the new v5 intake domains | SDK silently fails to send data — old intake domains are no longer valid | Update `connect-src` to the v5 intake domain for your site (see Step 7) | | ||
|
|
||
| ## Verification checklist | ||
|
|
||
| After upgrading, confirm: | ||
|
|
||
| - [ ] SDK loads without console errors | ||
| - [ ] No references to removed init parameters (`proxyUrl`, `sampleRate`, `replaySampleRate`, etc.) | ||
| - [ ] No references to removed APIs (`addRumGlobalContext`, `removeUser`, etc.) | ||
| - [ ] `beforeSend` callbacks return boolean values | ||
| - [ ] `beforeSend` action handlers use `context.events` (not `context.event`) | ||
| - [ ] `trackResources` and `trackLongTasks` explicitly set if using `sessionReplaySampleRate` | ||
| - [ ] Session Replay recording works (if `sessionReplaySampleRate` > 0) | ||
| - [ ] Distributed tracing working (no CORS errors from `traceparent` header) | ||
| - [ ] CSP `connect-src` updated to new intake domains | ||
| - [ ] Dashboards/monitors updated for uppercase `resource.method` | ||
| - [ ] No queries using `error.origin` (use `origin` instead) | ||
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.