Sync Error on iPad after picking German language

githubbob42 commented 8 years ago

Mingle Card: 4172 Steps to Reproduce

| | |
|-|-|
|**Version #**|
   4.0.1.3243|
    |
|**OS**|
   iOS 9.3.2|
   Windows 10 Pro|
|**Browser**|
   Safari|
   Chrome 50.0.2661.102 m|
|**Username**|
|tomfield@test3.com (Field)|
|ajain@tarantula3.com (Admin)|
|**Password**|
|computer46|
|computer47|

In FieldFX® Back Office with the Admin user, go through the Manager Users → Users section and change your Field user’s language to German.
Log in to FieldFX® Mobile with the same user you just put on to the German language.

Expected Result

I should be able to successfully sync and use the German language with FieldFX.

Actual Result

My sync fails with the following error, “the statement callback raised an exception or statement error callback did not return false"
Does not fail on Desktop with Chrome browser.

Analysis

the cache-pollyfill was failing trying to call btoa on a label with (German) unicode characters in it.

We need to account for this in two ways:

(btoa) encode the value when writing it to the cache
(atob) try to decode the value that we read from the cache but have a fail over to catch any errors in the case where the original value wasn’t originally encoded for backwards compatibility (i.e. when this first rolls out, nothing in the cache will be encoded)

Analysis

in the dev console, I’m seeing the error:

[Error] InvalidCharacterError: DOM Exception 5: An invalid or illegal character was specified, such as in an XML name.
   btoa (caches-polyfill.min.js:3:3380)
   c (caches-polyfill.min.js:3:3380)
   (anonymous function) (caches-polyfill.min.js:3:8557)
   (anonymous function)
   forEach
   (anonymous function) (caches-polyfill.min.js:3:8514)
   (anonymous function)
   (anonymous function) (caches-polyfill.min.js:3:5153)
   r (caches-polyfill.min.js:3:16630)
   b (IndexedDBShim.min.js:2:309)
   f (IndexedDBShim.min.js:3:8434)
   (anonymous function) (IndexedDBShim.min.js:3:1028)

And reading this article, https://dracoblue.net/dev/fix-dom-exception-5-invalid-character-with-atob/, seems to point to the same issue.

However, I don’t believe that this has anything to do with the actual translation file (“de”) as I have replaced it’s innards with the contents of en_US and it still fails. I had to replace the caches-pollyfill.min with the unminified version in order to figure out that it was the Contact sobject that was bombing.

I’m not exactly sure why yet, but I think it has to do with Unicode characters (i.e. letters with umlauts [ ä ], etc ) in the label translations of the fields. I.e. labels in German. Based on that theory and these articles:

http://stackoverflow.com/questions/9786508/javascript-atob-returning-string-contains-an-invalid-character

https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/btoa#Unicode_Strings

I think we may need to escape the extended characters in caches-polyfill as such:

function responseToEntry(response, body) {
  return {
    body: btoa( **unescape(encodeURIComponent(body))** ),
    status: response.status,
    statusText: response.statusText,
    headers: flattenHeaders(response.headers)
  };
}

I just verified that this allows the iPads to sync successfully.

I have a PR in to Craig’s cache-polyfill repo: https://github.com/CraigCav/cache-polyfill/pull/1

Once that goes in, we’ll update the caches-polyfill.min.js file mobile with another PR.

Related Cards

Test Plan

Localization of the help text

githubbob42 commented 8 years ago

Pull Request #1883

githubbob42 commented 5 years ago

githubbob42 / mingle2github2