MultiSelect - ExternalError: [object Event]

[rhurlbatt]

I have been chasing a random bug that has been appearing in my app for some time now and today I found the first meaning entry in the app logs. I have not been able to reproduce it but I am almost 100% confident that it happens when the app is in little to no internet connection.

ExternalError: [object Event]
at app/anvil_extras/utils/_component_helpers.py, line 72
called from app/anvil_extras/utils/_component_helpers.py, line 43
called from app/anvil_extras/MultiSelectDropDown/__init__.py, line 37
# plus my form references

The relevant line in the code is

    def _wait_for_load(self, tag):
        if not tag.get("src"):
            return

        def do_wait(res, rej):
            tag.onload = res
            tag.onerror = rej

        p = _Promise(do_wait)
        anvil.js.await_promise(p)  # This is the offending line 72

Presumably this is failing since there is no internet connection.
Does anyone have any pointers on how to deal with this?

[s-cork]

Does your multi-select component appear in a sub form?
i.e. a user might be online, do some stuff, and not yet have interacted with a MultiSelectDropDown component
Then later on they might be offline and they try to navigate to it?

Just a theory - since the multiselectdropdown only loads the javascript it needs on demand

[rhurlbatt]

Yes it will almost certainly be the case.
The Multiselects are scattered through out and the forms that have them are either loaded in an alert or via routing.

[s-cork]

2 suggestions:

You could import the MultiSelect component earlier

or

You could include the relevant cdn in your native libraries (css and js files)
https://www.jsdelivr.com/package/npm/bootstrap-select?version=1.13.18
(you can also add async to the script tag which will mean it will load without affect the startup time of the first page (given that you don't need it on the first page))
and then we can change the component to use that javascript if it's loaded already