-
Notifications
You must be signed in to change notification settings - Fork 323
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
Add client performance markers and measurements #1534
base: v1.x-2022-07
Are you sure you want to change the base?
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
'@shopify/hydrogen': patch | ||
--- | ||
|
||
Add client performance markers and measurements. |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -231,7 +231,15 @@ function useServerResponse(state: any) { | |
|
||
if (rscReader) { | ||
// The flight response was inlined during SSR, use it directly. | ||
response = createFromReadableStream(rscReader); | ||
const [streamForRsc, streamForMetrics] = rscReader.tee(); | ||
response = createFromReadableStream(streamForRsc); | ||
|
||
const rscReaderForMetrics = streamForMetrics.getReader(); | ||
rscReaderForMetrics.read().then(function read({done}) { | ||
if (done) performance.mark('--hydrogen-hydration-done'); | ||
else rscReaderForMetrics.read().then(read); | ||
}); | ||
|
||
rscReader = null; | ||
} else { | ||
if ( | ||
|
@@ -246,10 +254,18 @@ function useServerResponse(state: any) { | |
window.BOOMR.plugins.Hydrogen.trackSubPageLoadPerformance(); | ||
} | ||
|
||
performance.mark('--hydrogen-rsc-start'); | ||
|
||
// Request a new flight response. | ||
response = createFromFetch( | ||
fetch(`${RSC_PATHNAME}?state=` + encodeURIComponent(key)) | ||
); | ||
performance.mark('--hydrogen-rsc-end'); | ||
Comment on lines
+257
to
+263
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Hmm, this all happens synchronously so I don't think there's a difference between rsc-start and rsc-end here, no? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Looks like you are right. I had assumed that |
||
performance.measure( | ||
'--hydrogen-rsc-time', | ||
'--hydrogen-rsc-start', | ||
'--hydrogen-rsc-end' | ||
); | ||
} | ||
|
||
cache.clear(); | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I wish there was a better way to know when the stream is finished without tee-ing it.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We are the ones creating this
rscReader
in this same file so we could just add a hook there, no? It's basically the same asDOMContentLoaded
.However, I don't think any of this is measuring the work that React does internally in
createFromReadableStream
since it's async and there are no hooks for that. We could add one and ask the React team to consider the use case, e.g.response.onDone = () => {}
. I guess I'm not sure what part we're trying to measure here.