feat: use yielding to main thread in more places #2585
+711
−108
Conversation
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
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
Contributor
|
Size Change: +19.5 kB (+0.39%) Total Size: 5.04 MB
ℹ️ View Unchanged
|
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR introduces a new TaskQueue utility to improve page responsiveness by breaking up CPU-intensive operations and yielding to the main thread periodically. This helps reduce Interaction to Next Paint (INP) variability on pages with heavy processing.
- Adds a reusable
TaskQueueclass with time-budgeting (default 30ms) to avoid blocking the main thread - Implements helper functions
processWithYieldandprocessAsyncWithYieldfor common array processing patterns - Integrates the task queue into request queue flushing, extension initialization, performance entry processing, and session recording event handling
Reviewed Changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/browser/src/utils/task-queue.ts | New task queue implementation with time-slicing support and helper functions for processing arrays with yielding |
| packages/browser/src/utils/tests/task-queue.test.ts | Comprehensive test suite covering task queue functionality, error handling, and yielding behavior |
| packages/browser/src/request-queue.ts | Updates flush callback to use processWithYield for processing request batches |
| packages/browser/src/posthog-core.ts | Refactors extension initialization to use TaskQueue class, removing custom time-slicing logic |
| packages/browser/src/extensions/replay/external/network-plugin.ts | Applies yielding to initial performance entry processing |
| packages/browser/src/extensions/replay/external/lazy-loaded-session-recorder.ts | Adds yielding to queued event processing |
| .changeset/smooth-wolves-mix.md | Changeset documenting the new feature |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
packages/browser/src/extensions/replay/external/lazy-loaded-session-recorder.ts
Show resolved
Hide resolved
![graphite-app[bot]](https://avatars.githubusercontent.com/in/158384?s=60&v=4){kind=small}
pauldambra
force-pushed
the
feat/more-defer
branch
from
5b464a3 to
dcd9d73
Compare
pauldambra
force-pushed
the
feat/more-defer
branch
from
dcd9d73 to
e1fa634
Compare
Copilot finished reviewing on behalf of
pauldambra
November 15, 2025 15:09
Contributor
There was a problem hiding this comment.
Pull Request Overview
Copilot reviewed 10 out of 10 changed files in this pull request and generated 4 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
packages/browser/src/extensions/replay/external/lazy-loaded-session-recorder.ts
Outdated
Show resolved
Hide resolved
pauldambra
force-pushed
the
feat/more-defer
branch
from
e1fa634 to
6e5b1cb
Compare
pauldambra
force-pushed
the
feat/more-defer
branch
from
6e5b1cb to
d0eb1ea
Compare
pauldambra
force-pushed
the
feat/more-defer
branch
from
d0eb1ea to
48f90cd
Compare
pauldambra
force-pushed
the
feat/more-defer
branch
from
48f90cd to
17209ef
Compare
rafaeelaudibert
approved these changes
Nov 19, 2025
| @@ -1,5 +1,5 @@ | |||
| module.exports = { | |||
| testPathIgnorePatterns: ['/node_modules/', '/cypress/', '/react/', '/test_data/', '/testcafe/'], | |||
| testPathIgnorePatterns: ['/node_modules/', '/cypress/', '/react/', '/test_data/', '/testcafe/', '\\.d\\.ts$'], | |||
Member
There was a problem hiding this comment.
This doesn't look right, you're escaping the slash rather than the dot?
Shouldn't it be \.d'\.ts$?
| logger.error('Error initializing extension:', error) | ||
| }, | ||
| }) | ||
| taskQueue.enqueueAll(initTasks) |
Member
There was a problem hiding this comment.
Do we not need to call a method to actually start the processing?
| @@ -0,0 +1,210 @@ | |||
| /** | |||
Member
There was a problem hiding this comment.
I don't exactly like how we need to use this class, but it works, so please just merge if you think this is good.
IMO the way we should consume this is new AsyncProcessor(iterator, { timeBudgetMs: 30 }).processEach(item => doSomething(item))
This is definitely different from your idea where each item in the array is a function and you're just calling those functions, BUT it does align more with how you're using this class (list of items that need to be processed iwth the same function everytime). It basically means to me you're trying to use the wrong abstraction for the job, hence why you had to add those 2 helper functions.
Member
Author
There was a problem hiding this comment.
list of items that need to be processed iwth the same function everytime
hmmm, that's not the abstraction though
this is
list of tasks that need to be processed
they could be the same task many times but they don't have to be
right now, there's no shared task queue, but we could end up with a shared task queue, so i tried to keep it that way
(all replaceable though so 🙈)
Member
There was a problem hiding this comment.
But that's exactly my point: the abstraction is "list of task that needs to be processed" while the usage is "list of items that need to be processed with the same function at all times".
If the abstraction wasn't wrong we wouldn't need that processWithYield helper where we pass the same function at all times 😇
btw, can we add an underscore to these functions by any chance to make sure people understand they're private? we need to make (all replaceable though so 🙈) true lol
Member
Author
There was a problem hiding this comment.
ok, will absorb this when my brain is not offsite-tired 😆
| useEffect(() => { | ||
| posthog.init('phc_test_key_for_playground', { | ||
| api_host: '/ph-relay-xyz123', | ||
| posthog.init('sTMFPsFhdP1Ssg', { |
Member
There was a problem hiding this comment.
Don't add our production key here, people already use our key on their apps just because we have it on our posthog repo , we don't need even more people using it 😥
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
we tested yielding processing to the main thread periodically and it worked well
reducing variability of INP on pages using that mode
let's abstract the task queue processing approach and use it in a few more places where we might be running over large arrays and cause a long task