1285781 - Mobile twitter web site hits localStorage cap and breaks silently

Status: RESOLVED WORKSFORME

(Web Compatibility :: Site Reports, defect)

Description

[Katelyn Gadd (:kael)]

I'm not sure if this is a recent change/regression, but in Firefox if you use Mobile Twitter long enough, it hits the local storage quota and silently breaks. After this happens various features on the site don't work anymore, like replying to tweets or marking them as favorite.

If you open the web console after this happens there's nothing there, but if you have the console open before it happens the first time you get the quota error:

| https://ma-0.twimg.com/twitter-assets/responsive-web/web/ltr/vendor.c9eb2c142616aae8.js
NS_ERROR_DOM_QUOTA_REACHED: Persistent storage maximum size reached

Looking at localStorage showed two keys in the site's local storage:

> localStorage.twitter.length
71721
> localStorage["85d75cba23346a489aa4f86bb13408750942d334"].length
1528523

Both keys appeared to be JSON blobs, with the large one being a huge bundle of stuff I couldn't easily identify as a specific thing. A cache, maybe?

localStorage.clear() fixed the problem.

I expect this is also going to break in Android Firefox, and in that case it will be much harder for the user to fix it.

This may be a difference from other browsers like Safari or Edge or Chrome, since in this case it appears that under 2MB of text in localStorage was enough to hit quota. I was under the impression that quota for localStorage is normally 5MB. IIRC Chrome uses two-byte representation for localStorage data, though, so its cap is around 2.5MB?

Comment 1

[Mike Taylor [:miketaylr]]

It looks like the linked JS is using sessionStorage:

function a(e, t) {
    try {
        null == t ? window.sessionStorage.removeItem(o(e)) : window.sessionStorage.setItem(o(e), JSON.stringify(t))
    } catch (n) {
        if (n.name === c) return;
        if (l.indexOf(n.name) >= 0 && 0 === window.sessionStorage.length) return;
        throw n
    }
}


l is defined as l = ["QuotaExceededError", "QUOTA_EXCEEDED_ERR"]).... if n.name is "NS_ERROR_DOM_QUOTA_REACHED", then I guess we won't hit the early return. Maybe?

From https://heycam.github.io/webidl/#quotaexceedederror, QuotaExceededError is current (and appears to be what Chrome throws) and QUOTA_EXCEEDED_ERR is the legacy one (and is what Safari throws).

Comment 2

[Karl Dubost💡 :karlcow]

Mike, any suggestions or further investigation?

Comment 3

[Mike Taylor [:miketaylr]]

Just took another peek, and it looks like the code has changed quite a bit:

storeData: function(a, b) {
  try {
    sessionStorage.setItem(a, b)
  } catch (c) {
    if (c.name !== "QuotaExceededError" && c.message !== "QuotaExceededError" && c.name !== "NS_ERROR_DOM_QUOTA_REACHED" && c.name !== "QUOTA_EXCEEDED_ERR" && c.number !== -2147024882)
      throw c;
    this.logWithStorageException(c, b)
  }
 },

I think we can probably just close this as WFM -- but if you run into this again kael, please let us know and we can pick up investigation!

(Assuming that was the right bit of code to look at -- https://abs.twimg.com/c/swift/en/init.c744b9caf3d1811ed6dc61c0057e32e455ffc437.js has a nice "app/utils/storage/core" module using localStorage, but there's try/catches in all the right places, AFAICT)