Ractive js not working on iOS 9 Safari - iPad & iPhone

[lubomirblazekcz]

Hello,

I found a critical bug with ractive js on iOS 9 Safari. The problem is that the page can't be loaded and keeps refreshing until Safari get message "A problem repeatedly occurred on page"

Try some of the examples on http://examples.ractivejs.org/, some of them have problems with loading, eg.: http://examples.ractivejs.org/illustration

This problem occurs on heavy load applications with lot of code in template. Our application has 1110 rows in template and it fails to load it. But if we limit it on 300 it works.

Any help is appreciated, I spent some time on debuging this and it's only happening on iOS 9 devices. On iOS 8 devices it's working, but the loading is extremely long.

[fskreuz]

@ceremcem If it's "5" and not "5S", we might need to know the OS and Safari version. I think Apple skipped updates on those devices so it might not have the latest and greatest stuff (I might be wrong. it's probably iOS 11 news I read). Stack trace would be nice too. 😄

[evs-chris]

Are you sure there's nothing else being parsed on the phone? You could try using the runtime-only build, connecting with developer tools (is that a thing for ios safari?), and seeing if anything blows up. I haven't seen any problems that weren't related to big parsing on phones as yet.

[evs-chris]

One thing that just occurred to me - have you recently moved to 0.9? Safari on an iphone 5 may be old enough that it requires polyfills, which are in v0.9-dev but require including the polyfills file for 0.9.0-0.9.2. I'm going to be cutting 0.9.3 soon(tm), so that will fix it if it's a polyfill issue.

[ceremcem]

@fskreuz I don't have an Iphone either, so let me grab someone's

@evs-chris I'm pretty sure there is nothing left (except some little components. Would they hurt? ). Again, I need to grab someone's IPhone 5 first. (Would it be reliable to redirect the console into some div in the page so that I could ask users copy and paste the console output to me?)

Yes, I'm using 0.9.2 currently. Days ago I added "babel-polyfill": "^6.23.0" into my builds so that the application can be viewed on my old Android phone (which was crashing because Object.assign is not a function). Wouldn't it suffice already?

[evs-chris]

I think the babel polyfills should cover it. If there's no other good way to debug, then yes, loading up a div or pre and a console proxy that just dumps into it is probably as close as you're going to get to debugging. I don't know how reliable that will be, but it should at least give you console messages that might hint at what's happening. If you can wrap your main ractive instantiation in a try catch with a console log on error, that would probably help too (may even get a stacktrace).

As far as architecture with lightening the main bundle, the only thing I've seen that does that in a reasonably easy way is webpack. I haven't poked at browserify too much, but there may be a way to do code-splitting there too. I'm slowly working on an example app and architecture that will be integrated into the playground as a sort of app template - kinda like svelte's repl.

[ceremcem]

Here is my progress so far:

I redirected console to a pre and got the following output on Iphone5s:

You're running Ractive 0.9.3 in debug mode - messages will be printed to the console to help you fix problems and optimise your application.

To disable debug mode, add this line at the start of your app:
  Ractive.DEBUG = false;

To disable debug mode when your app is minified, add this snippet:
  Ractive.DEBUG = /unminified/.test(function(){/unminified/});

Get help and support:
  http://docs.ractivejs.org
  http://stackoverflow.com/questions/tagged/ractivejs
  http://groups.google.com/forum/#!forum/ractive-js
  http://twitter.com/ractivejs

Found a bug? Raise an issue:
  https://github.com/ractivejs/ractive/issues

Error in new Ractive: 
page loaded. data length: 
2157276
Error in new Ractive:

The "Error in new Ractive:" part is produced by the following code:

try {
  ractive = new Ractive({
    el: '#main-output',
    template: RACTIVE_PREPARSE('app.pug'),
     ....
}
catch (e$) {
  e = e$;
  console.log("Error in new Ractive: ", e);
}

I don't know what I'm doing wrong but I can not get the stack trace.

Working on it.

[fskreuz]

Oooh! A Jade preparser? 😄

[ceremcem]

...here is the stack trace:

Error in new Ractive: 
{
  "message": "QuotaExceededError: DOM Exception 22",
  "stack": "setItem@[native code]\nset@https://aktos.io/scada/:63:21587\nhttps://aktos.io/scada/:3:6647\nn@https://aktos.io/scada/js/vendor.js:5:13922\ndispatch@https://aktos.io/scada/js/vendor.js:8:2369\nvl@https://aktos.io/scada/js/vendor.js:8:2072\nxt@https://aktos.io/scada/js/vendor.js:5:14866\nhttps://aktos.io/scada/js/vendor.js:5:14040\nforEach@[native code]\nhttps://aktos.io/scada/js/vendor.js:5:14006\nforEach@[native code]\nwt@https://aktos.io/scada/js/vendor.js:5:13809\noninit@https://aktos.io/scada/:3:6614\nfire@https://aktos.io/scada/js/vendor.js:7:27080\nnr@https://aktos.io/scada/js/vendor.js:6:27904\nnr@https://aktos.io/scada/js/vendor.js:6:27920\nend@https://aktos.io/scada/js/vendor.js:11:12898\nir@https://aktos.io/scada/js/vendor.js:6:28276\nDr@https://aktos.io/scada/js/vendor.js:7:2812\nhttps://aktos.io/scada/:65:6168\ni@https://aktos.io/scada/:1:258\ne@https://aktos.io/scada/:1:422\nglobal code@https://aktos.io/scada/:1:438\nappendChild@[native code]\nn@https://aktos.io/scada/js/vendor.js:2:826\nglobalEval@https://aktos.io/scada/js/vendor.js:2:15220\ntext script@https://aktos.io/scada/js/vendor.js:4:18109\nee@https://aktos.io/scada/js/vendor.js:2:12870\ni@https://aktos.io/scada/js/vendor.js:4:12185\nhttps://aktos.io/scada/js/vendor.js:4:17379",
  "code": 22,
  "name": "QuotaExceededError",
  "line": 63,
  "column": 21587,
  "sourceURL": "https://aktos.io/scada/"
}
page loaded. data length: 
2157276
Error in new Ractive: 
{
  "message": "QuotaExceededError: DOM Exception 22",
  "stack": "setItem@[native code]\nset@https://aktos.io/scada/:63:21587\nhttps://aktos.io/scada/:3:6647\nn@https://aktos.io/scada/js/vendor.js:5:13922\ndispatch@https://aktos.io/scada/js/vendor.js:8:2369\nvl@https://aktos.io/scada/js/vendor.js:8:2072\nxt@https://aktos.io/scada/js/vendor.js:5:14866\nhttps://aktos.io/scada/js/vendor.js:5:14040\nforEach@[native code]\nhttps://aktos.io/scada/js/vendor.js:5:14006\nforEach@[native code]\nwt@https://aktos.io/scada/js/vendor.js:5:13809\noninit@https://aktos.io/scada/:3:6614\nfire@https://aktos.io/scada/js/vendor.js:7:27080\nnr@https://aktos.io/scada/js/vendor.js:6:27904\nnr@https://aktos.io/scada/js/vendor.js:6:27920\nend@https://aktos.io/scada/js/vendor.js:11:12898\nir@https://aktos.io/scada/js/vendor.js:6:28276\nDr@https://aktos.io/scada/js/vendor.js:7:2812\nhttps://aktos.io/scada/:65:6168\ni@https://aktos.io/scada/:1:258\ne@https://aktos.io/scada/:1:422\nglobal code@https://aktos.io/scada/:1:438\nappendChild@[native code]\naddScript@https://aktos.io/scada/:64:65\nsuccess@https://aktos.io/scada/:75:21\nc@https://aktos.io/scada/js/vendor.js:3:8007\nfireWith@https://aktos.io/scada/js/vendor.js:3:8780\ni@https://aktos.io/scada/js/vendor.js:4:12512\nhttps://aktos.io/scada/js/vendor.js:4:17379",
  "code": 22,
  "name": "QuotaExceededError",
  "line": 63,
  "column": 21587,
  "sourceURL": "https://aktos.io/scada/"
}

[ceremcem]

@fskreuz Yess :))

[evs-chris]

Oh my. Is there any way you can run against a non-minified vendor.js? I can pick ractive code out of other libs, but unmangling minified code will take quite some time.

What comes out of RACTIVE_PREPARSE('app.pug')? Is it a string or an object?

[evs-chris]

Though, a quick google of the error seems to indicate that it's related to localStorage. Is there some chain of events happening whereby your app is writing to localStorage during init?

[ceremcem]

@evs-chris I was working on error output of non-minified version but as you mentioned the localStorage, let me explain: Yes, there is a piece of code that tries to read session token from localStorage and tries to login to the server with that token. Let me disable it.

[ceremcem]

Okay, wrapping setItem with try/catch solved the problem. Now the application is correctly displayed on IPhone5s. I'll find a workaround for the localStorage, it's really not a problem at all.

Thank you @evs-chris !!!