Fix Lighthouse timeout on pages with video players

[chosak]

Currently, Lighthouse will consistently timeout when run against any website page that uses our VideoPlayer module. This is because of a potential infinite loop in its JS code that can be triggered by a certain Lighthouse test. This commit fixes that bug and allows for successful audits of these pages with Lighthouse.

See here for an example of a failing Lighthouse test on one of these pages.

The reason for the failures is down in the Lighthouse code -- currently LH runs an audit called redirects-http that verifies that a request to a URL with HTTP always gets redirected to HTTPS. Instead of using a HEAD request or something similar to check this, it tries making the request in Chrome. To speed up what is an expected redirect, the request disables the loading of certain assets in Chrome, including images.

Image loading being disabled seems to trigger some error handling code we have in the VideoPlayer: if the video thumbnail image fails to load, we load a default thumbnail. Currently, though, this is implemented with the 'error' listener of the <img> tag, which means that if all image loads are disabled, there will be an infinite loop of errors:

• Try loading the correct thumbnail; this fails so
• Error handler tries to load the default thumbnail; this fails so
• Error handler tries to load the default thumbnail; this fails so
• Error handler tries to load the default thumbnail; this fails so
• etc.

This causes Lighthouse to timeout when run in the console and essentially hang forever when run in the browser.

This commit changes the logic so that we don't try loading the default thumbnail if we've already tried and failed to do so once.

How to test this PR

To test this change, first verify that Lighthouse hangs against production:

npx lighthouse https://www.consumerfinance.gov/about-us/blog/economic-impact-payment-prepaid-card/ --only-audits=redirects-http

Then run a local server with this change (first build using yarn run gulp scripts) and confirm that it works properly:

npx lighthouse http://localhost:8000/about-us/blog/economic-impact-payment-prepaid-card/ --only-audits=redirects-http

Notes

Edit to add: it looks like redirects-http is scheduled to be removed in the next major version of Lighthouse.

Checklist

• PR has an informative and human-readable title
  • PR titles are used to generate the change log in releases; good ones make that easier to scan.
  • Consider prefixing, e.g., "Mega Menu: fix layout bug", or "Docs: Update Docker installation instructions".
• Changes are limited to a single goal (no scope creep)
• Code follows the standards laid out in the CFPB development guidelines
• Future todos are captured in comments and/or tickets

[anselmbradford]

Works as described and looks like an elegant solution. Full-stack Andy 🦸‍♂️