Skip to content
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

⚡️ [RUM-6813] Lazy load session replay #3152

Merged
merged 14 commits into from
Dec 18, 2024

Conversation

amortemousque
Copy link
Collaborator

@amortemousque amortemousque commented Nov 20, 2024

Motivation

Use dynamic imports to lazy load Session Replay, reducing the bundle size by 3KB (compressed) for users without Session Replay. Transitioning from Webpack, which adds overhead via __webpack_require__, to a new bundler could save additional bytes.

Changes

  • Configure ts module to ES2020
  • Update test app to target node and ES2018 (fix ssr). I made to webpack config files:
    • webpack.ssr.js targeting node and used for the ssr test
    • webpack.web.js targeting web and used for e2e tests
  • Lazy load startRecording using dynamic import
  • Updated the deploy.js script to deploy chunks
  • Updated the upload-source-maps.js script to upload chunks maps

Testing

  • Local
  • Staging
  • Unit
  • End to end

I have gone over the contributing documentation.

@amortemousque amortemousque changed the base branch from main to v6 November 20, 2024 16:19
@codecov-commenter
Copy link

codecov-commenter commented Nov 21, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 93.64%. Comparing base (c185a3c) to head (2dde99c).
Report is 8 commits behind head on v6.

Additional details and impacted files
@@            Coverage Diff             @@
##               v6    #3152      +/-   ##
==========================================
+ Coverage   93.51%   93.64%   +0.13%     
==========================================
  Files         286      286              
  Lines        7552     7559       +7     
  Branches     1718     1718              
==========================================
+ Hits         7062     7079      +17     
+ Misses        490      480      -10     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@@ -14,3 +14,17 @@ export function runOnReadyState(
const eventName = expectedReadyState === 'complete' ? DOM_EVENT.LOAD : DOM_EVENT.DOM_CONTENT_LOADED
return addEventListener(configuration, window, eventName, callback, { once: true })
}

export function asyncRunOnReadyState(
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For now, I introduced an async version of runOnReadyState but if we agree on this lazy loading approach I'll refactor the original runOnReadyState to use promises.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Refactoring runOnReadyState is quite complexe. Let's keep asyncRunOnReadyState for now

Copy link

Bundles Sizes Evolution

📦 Bundle Name Base Size Local Size 𝚫 𝚫% Status
Rum 151.13 KiB 141.86 KiB -9495 B -6.14%
Logs 50.67 KiB 50.67 KiB 0 B 0.00%
Rum Slim 101.10 KiB 101.10 KiB 0 B 0.00%
Worker 25.16 KiB 25.16 KiB 0 B 0.00%
🚀 CPU Performance
Action Name Base Average Cpu Time (ms) Local Average Cpu Time (ms) 𝚫
addglobalcontext 0.002 0.002 0.000
addaction 0.034 0.038 0.004
addtiming 0.001 0.001 0.000
adderror 0.031 0.044 0.013
startstopsessionreplayrecording 0.764 0.008 -0.756
startview 0.920 0.341 -0.579
logmessage 0.022 0.018 -0.004
🧠 Memory Performance
Action Name Base Consumption Memory (bytes) Local Consumption Memory (bytes) 𝚫 (bytes)
addglobalcontext 8.38 KiB 9.73 KiB 1.35 KiB
addaction 41.34 KiB 41.98 KiB 651 B
addtiming 7.69 KiB 8.13 KiB 454 B
adderror 44.28 KiB 45.73 KiB 1.45 KiB
startstopsessionreplayrecording 5.85 KiB 6.09 KiB 249 B
startview 407.29 KiB 406.37 KiB -943 B
logmessage 42.05 KiB 42.32 KiB 278 B

🔗 RealWorld

packages/rum/src/boot/lazyLoadRecorder.ts Show resolved Hide resolved
packages/rum/src/boot/recorderApi.spec.ts Outdated Show resolved Hide resolved
packages/rum/src/boot/recorderApi.ts Outdated Show resolved Hide resolved
@amortemousque amortemousque force-pushed the aymeric/lazy-load-session-replay branch from 04a8db5 to 2205ee9 Compare November 22, 2024 15:30
packages/core/src/browser/runOnReadyState.ts Outdated Show resolved Hide resolved
packages/rum/src/boot/recorderApi.spec.ts Outdated Show resolved Hide resolved
packages/rum/src/boot/recorderApi.spec.ts Outdated Show resolved Hide resolved
packages/rum/src/boot/recorderApi.ts Outdated Show resolved Hide resolved
packages/rum/src/boot/recorderApi.ts Outdated Show resolved Hide resolved
scripts/deploy/deploy.js Outdated Show resolved Hide resolved
packages/rum/src/boot/lazyLoadRecorder.ts Show resolved Hide resolved
@amortemousque amortemousque force-pushed the aymeric/lazy-load-session-replay branch 3 times, most recently from a003eae to 91030c8 Compare November 29, 2024 09:21
@amortemousque amortemousque force-pushed the aymeric/lazy-load-session-replay branch 3 times, most recently from d1b54e2 to 72a8645 Compare November 29, 2024 13:17
@amortemousque amortemousque marked this pull request as ready for review November 29, 2024 13:18
@amortemousque amortemousque requested a review from a team as a code owner November 29, 2024 13:18
@amortemousque amortemousque force-pushed the aymeric/lazy-load-session-replay branch from 72a8645 to 96a5cc9 Compare November 29, 2024 13:25
.gitlab-ci.yml Outdated
@@ -309,7 +309,7 @@ deploy-feature:
stage: deploy
when: manual
variables:
SUFFIX: 'my-feature' #/datadog-[product]-${SUFFIX}.js
SUFFIX: 'lazy-replay' #/datadog-[product]-${SUFFIX}.js
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💬 suggestion: ‏ You can set the suffix in gitlab when you start a manual job

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice, good to know :)

packages/rum/src/boot/recorderApi.spec.ts Outdated Show resolved Hide resolved
@amortemousque amortemousque force-pushed the aymeric/lazy-load-session-replay branch from 88eb41f to 5041590 Compare December 17, 2024 09:54
@amortemousque amortemousque merged commit db2c5bd into v6 Dec 18, 2024
17 checks passed
@amortemousque amortemousque deleted the aymeric/lazy-load-session-replay branch December 18, 2024 16:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants