n-polyfill-io

Config and monitoring for next's use of polyfill.io

API

• callbackName - the name of the callback function used by next's client side code to respond to the polyfill bundle's arrival
• getQueryString(opts) - get a query string for a polyfill service request. Options are all booleans
  • enhanced - whether or not this polyfill url is used to serve the enhanced experience. This turns on a lot of features e.g. includes callback=blah in the url
  • withRum - collects RUM data for the polyfill service
  • excludeSymbol - excludes Symbol and related polyfills from the bundle
• getAllQueryStrings() - returns a map of all polyfill query strings this component is capable of building

Fallback

This component also deploys fallback bundles that ft.com can load in the eventuality that the polyfill service's app goes down, as follows:

When creating a tagged release of this component

1. For each combination of variants (as detailed in getQueryString() above) an equivalent polyfill bundle is created by building a query string from those options but appending &ua=next-fallback. This ua, unrecognised by polyfill.io, will trigger the &unknown=polyfill option in the qs to take effect, i.e. a bundle containing all polyfills requested will be built.
2. These bundles are sent to the ft-next-n-ui-prod bucket on s3 (replicated at ft-next-n-ui-prod-us too). The paths reflect the variants combination e.g. {enhanced: true, withRUM: true} will create a bundle which is saved to /polyfill/fallback/enhanced:withRUM.js. The first line of this bundle will contain a timestamp of when it was created

When the component is consumed by our apps

Each polyfill url output in the page will have e.g. &next-variant=enhanced appended to the url, to indicate which variant was used to generate that url. The template consumes data generated by n-express, which gets the data relating to polyfill urls from n-polyfill-io.

When the polyfill app is unhealthy

In next-geebee's vcl, https://github.com/Financial-Times/next-geebee/pull/19/files, if the polyfill service is unhealthy the backend is pointed at one or other of the n-ui s3 buckets, depending on region, and the url is rewritten by reading the next-variant query parameter and using that to generate a url such as /polyfill/fallback/enhanced:withRUM.js. This retrieves the file from s3 and serves it to the browser with a relatively short cache time so that when the service is healthy again the more efficient bundles it generates are used as soon as possible.

TODO

• A lambda function should carry out the deploy task described above on a daily basis to make sure our fallback bundles reflect any bugfixes and new features released in the polyfill service.
• Versioning of the bundle in s3