googlechromelabs / tti-polyfill Goto Github PK

If I npm install tti-polyfill and import the distributed file:

import '/node_modules/tti-polyfill/tti-polyfill.js';

I get in the console:

firstConsistentlyInteractiveDetector.js:28 Uncaught TypeError: Cannot read property 'Object' of undefined
    at firstConsistentlyInteractiveDetector.js:28
    at umd-wrapper.js:30

I've seen this polyfill used (a number of times now) to collect TTI field data. I think this is generally not recommended since users interacting with your page can skew field measurements of TTI. See also web.dev/tti and a number of Google resources classifying TTI as a lab-only metric.

Would you consider adding a warning about this in the README? (Happy to send a PR, too)

When using PerformanceObserver, I found that it was possible for events to be lost when using the same pattern tti-polyfill uses to cache events that occur between registering the first PerformanceObserver in head, and calling disconnect & registering another one. The callback appears to be called asynchronously, so there could be an event loop between when a performance event is captured and the callback invoked. That is, this sequence of events could occur:

1. Register first PerformanceObserver with callback in head
2. Event is captured by PerformanceObserver, but callback not invoked yet.
3. First PerformanceObserver is disconnected, causing event from #2 to be lost.

The correct way to handle this appears to be using takeRecords() to flush events that have been received, but not yet captured by the callback, before calling disconnect. In src/firstConsistentlyInteractiveDetector.js this isn't done before the first observer is disconnected at line 63. Theoretically events could be lost.

Documentation's a bit sparse on this so I could be doing this wrong, but this seemed to be the correct solution when events went missing for me. (I haven't actually experienced this problem with tti-polyfill just to be clear, but did using the exact same pattern with other types of events like mark).

I can run PerformanceObserver on an iframe by the going new ifame.contentWindow.PerformanceObserver monitor.

I would like to run this polyfiller on an iframe ?

I'd like to add the TTI metric to my page view tracking data, but the frequency with which it checks TTI (5 secs) means that there can be a significant delay before getting the result. This can be a problem when tracking page views (the user may abandon the page before we've
been able to measure TTI and track the page view)

Would you consider a PR that enabled me to configure this frequency (with a default of 5 secs)? I think this would be less of a problem if it was 1 sec or even 500ms.

Our site is reporting an increase of errors on Mobile Safari UI/WKWebView ios devices running 14.2
The line:

!function(){if('PerformanceLongTaskTiming' in window){var g=window.__tti={e:[]};

is reporting SecurityError · Blocked a frame with origin. Upon a quick google I was able to see PerformanceLongTaskTiming is not supported on Safari.

In the documentation minValue is described as "The lower bound to start forward-searching for the quiet window. If no value is set, the default is after the DOMContentLoaded event."

Looking at the code, it seems like the only time minValue is used is in the return value of computeFirstConsistentlyInteractive:

Then that value is immediately resolved:

In this case it seems like the forward-searching for the quiet window happens first, and then the evaluated tti is just compared with minValue at the end. Am I missing something? Ideally I would like a minValue parameter that behaved as per the description. A motivating example would be measuring tti on a client-side route, where a batch of activity would occur well after the initial page load.

It looks like Chromium 77 now supports the buffered flag.

Would be awesome if the tti-polyfill had a config option to take advantage of that, so the workaround mentioned in the readme is no longer necessary.

We are using the tti-polyfill in our application and hosting tti-polyfill.js and tti-polyfill.js.map on a CDN. When I visit the application in Edge and open the devtools console, I see the following 404 errors:

HTTP404: NOT FOUND - The server has not found anything matching the requested URI (Uniform Resource Identifier).
(XHR)GET - <CDN_Path>/%20[synthetic:util/global]
HTTP404: NOT FOUND - The server has not found anything matching the requested URI (Uniform Resource Identifier).
(XHR)GET - <CDN_Path>/%20[synthetic:es6/util/arrayfromiterator]
HTTP404: NOT FOUND - The server has not found anything matching the requested URI (Uniform Resource Identifier).
(XHR)GET - <CDN_Path>/%20[synthetic:es6/util/arrayfromiterable]
HTTP404: NOT FOUND - The server has not found anything matching the requested URI (Uniform Resource Identifier).
(XHR)GET -<CDN_Path>/%20[synthetic:es6/symbol]
HTTP404: NOT FOUND - The server has not found anything matching the requested URI (Uniform Resource Identifier).
(XHR)GET - <CDN_Path>/%20[synthetic:util/defineproperty]
HTTP404: NOT FOUND - The server has not found anything matching the requested URI (Uniform Resource Identifier).
(XHR)GET - <CDN_Path>/%20[synthetic:es6/util/makeiterator]

This seems similar to the issue here: webcomponents/webcomponentsjs#869

Edge version:

Microsoft Edge 38.14393.2068.0
Microsoft EdgeHTML 14.14393

Your package.json file's main key point tti-polyfill.js. But there is no export method. So when I try to import tti-polyfill I received only empty object. How to I use tti-polyfill from Node JS.

When I changed main key from tti-polyfill.js to src/index.js then its working fine.

See https://github.com/GoogleChromeLabs/tti-polyfill/blob/master/src/activityTrackerUtils.js#L27

The uniqueId is raised only once on patch time and not on runtime, thus

beforeXHRSendCb(requestId);
and
onRequestCompletedCb(requestId)

is kinda just like
beforeXHRSendCb(1);
and
onRequestCompletedCb(1)

I've read the documentation (cited by the README).
The docs say that the recommended behavior is "Definition 4: Combining proportional leniency and lonely tasks".

However I see nowhere in the code something that detects a "lonely task" in order to ignore it, and nothing that changes the "required quiet window size" (it's always 5000ms).

Is there a plan to implement that behavior?
If not, I think it should be made clear in the README, because right now the code in this repo doesn't do exactly what the docs say it does.

There are a bunch of New fetch running logs. Can we supress these to only when a the debugMode option is true?