Comments (3)
I left this open because I wanted to think about whether it made sense to expose this in some way.
My initial inclination was to return the PerformanceObserver
object if one was created, but there are a few reasons why that might not work for feature detection:
- If the site is using a polyfill (e.g. the FID polyfill) then there won't be a
PerformanceObserver
instance to return, but a metric will still be reported. - The
getTTFB()
function (for maximum browser compat) does not usePerformanceObserver
so it won't work for that case either.
callback({ isSupported: false })
I'm also hesitant to change the callback signature since lots of code out there is already written with the expectation that the callback is only invoked if the metric was successfully captured as is ready to be reported.
All in all, I think I want to stick with the original principle that the library should run in all browsers, but the callback will only be invoked in the browser supports the metric.
from web-vitals.
It would be great if there would be a way to get information about the support of a particular metric. E.g. in Firefox the reporters are just not called. I could imagine to include an
isSupported
property or similar in themetric
object that is passed to the particular reporter. Could this be a valuable addition?
An isSupported
property on the Metric
object would not work since the Metric
object would only ever be delivered to callbacks if the browser supported the API, i.e. it would always report true.
In general, if you want to know if a metric is supported you can use the PerformanceObserver.supportedEntryTypes
API, which is how this library detects support. Is that sufficient for your use case?
from web-vitals.
Thanks for answering Phil. In the best case, I wouldn't want to feature-detect outside of web-vitals
because I believe it's valuable information if people want to build widgets on top of web-vitals
. :)
The feature detection code you linked is exactly what I had in mind to tweak it a little bit.
export const observe = (
type: string,
callback: PerformanceEntryHandler,
): PerformanceObserver | undefined => {
try {
if (PerformanceObserver.supportedEntryTypes.includes(type)) {
const po: PerformanceObserver =
new PerformanceObserver((l) => l.getEntries().map(callback));
po.observe({type, buffered: true});
return po;
} else {
// give information that `type` is not supported here
// by calling the callback with support information (in any format)
// -> callback({ isSupported: false })
}
} catch (e) {
// do nothing
}
return;
};
Feel free to close if you don't consider adding something along these lines. :)
from web-vitals.
Related Issues (20)
- Bug: LCP attribution can include `resourceLoadDelay` attribution timings far greater than the LCP value in cases where `onTTFB` discards the navigation data HOT 1
- FCP and TTFB are triggered multiple times HOT 7
- contributing LoAF basesd code that idenifies LoAF, INF and JS long tasks data HOT 1
- Capturing metadata with events HOT 2
- Allow to reset the INP calculation HOT 2
- v4 giving undefined TypeError HOT 1
- INP: Probably a bad measurement metric for web vitals - even with simple HTML structure pages with no CSS will cause bad value. HOT 1
- Expose INP target element as first class citizen in attribution HOT 3
- Expose ability to reset internal state of metrics (specifically INP) HOT 2
- v4 INP attribution ending processingEnd time in the wrong animation frame HOT 8
- CDN JS - Web server is returning an unknown error HOT 4
- CLS and INP are being calculated incorrectly HOT 2
- Suggestion to track all attributions HOT 4
- CLS being reported due to filter CSS transition HOT 3
- Firefox e2e tests flakey HOT 3
- can't find ReportCallback or ReportHandler type HOT 3
- Are there any updates for soft-navs? HOT 2
- LoAF missed for some INP events HOT 9
- Facing issue while exporting `web-vitals/attribution` using `browserify` HOT 2
- LoAF Performance entry script sourceFunctionName and sourceURL logged values HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from web-vitals.