Knockout observable about an object property with a method value fails on IOS 11.3 (FIX)

Question

Our product failed on IOS 11.3 with a generic, "problem repaetaed occured on ". It would work fine when connected to a remote debugger on MAC making it hard to find out the cause. I have invested considerable time on it to find out the actual cause. It was hard because we use a huge internal framework written with knockout.js which is minified and put on an IOT device accesses by a captive network provided by our own captive portal. Debugging here is almost impossible as running the server on debug mode exhibits a different server behavior.

I wanted to publish this, just in case someone has/will have a similar problem.

We have a side navigation pane of hyperlinks on our webapp which are populated by an observable, to which data is attached by calling another view-model module like so.

 mainNavigationSection(
     createNavigationMenuVm(
        mainTree.views() || [],
        newSelectedFolder));

The view-model module being called inside has an observable that has required data in it. Thus, we have mainNavigationSection() observable attached with an object with a property value of a function whose construct has the required data in knockout parameter _latestValue. IOS 11.3 somehow fails to interpret this when such an observable is called inside template.

naviagtionbar.jade

li(data-bind="template: { name: 'navigation.navigationSection-jade', data: mainNavigationSection() }", class="css-treeview")

navigation.navigationSection.jade

ul(data-bind="foreach: navigationItems")
// ko template: { name: 'navigation.navigationItem-jade', data: $data }
// /ko

When the domain is loaded on an IOS 11.3 device, it breaks here and tries to reload the page and finally gives up with a generic message, "problem repeatedly occured on ".

FIX Better to say it is a band-aid instead. The actual fix need to be made on IOSwebkit side.

When I change the observable to be attached like so, everything works fine.

var navModel = createNavigationMenuVm(
                mainTree.views() || [],
                newSelectedFolder);
var navMenu = {
    navigationItems: navModel.navigationItems._latestValue
};
mainNavigationSection(navMenu);

Hope this helps someone, until apple fixes their webkit.