Add cached request count to live performance counters (#12392)

* Add support for cached request count once Timing-Allow-Origin is enabled on request response

* Add unit tests

* Fix flow

src/util/config.js

@@ -7,6 +7,7 @@ type Config = {|
   API_FONTS_REGEX: RegExp,
   API_SPRITE_REGEX: RegExp,
   API_STYLE_REGEX: RegExp,
+  API_CDN_URL_REGEX: RegExp,
   EVENTS_URL: ?string,
   SESSION_PATH: string,
   FEEDBACK_URL: string,
@@ -49,6 +50,9 @@ const config: Config = {
         // https://docs.mapbox.com/api/maps/styles/#retrieve-a-style
         return /^((https?:)?\/\/)?([^\/]+\.)?mapbox\.c(n|om)(\/styles\/v[0-9]*\/)(.*$)/i;
     },
+    get API_CDN_URL_REGEX() {
+        return /^((https?:)?\/\/)?api\.mapbox\.c(n|om)(\/mapbox-gl-js\/)(.*$)/i;
+    },
     get EVENTS_URL() {
         if (!this.API_URL) { return null; }
         if (this.API_URL.indexOf('https://api.mapbox.cn') === 0) {

src/util/live_performance.js

@@ -6,7 +6,8 @@ import {
     isMapboxHTTPStyleURL,
     isMapboxHTTPTileJSONURL,
     isMapboxHTTPSpriteURL,
-    isMapboxHTTPFontsURL
+    isMapboxHTTPFontsURL,
+    isMapboxHTTPCDNURL
 } from './mapbox.js';
 
 type LivePerformanceMetrics = {
@@ -63,19 +64,31 @@ function getCountersPerResourceType(resourceTimers) {
         for (const category in resourceTimers) {
             if (category !== 'other') {
                 for (const timer of resourceTimers[category]) {
-                    const req = `${category}RequestCount`;
                     const min = `${category}ResolveRangeMin`;
                     const max = `${category}ResolveRangeMax`;
+                    const reqCount = `${category}RequestCount`;
+                    const reqCachedCount = `${category}RequestCachedCount`;
 
                     // Resource -TransferStart and -TransferEnd represent the wall time
                     // between the start of a request to when the data is available
                     obj[min] = Math.min(obj[min] || +Infinity, timer.startTime);
                     obj[max] = Math.max(obj[max] || -Infinity, timer.responseEnd);
 
-                    if (obj[req] === undefined) {
-                        obj[req] = 0;
+                    const increment = (key) => {
+                        if (obj[key] === undefined) {
+                            obj[key] = 0;
+                        }
+                        ++obj[key];
+                    };
+
+                    const transferSizeSupported = timer.transferSize !== undefined;
+                    if (transferSizeSupported) {
+                        const resourceFetchedFromCache = (timer.transferSize === 0);
+                        if (resourceFetchedFromCache) {
+                            increment(reqCachedCount);
+                        }
                     }
-                    ++obj[req];
+                    increment(reqCount);
                 }
             }
         }
@@ -86,11 +99,8 @@ function getCountersPerResourceType(resourceTimers) {
 function getResourceCategory(entry: PerformanceResourceTiming): string {
     const url = entry.name.split('?')[0];
 
-    // Code may be hosted on various endpoints: CDN, self-hosted,
-    // from unpkg... so this check doesn't include mapbox HTTP URL
-    if (url.includes('mapbox-gl.js')) return 'javascript';
-    if (url.includes('mapbox-gl.css')) return 'css';
-
+    if (isMapboxHTTPCDNURL(url) && url.includes('mapbox-gl.js')) return 'javascript';
+    if (isMapboxHTTPCDNURL(url) && url.includes('mapbox-gl.css')) return 'css';
     if (isMapboxHTTPFontsURL(url)) return 'fontRange';
     if (isMapboxHTTPSpriteURL(url)) return 'sprite';
     if (isMapboxHTTPStyleURL(url)) return 'style';
@@ -122,6 +132,8 @@ export function getLivePerformanceMetrics(data: LivePerformanceData): LivePerfor
     const connection = window.navigator.connection || window.navigator.mozConnection || window.navigator.webkitConnection;
     const metrics = {counters: [], metadata: [], attributes: []};
 
+    // Please read carefully before adding or modifying the following metrics:
+    // https://github.com/mapbox/gl-js-team/blob/main/docs/live_performance_metrics.md
     const addMetric = (arr, name, value) => {
         if (value !== undefined && value !== null) {
             arr.push({name, value: value.toString()});

src/util/mapbox.js

@@ -230,6 +230,10 @@ export function isMapboxHTTPURL(url: string): boolean {
     return config.API_URL_REGEX.test(url);
 }
 
+export function isMapboxHTTPCDNURL(url: string): boolean {
+    return config.API_CDN_URL_REGEX.test(url);
+}
+
 export function isMapboxHTTPStyleURL(url: string): boolean {
     return config.API_STYLE_REGEX.test(url) && !isMapboxHTTPSpriteURL(url);
 }

test/unit/util/mapbox.test.js

@@ -65,6 +65,17 @@ test("mapbox", (t) => {
         t.end();
     });
 
+    t.test('.isMapboxHTTPCDNURL', (t) => {
+        t.ok(mapbox.isMapboxHTTPCDNURL('https://api.mapbox.com/mapbox-gl-js/v2.11.0/mapbox-gl.js'));
+        t.ok(mapbox.isMapboxHTTPCDNURL('https://api.mapbox.com/mapbox-gl-js/v2.11.0/mapbox-gl.css'));
+        t.ok(mapbox.isMapboxHTTPCDNURL('https://api.mapbox.com/mapbox-gl-js/v2.11.0-beta.1/mapbox-gl.js'));
+        t.ok(mapbox.isMapboxHTTPCDNURL('https://api.mapbox.cn/mapbox-gl-js/v2.11.0/mapbox-gl.js'));
+        t.notOk(mapbox.isMapboxHTTPCDNURL('https://api.mapbox.com/other-project/v2.11.0/mapbox-gl.js'));
+        t.notOk(mapbox.isMapboxHTTPCDNURL('https://api.mapbox.cn/v4/mapbox.mapbox-streets-v8.json'));
+        t.notOk(mapbox.isMapboxHTTPCDNURL('http://example.com/mapbox-gl-js/v2.11.0/mapbox-gl.js'));
+        t.end();
+    });
+
     t.test('.isMapboxHTTPSpriteURL', (t) => {
         t.ok(mapbox.isMapboxHTTPSpriteURL('https://api.mapbox.com/styles/v1/mapbox/streets-v11/sprite@2x.json'));
         t.ok(mapbox.isMapboxHTTPSpriteURL('https://api.mapbox.com/styles/v52/mapbox/streets-v11/sprite@2x.json'));