tomevault-io Upgrade Datadog Browser SDK to v7
Systematic migration guide from v6 to v7. Follow steps 1-6 in order. Each step includes a search pattern to find affected code.
Step 1: Update SDK version
CDN setup — update script src URLs:
| v6 pattern | v7 replacement |
|---|---|
datadoghq-browser-agent.com/us1/v6/datadog-rum.js |
datadoghq-browser-agent.com/us1/v7/datadog-rum.js |
datadoghq-browser-agent.com/us1/v6/datadog-logs.js |
datadoghq-browser-agent.com/us1/v7/datadog-logs.js |
datadoghq-browser-agent.com/us1/v6/datadog-rum-slim.js |
datadoghq-browser-agent.com/us1/v7/datadog-rum-slim.js |
Replace us1 with your site: eu1, us3, us5, ap1, ap2. For US1-FED, the pattern is flat: datadog-rum-v7.js (no site prefix).
Search: grep -r "datadoghq-browser-agent.com.*v6" --include="*.html" --include="*.js" --include="*.ts" --include="*.tsx"
npm setup — update package.json dependencies:
"@datadog/browser-rum": "^7.0.0"
"@datadog/browser-logs": "^7.0.0"
"@datadog/browser-rum-slim": "^7.0.0"
Then run your package manager (npm install, yarn install, etc.) and rebuild.
Also upgrade framework integrations to v7: @datadog/browser-rum-react, @datadog/browser-rum-angular, @datadog/browser-rum-vue, @datadog/browser-rum-nextjs.
Search: grep -r "@datadog/browser-" package.json
Step 2: Add crossorigin="anonymous" (CDN only)
v7 CDN bundles use ESM dynamic imports. Every <script> tag loading the SDK must have crossorigin="anonymous":
<script src="https://www.datadoghq-browser-agent.com/us1/v7/datadog-rum.js" crossorigin="anonymous"></script>
For dynamically created script elements:
const script = document.createElement('script')
script.crossOrigin = 'anonymous' // Must set BEFORE setting src
script.src = 'https://www.datadoghq-browser-agent.com/us1/v7/datadog-rum.js'
Search: grep -rn "datadoghq-browser-agent" --include="*.html" --include="*.js" --include="*.ts"
Check every match for the crossorigin attribute (HTML) or .crossOrigin property (JS).
Step 3: Remove deprecated options
Search init calls for these options and apply replacements:
Removed from Core (affects both RUM and Logs)
| Option | Action |
|---|---|
betaEncodeCookieOptions |
Delete. Cookie encoding is always enabled. |
allowFallbackToLocalStorage |
Replace with sessionPersistence: ['cookie', 'local-storage'] |
Removed from RUM
| Option | Action |
|---|---|
trackBfcacheViews |
Delete. BFCache views are always tracked. |
trackEarlyRequests |
Delete. Early requests are always collected. |
betaTrackActionsInShadowDom |
Delete. Shadow DOM action tracking is always on. |
Removed from Logs
| Option | Action |
|---|---|
usePciIntake |
Delete. Standard intake is now PCI compliant. Update CSP if you had PCI-specific domains allowlisted. |
Search: grep -rn 'betaEncodeCookieOptions|allowFallbackToLocalStorage|trackBfcacheViews|trackEarlyRequests|betaTrackActionsInShadowDom|usePciIntake' --include="*.js" --include="*.ts" --include="*.tsx" --include="*.html"
Step 4: Update changed APIs
4a. forwardErrorsToLogs + forwardConsoleLogs (Logs)
These are now independent. In v6, forwardErrorsToLogs: true silently forwarded console.error(). In v7, it only controls unhandled errors.
If you use forwardErrorsToLogs: true, add "error" to your forwardConsoleLogs array to preserve v6 behavior:
DD_LOGS.init({
forwardErrorsToLogs: true,
forwardConsoleLogs: ['error', 'warn'], // add 'error' explicitly
})
Search: grep -rn "forwardErrorsToLogs" --include="*.js" --include="*.ts" --include="*.tsx" --include="*.html"
4b. startDurationVital / stopDurationVital (RUM)
The DurationVitalReference object is replaced by a vitalKey string:
// v6
const ref = DD_RUM.startDurationVital('checkout')
DD_RUM.stopDurationVital(ref)
// v7
DD_RUM.startDurationVital('checkout', { vitalKey: 'checkout-key' })
DD_RUM.stopDurationVital('checkout', { vitalKey: 'checkout-key' })
Search: grep -rn 'startDurationVital|stopDurationVital|DurationVitalReference' --include="*.js" --include="*.ts" --include="*.tsx"
4c. Plugin API: strategy removed (RUM)
The strategy field has been removed from the plugin API. If you use @datadog/browser-rum-react or other plugin integrations, upgrade them to v7.
Search: grep -rn "strategy" --include="*.js" --include="*.ts" --include="*.tsx" (look for plugin definitions)
Step 5: Review behavioral changes (no code required, but may need attention)
These are default changes — no code breaks, but behavior differs from v6:
| Change | Impact | Action if needed |
|---|---|---|
defaultPrivacyLevel defaults to "mask-user-input" (was "mask") |
Less restrictive masking out of the box. Only user input is masked. | Set defaultPrivacyLevel: "mask" to preserve full masking. |
enablePrivacyForActionName defaults to true |
Click action names follow privacy level. May be masked. | Use the Datadog build plugin or set enablePrivacyForActionName: false. |
propagateTraceBaggage defaults to true |
CORS: cross-origin APIs must allow baggage header. |
Add "baggage" to Access-Control-Allow-Headers, or set propagateTraceBaggage: false. |
| Deterministic sampling | Sampling computed from session ID + rate, not stored. Consistent across pages. | Review if you use different sample rates on different pages. |
| FID removed | First Input Delay no longer collected. | Use INP (Interaction to Next Paint) instead. |
session_renewal view loading type |
Session-renewed views have @view.loading_type:session_renewal instead of route_change. |
Update dashboards/monitors filtering on @view.loading_type. |
Document resource initiatorType changed |
"initial_document" becomes "navigation". Duration may differ slightly. |
Update any code inspecting document resource performanceEntry. |
| Action names may change | Tree walker strategy always used (including Shadow DOM). | Review if you have monitors based on specific action names. |
| Cancelled request errors removed (Logs) | Aborted fetch/XHR no longer generate network error logs. | No action needed — reduces noise. |
| Logs always requires session storage | Without cookies or localStorage, Logs SDK won't start. | Use sessionPersistence: 'memory' for worker environments. |
| Session Replay: Change Records | New serialization format. More accurate, less bandwidth. | Update if you depend on raw segment format. |
Async chunk names prefixed with datadog |
e.g., datadogRecorder-<hash>-datadog-rum.js, datadogProfiler-<hash>-datadog-rum.js. |
Update CSP script-src rules or caching configs (allow datadog*-datadog-rum.js). |
Step 6: Update infrastructure
- CSP:
- Add
crossoriginto script-src. - Update chunk names like
datadog*-datadog-rum.js(e.g.datadogRecorder,datadogProfiler). - If you removed
usePciIntake, update CSP for standard intake domain.
- Add
- Cookies: Add
_dd_s_v2to cookie allowlists. The SDK auto-migrates from_dd_son first load. Rollback to v6 starts new sessions. - CORS (if using
allowedTracingUrls): Add"baggage"toAccess-Control-Allow-Headerson traced origins — or setpropagateTraceBaggage: false. - Browser support: Minimum Chrome 80+, Firefox 78+, Safari 14+ (ES2020). ~0.048% less coverage.
Verification checklist
After upgrading, confirm:
- SDK loads without console errors
-
crossorigin="anonymous"on all CDN script tags - No references to removed options in init config
- Session Replay recordings working (if used)
- Distributed tracing working (no CORS errors from baggage header)
- No
_dd_scookie remaining after first page load (should be_dd_s_v2) - Action names acceptable under new privacy defaults
Source: DataDog/browser-sdk — distributed by TomeVault.