API calls on cached page before websocket handshake causes 401/403s, UI breaks

[foosel]

Problem

There's a race condition in the following scenario:

• browser has cached version of UI, is closed
• server is (re)started, UI API Key changes
• browser is opened, loads UI from cache including old UI API Key
• both connection to websocket and initial settings GET are triggered at nearly the same time

If settings request now arrives at server before the initial websocket handshake can cause the UI API Key to be updated, the settings request responds with a 401 and the viewmodels are consequently never bound in the initial application startup.

Looks like this on the JS console:

To reproduce for debugging:

• load UI as usual

• in JS console set breakpoint here

• reload

• once breakpoint is hit, execute this in the JS console:

  $.ajaxSetup({headers:{"X-Api-Key": "invalid"}});

• continue execution

Solution

Make sure settings GET is only run AFTER initial handshake with server has completed and ensured a valid UI API Key. Same also holds true for the onStartupComplete view model callback (causes the other 401's in the screenshot above).

Affected versions

all