GoogleChrome / web-vitals

Essential metrics for a healthy site.
https://web.dev/vitals
Apache License 2.0
7.59k stars 415 forks source link

v3.3.2 throw error in IE9. #350

Closed laoboxie closed 1 year ago

laoboxie commented 1 year ago

web-vitals@3.3.2 throw error in IE9. The error is caused by performance.now() lib: https://unpkg.com/web-vitals@3.3.2/dist/web-vitals.iife.js

images: image image

tunetheweb commented 1 year ago

Note this was introduced for TTFB in v2.1.2.

Given the limited support for IE9 (TTFB and some form of FID), and other older browsers, I'm wondering if we should just recommended to wrap this in a module script to avoid issues with older browsers:

<!-- Append the `?module` param to load the module version of `web-vitals` -->
<script type="module">
  import {onCLS, onFID, onLCP} from 'https://unpkg.com/web-vitals@3?module';

  onCLS(console.log);
  onFID(console.log);
  onLCP(console.log);
</script>

For those that really want TTFB for these older browsers (as the only semi-reliable metric for those browsers) this could be reported with a simple performance.timing lookup in an additional <script nomodule> element:

<script nomodule>
if (performance && performance.timing) {
  console.log(performance.timing.responseStart - performance.timing.navigationStart;);
}
</script>

Either way, we should update the docs to stop indicating that IE9 is supported when in fact it is not.

philipwalton commented 1 year ago

I can't reproduce this error when testing on IE9 via browserstack.com. @laoboxie can you clarify exactly what code you're running that's causing this error?

I'm trying the following, which doesn't error for me in IE9.

<script>
(function () {
  var script = document.createElement('script');
  script.src = 'https://unpkg.com/web-vitals@3.3.2/dist/web-vitals.iife.js';
  script.onload = function () {
    webVitals.getTTFB(console.log);
  };
  document.head.appendChild(script);
})();
</script>

Also, when I look at the code, I do not believe it's possible for the part of the code that calls performance.now() to be reached in IE9 because that line is within a conditional that only runs if the browser finds a navigation performance entry (which would not be true in IE9). See: https://github.com/GoogleChrome/web-vitals/blob/1d2c191e6763ea3ebeef05e9141847dbce554228/src/onTTFB.ts#L71-L82

So unless I'm missing something then I think the documentation is correct in that the onTTFB() function doesn't produce a result in IE9 but it also doesn't error:

The web-vitals code has been tested and will run without error in all major browsers as well as Internet Explorer back to version 9.

And I think it's fine to continue to make this claim because I do think we want people to be able to run this code anywhere without worry that it will error and potentially break other critical functionality on their site.

tunetheweb commented 1 year ago

Closing this as no further updates heard back. Feel free to reopen if necessary.