search

perry-js / perry

Painless and agnostic front-end bug reporting. Collect logs, errors, clicks, and session data easily.
https://perry-js.netlify.com/
MIT License
46 stars 5 forks source link

Refactor/Redesign: Move store away from localStorage #49

Open armand1m opened 5 years ago

armand1m commented 5 years ago

Goal

The goal of this issue is to track the design and development of a new client-side store for Perry.

Motivation

Today making some tests with the new feature in #47, I got this error while testing it:

Uncaught DOMException: Failed to execute 'setItem' on 'Storage': Setting the value of 'perry::document.onclick::history' exceeded the quota.
    at writeToStore (webpack-internal:///./packages/write-to-store/index.ts:13:18)
    at HTMLDocument.document.onclick (webpack-internal:///./packages/listen-document-clicks/index.ts:21:108)

Basically it seems that WebStorage is limited to 10mb. (src: https://www.html5rocks.com/en/tutorials/offline/quota-research/)

Possible solutions

@jackTheRipper already proposed a couple of days ago to move to IndexedDB since now we have to also store blob's in the client for a while (the screen recordings).

In MDN they state IndexedDB as the following:

IndexedDB is a low-level API for client-side storage of significant amounts of structured data, including files/blobs. This API uses indexes to enable high-performance searches of this data. While Web Storage is useful for storing smaller amounts of data, it is less useful for storing larger amounts of structured data. IndexedDB provides a solution.

IndexedDB indeed looks way more solid for our purpose since we can generate a lot of data in a small period of time.

Maybe we can use it together with something such as https://localforage.github.io/localForage/ for fallback in browsers that don't support it.

There might be other solutions as well and this issue is a place to discuss those when they come on mind.

FYI @vitormargis @guilhermelimak

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/71148811-refactor-redesign-move-store-away-from-localstorage?utm_campaign=plugin&utm_content=tracker%2F99808836&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F99808836&utm_medium=issues&utm_source=github).
armand1m commented 5 years ago

I like the idea of https://github.com/developit/stockroom