mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
Keen Yee LiauandGitHub
dc36199b22
This commit lets users measure their Interaction to Next Paint [INP](https://web.dev/inp/) web vital. Note that the `web-vitals` package is beta to denote that INP is an experimental metric, the code is stable and v3 is backwards compatible. `web-vitals` CHANGELOG for v3: - [BREAKING] Report TTFB after a bfcache restore - [BREAKING] Only include last LCP entry in metric entries - Add support for the new INP metric - Rename getXXX() functions to onXXX() - Add a navigationType property to the Metric object See https://github.com/GoogleChrome/web-vitals/blob/next/CHANGELOG.md Upgraded `playwright-chromium` from `1.14.1` to `1.17.2` because the Events Timing API used to measure INP is only available in Chromium >= v98. ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have helpful link attached, see `contributing.md` ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have helpful link attached, see `contributing.md` ## Documentation / Examples - [ ] Make sure the linting passes by running `yarn lint`
37 lines
835 B
JavaScript
37 lines
835 B
JavaScript
if (typeof navigator !== 'undefined') {
|
|
window.__BEACONS = window.__BEACONS || []
|
|
window.__BEACONS_COUNT = new Map()
|
|
|
|
navigator.sendBeacon = async function () {
|
|
const args = await Promise.all(
|
|
[...arguments].map((v) => {
|
|
if (v instanceof Blob) {
|
|
return v.text()
|
|
}
|
|
return v
|
|
})
|
|
)
|
|
|
|
window.__BEACONS.push(args)
|
|
}
|
|
}
|
|
|
|
function toggleText(e) {
|
|
const startTime = performance.now()
|
|
while (performance.now() < startTime + 100) {
|
|
// busy waiting
|
|
}
|
|
e.target.textContent = e.target.textContent === 'Click' ? 'Press' : 'Click'
|
|
}
|
|
|
|
export default () => {
|
|
// Below comment will be used for replacing exported report method with hook based one.
|
|
return (
|
|
<div>
|
|
<h1>Foo!</h1>
|
|
<h2>bar!</h2>
|
|
<button onClick={toggleText}>Click</button>
|
|
</div>
|
|
)
|
|
}
|