Webstaff: Offline UI Doesn't Work When Offline

[Jason Stephenson]

Evergreen Master (986a2d011)
OpenSRF Master
PostgreSQL 9.5.11
O/S Ubuntu 16.04.3 (latest updates)
Browser Chromium Version 64.0.3282.140 (Official Build) Built on Ubuntu , running on Ubuntu 17.10 (64-bit)

While testing bug 1751318, I discovered that offline mode doesn't work when you're actually offline. For it to work for me, I had to go to offline mode while everything was working, then hit Check out, and click through the warning. At that point, I could kill Apache or the network connection, and offline would work, so long as I did not try to reload the page. Reloading the page or attempting to enter offline mode while offline result in the "This site can't be reached" message from Chromium.

It didn't matter how many times I went to offline circ while connected, or what I tried to do while offline. I even quit the browser a couple of times and tried again. Enabling Chromium's own offline abilities did not seem to help, either.

As an additional data point, I get the following console errors when opening the offline UI while connected:

vendor.bundle.js:6 ReferenceError: q is not defined
    at offline.js:850
    at Array.filter (<anonymous>)
    at offline.js:849
    at Object.o [as forEach] (vendor.bundle.js:6)
    at offline.js:848
    at u (vendor.bundle.js:6)
    at vendor.bundle.js:6
    at h.$digest (vendor.bundle.js:6)
    at vendor.bundle.js:6
    at r (vendor.bundle.js:6) "Possibly unhandled rejection: {}"
(anonymous) @ vendor.bundle.js:6
(anonymous) @ vendor.bundle.js:6
l @ vendor.bundle.js:6
$digest @ vendor.bundle.js:6
(anonymous) @ vendor.bundle.js:6
r @ vendor.bundle.js:6
(anonymous) @ vendor.bundle.js:6
setTimeout (async)
c.defer @ vendor.bundle.js:6
$evalAsync @ vendor.bundle.js:6
(anonymous) @ vendor.bundle.js:6
c @ vendor.bundle.js:6
h @ vendor.bundle.js:6
n @ vendor.bundle.js:6
r.Ic @ vendor.bundle.js:38
Z @ vendor.bundle.js:38
F.Vf @ vendor.bundle.js:38
j @ vendor.bundle.js:38
Promise.then (async)
yl @ vendor.bundle.js:38
P @ vendor.bundle.js:38
J @ vendor.bundle.js:38
G @ vendor.bundle.js:38
F.Qg @ vendor.bundle.js:38
a @ vendor.bundle.js:38
u @ vendor.bundle.js:6
(anonymous) @ vendor.bundle.js:6
$digest @ vendor.bundle.js:6
(anonymous) @ vendor.bundle.js:6
r @ vendor.bundle.js:6
(anonymous) @ vendor.bundle.js:6
setTimeout (async)
c.defer @ vendor.bundle.js:6
$evalAsync @ vendor.bundle.js:6
(anonymous) @ vendor.bundle.js:6
c @ vendor.bundle.js:6
then @ vendor.bundle.js:6
K @ vendor.bundle.js:38
Y @ vendor.bundle.js:38
G @ vendor.bundle.js:38
(anonymous) @ vendor.bundle.js:38
r.Ic @ vendor.bundle.js:38
Z @ vendor.bundle.js:38
F.Vf @ vendor.bundle.js:38
j @ vendor.bundle.js:38
Promise.then (async)
yl @ vendor.bundle.js:38
P @ vendor.bundle.js:38
J @ vendor.bundle.js:38
G @ vendor.bundle.js:38
(anonymous) @ vendor.bundle.js:38
vendor.bundle.js:6 TypeError: Cannot read property 'shortname' of undefined
    at offline.js:141
    at Object.o [as forEach] (vendor.bundle.js:6)
    at offline.js:139
    at u (vendor.bundle.js:6)
    at vendor.bundle.js:6
    at h.$digest (vendor.bundle.js:6)
    at h.$apply (vendor.bundle.js:6)
    at u (vendor.bundle.js:6)
    at v (vendor.bundle.js:6)
    at XMLHttpRequest.x.onload (vendor.bundle.js:6) "Possibly unhandled rejection: {}"
(anonymous) @ vendor.bundle.js:6
(anonymous) @ vendor.bundle.js:6
l @ vendor.bundle.js:6
$digest @ vendor.bundle.js:6
$apply @ vendor.bundle.js:6
u @ vendor.bundle.js:6
v @ vendor.bundle.js:6
x.onload @ vendor.bundle.js:6
XMLHttpRequest.send (async)
(anonymous) @ vendor.bundle.js:6
g @ vendor.bundle.js:6
u @ vendor.bundle.js:6
u @ vendor.bundle.js:6
(anonymous) @ vendor.bundle.js:6
$digest @ vendor.bundle.js:6
$apply @ vendor.bundle.js:6
(anonymous) @ vendor.bundle.js:6
r @ vendor.bundle.js:6
(anonymous) @ vendor.bundle.js:6
setTimeout (async)
c.defer @ vendor.bundle.js:6
o @ vendor.bundle.js:6
fetch_org_after_tree_exists @ offline.js:727
(anonymous) @ offline.js:731
(anonymous) @ vendor.bundle.js:6
r @ vendor.bundle.js:6
(anonymous) @ vendor.bundle.js:6
setTimeout (async)
c.defer @ vendor.bundle.js:6
o @ vendor.bundle.js:6
fetch_org_after_tree_exists @ offline.js:727
(anonymous) @ offline.js:736
s @ vendor.bundle.js:6
(anonymous) @ vendor.bundle.js:6
link @ vendor.bundle.js:11
(anonymous) @ vendor.bundle.js:6
kt @ vendor.bundle.js:6
h @ vendor.bundle.js:6
a @ vendor.bundle.js:6
(anonymous) @ vendor.bundle.js:6
(anonymous) @ vendor.bundle.js:6
i @ vendor.bundle.js:6
p @ vendor.bundle.js:6
c @ vendor.bundle.js:11
$broadcast @ vendor.bundle.js:6
(anonymous) @ vendor.bundle.js:11
u @ vendor.bundle.js:6
(anonymous) @ vendor.bundle.js:6
$digest @ vendor.bundle.js:6
$apply @ vendor.bundle.js:6
(anonymous) @ vendor.bundle.js:6
a @ vendor.bundle.js:6
r @ vendor.bundle.js:6
lt @ vendor.bundle.js:6
ut @ vendor.bundle.js:6
(anonymous) @ vendor.bundle.js:6
l @ jquery.min.js:2
c @ jquery.min.js:2
setTimeout (async)
(anonymous) @ jquery.min.js:2
u @ jquery.min.js:2
fireWith @ jquery.min.js:2
fire @ jquery.min.js:2
u @ jquery.min.js:2
fireWith @ jquery.min.js:2
ready @ jquery.min.js:2
_ @ jquery.min.js:2
vendor.bundle.js:6 TypeError: t.concat is not a function
    at vendor.bundle.js:38
    at fn (eval at compile (vendor.bundle.js:6), <anonymous>:4:379)
    at o (vendor.bundle.js:6)
    at h.$digest (vendor.bundle.js:6)
    at h.$apply (vendor.bundle.js:6)
    at u (vendor.bundle.js:6)
    at v (vendor.bundle.js:6)
    at XMLHttpRequest.x.onload (vendor.bundle.js:6)
(anonymous) @ vendor.bundle.js:6
(anonymous) @ vendor.bundle.js:6
$digest @ vendor.bundle.js:6
$apply @ vendor.bundle.js:6
u @ vendor.bundle.js:6
v @ vendor.bundle.js:6
x.onload @ vendor.bundle.js:6
XMLHttpRequest.send (async)
(anonymous) @ vendor.bundle.js:6
g @ vendor.bundle.js:6
u @ vendor.bundle.js:6
u @ vendor.bundle.js:6
(anonymous) @ vendor.bundle.js:6
$digest @ vendor.bundle.js:6
$apply @ vendor.bundle.js:6
(anonymous) @ vendor.bundle.js:6
r @ vendor.bundle.js:6
(anonymous) @ vendor.bundle.js:6
setTimeout (async)
c.defer @ vendor.bundle.js:6
o @ vendor.bundle.js:6
fetch_org_after_tree_exists @ offline.js:727
(anonymous) @ offline.js:731
(anonymous) @ vendor.bundle.js:6
r @ vendor.bundle.js:6
(anonymous) @ vendor.bundle.js:6
setTimeout (async)
c.defer @ vendor.bundle.js:6
o @ vendor.bundle.js:6
fetch_org_after_tree_exists @ offline.js:727
(anonymous) @ offline.js:736
s @ vendor.bundle.js:6
(anonymous) @ vendor.bundle.js:6
link @ vendor.bundle.js:11
(anonymous) @ vendor.bundle.js:6
kt @ vendor.bundle.js:6
h @ vendor.bundle.js:6
a @ vendor.bundle.js:6
(anonymous) @ vendor.bundle.js:6
(anonymous) @ vendor.bundle.js:6
i @ vendor.bundle.js:6
p @ vendor.bundle.js:6
c @ vendor.bundle.js:11
$broadcast @ vendor.bundle.js:6
(anonymous) @ vendor.bundle.js:11
u @ vendor.bundle.js:6
(anonymous) @ vendor.bundle.js:6
$digest @ vendor.bundle.js:6
$apply @ vendor.bundle.js:6
(anonymous) @ vendor.bundle.js:6
a @ vendor.bundle.js:6
r @ vendor.bundle.js:6
lt @ vendor.bundle.js:6
ut @ vendor.bundle.js:6
(anonymous) @ vendor.bundle.js:6
l @ jquery.min.js:2
c @ jquery.min.js:2
setTimeout (async)
(anonymous) @ jquery.min.js:2
u @ jquery.min.js:2
fireWith @ jquery.min.js:2
fire @ jquery.min.js:2
u @ jquery.min.js:2
fireWith @ jquery.min.js:2
ready @ jquery.min.js:2
_ @ jquery.min.js:2

I suspect the branch from bug 1739803 of causing this, but I have not rolled back, yet, to verify that.

[Jason Stephenson (jstephenson)]

Maybe I just don't understand how this works. I get the same behavior if I roll back to commit 664608a1, the commit before webpack went in.

[Jason Stephenson (jstephenson)]

So, even after going through all of this: http://docs.evergreen-ils.org/reorg/3.0/circulation/_introduction_2.html

It's still not working for me when offline. Even at the earlier commit. I'm going to try again with master at HEAD.

[Jason Stephenson (jstephenson)]

I think it may have something to do with how Chromium is accessing local storage.

Here's a screen shot from when it is able to communicate with the server.

[Jason Stephenson (jstephenson)]

Here's a screenshot from when it can't communicate with the server. Notice that the hostname for local storage is missing and no service workers are shown.

[Jason Stephenson (jstephenson)]

After looking at this briefly with Kathy Lussier, I suspect the problem may be related to my Evergreen server NOT having a DNS entry. I'm accessing it via a hosts file entry. I will try configuring dnsmasq for my laptop to see if that makes a difference.

I'm not ready to mark this bug Invalid just yet.

[Jason Stephenson (jstephenson)]

I configured dnsmasq to rule out my site not being able to be looked up by DNS. If I dig xenial.sigiocom, I get a DNS reply from dnsmasq with the proper IP address.

I tried again by following the steps to enable offline mode. Everything worked so long as my laptop could talk to the virtual machine. If I did anything to break the IP connection, either on the VM or on the laptop itself, I got either a site can't be reached, or a "there is no network" message from Chromium.

I tried from Firefox 58.0.2, but I could not even login.

[Jason Stephenson (jstephenson)]

The Firefox login issue can be resolved by going to https://host.domain.tld:7682/ This appears to be necessary if you aren't using a proxy. I believe Firefox stores certificate exceptions via host and port. Using a "valid" certificate avoids this.

I was able to get offline mode to work by deleting the IndexedDB for my site in Chromium and then logging into the web staff client again.

I have not, however, been able to get Register Patron to load in offline mode, even after editing a patron in the web staff client, even after registering a patron.

The above is still with the latest master, though I had applied an unrelated branch.

[Jason Stephenson (jstephenson)]

Never mind the "getting it to work" in the previous comment.

If I shut the vm down and try to get offline, I still get the "Site can't be reached" response, and that's going directly to offline: https://xenial.sigio.com/eg/staff/offline-interface

Where xenial.sigio.com is my local DNS entry for the test VM.

So, still busted for me.

[Kathy Lussier (klussier)]

I can confirm the issue Jason reported in comment #7 where the Register Patron interface is no longer loading in offline mode in either Firefox or Chrome. I see the following errors in the Console:

Possibly unhandled rejection: {"data":null,"status":-1,"config":{"method":"GET","transformRequest":[null],"transformResponse":[null],"jsonpCallbackParam":"callback","url":"/cgi-bin/offline/offline.pl?1520609301044&action=status&status_type=sessions&org=4&ws=BR1-mlnc1&wc=1&ses=undefined","headers":{"Accept":"application/json, text/plain, */*"}},"statusText":"","xhrStatus":"error"}

ReferenceError: q is not defined
    at offline.js:850
    at Array.filter (<anonymous>)
    at offline.js:849
    at Object.o [as forEach] (vendor.bundle.js:6)
    at offline.js:848
    at u (vendor.bundle.js:6)
    at vendor.bundle.js:6
    at h.$digest (vendor.bundle.js:6)
    at vendor.bundle.js:6
    at r (vendor.bundle.js:6) "Possibly unhandled rejection: {}"

This interface previously worked in offline mode, so this is a regression. Should this be filed as a separate bug?

I haven't shut down my VM entirely, but I have turned off Apache services. When I do so, I'm able to successfully retrieve the offline interface.

[Jason Stephenson (jstephenson)]

Grr. I guess marked bug 1754894 a duplicate of this one too soon, but I believe they are related.

What I saw was that the test 24-offline-all-assets.t consistently fails when npm build is used and not npm build-prod. When I use the latter, it seems to work. I thought resolving that would resolve this one, but no, I still cannot use the offline-interface in Chromium when the site is not accessible.

I am beginning to think that this is a Chromium vs. Chrome difference. I will try again with Firefox and see what happen.s

[Jason Stephenson (jstephenson)]

Sorry for all of the noise, but I'm going to mark this bug as invalid.

I can access the offline-interface with Firefox as expected when the server is down.

This simply doesn't work in Chromium.