Jira Dashboard gadgets fail to load on Chrome 97/98/99 when caching is enabled in browser

Issue Summary

On Chrome 97 (reproduced with Version 97.0.4692.71), Jira dashboard gadgets will fail to load (sometimes intermittently).  Often this only occurs if cache is disabled in the browser console but this can also occur under different circumstances depending on latency and browser configuration.  

Problem is caused by a race condition caused by the assumption about the timing of attaching the event listener and triggering the event. A recent change in Chrome broke that assumption.

Steps to Reproduce

1. Open Chrome 97.0.4692.71 (released on Jan 4th 2022, Chrome blog post)
2. Disable cache, you can do this by opening the Chrome console, click the network tab and check disable cache.
3. Open any Jira dashboard with gadgets. You may need to refresh. Note gadgets fail to load.

Expected Results

Dashboard gadgets load correctly. Caching settings should not impact Jira's ability to load gadgets. 

Actual Results

Dashboard gadgets fail to load. HAR capture doesn't show any errors either but notably requests to /plugins/servlet/gadgets/makeRequest are not seen in the HAR capture.

Screenshot 1, cache disabled gadgets don't load

When cache is enabled, page loads as expected. This is not always the case, as there are other variables including internet speed that seems to impact whether or not the gadgets load. 

Workaround

Do not use this workaround on the 8.21.1 or later, otherwise gadgets may be shown duplicated on dashboards!

There is a way to fix race condition, you can do it by manually adding the snippet below (credit to 5bb89677a8a8) to Jira Announcement banner or other UserScript plugins.

Step for Jira:

1. Click on the Cog icon on the upper right corner in Jira, select System, Click on Go Announcement Banner on the left side, Enter Edit Announcement Banner page.
2. Paste the following script into the announcement banner page:

   <script>
   // Workaround for JRASERVER-73196
   jQuery(function() {
     setTimeout(function() {
       const dashboardEl = document.getElementsByTagName('dashboard')[0];
       if (dashboardEl && document.getElementById('dashboard').classList.contains('initializing')) {
         AG.DashboardManager.setup({
           layouts: JSON.parse(dashboardEl.getAttribute('layouts')).layouts,
           params: JSON.parse(dashboardEl.getAttribute('params'))
         });
         console.log("Workaround for JRASERVER-73196 in announcement banner is done");
       }
     }, 100);
   });
   </script> 

Or you can also switch to a different browser