Merge pull request #4537 from alphagov/rum-cache-state

Report cache status to RUM

CHANGELOG.md

@@ -9,6 +9,7 @@
 
 ## Unreleased
 
+* Report cache status to RUM ([PR #4537](https://github.com/alphagov/govuk_publishing_components/pull/4537))
 * Add type option to component wrapper helper ([PR #4536](https://github.com/alphagov/govuk_publishing_components/pull/4536))
 * **BREAKING** Change devolved nations component type option ([PR #4535](https://github.com/alphagov/govuk_publishing_components/pull/4535))
 * **BREAKING** Add component wrapper helper to intervention component ([PR #4378](https://github.com/alphagov/govuk_publishing_components/pull/4378))

app/assets/javascripts/govuk_publishing_components/rum-custom-data.js

@@ -0,0 +1,18 @@
+(function () {
+  /* global LUX, performance */
+  if (typeof LUX === 'undefined') { return }
+
+  const navigationPerformance = performance.getEntriesByType('navigation')[0]
+  if (!navigationPerformance) { return }
+
+  // As per RFC 147[1], this adds in monitoring of the type of HTTP protocol that
+  // is used when a browser loads a page.
+  // [1]: https://github.com/alphagov/govuk-rfcs/pull/148
+  LUX.addData('http-protocol', navigationPerformance.nextHopProtocol)
+
+  const serverTiming = navigationPerformance.serverTiming
+  if (serverTiming) {
+    const cacheState = serverTiming.find(entry => ['cacheHit', 'cacheMiss'].includes(entry.name))
+    if (cacheState) { LUX.addData('cache', cacheState.name) }
+  }
+}())

app/assets/javascripts/govuk_publishing_components/vendor/lux/lux-measurer.js

@@ -157,40 +157,3 @@ if (
     LongTaskObserver.observe({ type: ["longtask"] });
   } catch (e) {}
 }
-
-// As per RFC 147[1], this adds in monitoring of the type of HTTP protocol that
-// is used when a browser loads a page.
-//
-// The User Timing API (aka window.performance) is used to record the data - to
-// avoid the use of this from breaking the JavaScript for the small number of
-// browsers that don't support it, it's been wrapped in a try/catch block plus a
-// couple of checks to prevent "is not defined" errors.
-//
-// Because the `nextHopProtocol` isn't immediately available - it seems to need
-// a request to be made before it's populated - we need to wait for the
-// `DOMContentReady` event before we can see what the HTTP version is.
-//
-// [1]: https://github.com/alphagov/govuk-rfcs/pull/148
-
-var measureHTTPProtocol = function () {
-  var getEntriesByType = performance.getEntriesByType('navigation')
-
-  if (typeof getEntriesByType !== 'undefined' && getEntriesByType.length > 0) {
-    var httpProtocol = getEntriesByType[0].nextHopProtocol
-    LUX.addData("http-protocol", httpProtocol)
-  }
-}
-
-try {
-  if (typeof performance !== 'undefined' && typeof performance.getEntriesByType !== 'undefined') {
-    if (document.readyState === 'complete') {
-      measureHTTPProtocol()
-    } else {
-      window.addEventListener('load', function() {
-        measureHTTPProtocol()
-      })
-    }
-  }
-} catch (e) {
-  console.error('Error in LUX reporting the HTTP protocol (%s):', window.location, e)
-}

app/views/govuk_publishing_components/components/_layout_for_public.html.erb

@@ -65,6 +65,7 @@
     <title><%= title %></title>
 
     <%= javascript_include_tag "govuk_publishing_components/vendor/lux/lux-measurer", { async: true } %>
+    <%= javascript_include_tag "govuk_publishing_components/rum-custom-data", type: "module" %>
     <%= javascript_include_tag "govuk_publishing_components/rum-loader",
       {
         async: true,

spec/support/jasmine-browser.json

@@ -7,6 +7,7 @@
     "govuk_publishing_components/analytics-*.js",
     "govuk_publishing_components/load-analytics-*.js",
     "govuk_publishing_components/vendor/lux/lux-measurer-*.js",
+    "govuk_publishing_components/rum-custom-data-*.js",
     "component_guide/accessibility-test-*.js",
     "component_guide/filter-components-*.js",
     "component_guide/audit-filter-*.js"