tracking events

apps/remix-ide/src/app/components/preload.tsx

@@ -7,6 +7,7 @@ import { indexedDBFileSystem } from '../files/filesystems/indexedDB'
 import { localStorageFS } from '../files/filesystems/localStorage'
 import { fileSystemUtility, migrationTestData } from '../files/filesystems/fileSystemUtility'
 import './styles/preload.css'
+const _paq = window._paq = window._paq || []
 
 export const Preload = () => {
 
@@ -33,6 +34,7 @@ export const Preload = () => {
                 )
             })
         }).catch(err => {
+            _paq.push(['_trackEvent', 'Preload', 'error', err && err.message])
             console.log('Error loading Remix:', err)
             setError(true)
         })
@@ -48,7 +50,8 @@ export const Preload = () => {
     const migrateAndLoad = async () => {
         setShowDownloader(false)
         const fsUtility = new fileSystemUtility()
-        await fsUtility.migrate(localStorageFileSystem.current, remixIndexedDB.current)
+        const migrationResult = await fsUtility.migrate(localStorageFileSystem.current, remixIndexedDB.current)
+        _paq.push(['_trackEvent', 'Migrate', 'result', migrationResult?'success' : 'fail'])
         await setFileSystems()
     }
 
@@ -56,23 +59,25 @@ export const Preload = () => {
         const fsLoaded = await remixFileSystems.current.setFileSystem([(testmigrationFallback.current || testBlockStorage.current)? null: remixIndexedDB.current, testBlockStorage.current? null:localStorageFileSystem.current])
         if (fsLoaded) {
             console.log(fsLoaded.name + ' activated')
+            _paq.push(['_trackEvent', 'Storage', 'activate', fsLoaded.name])
             loadAppComponent()
         } else {
+            _paq.push(['_trackEvent', 'Storage', 'error', 'no supported storage'])
             setSupported(false)
         }
     }
 
     const testmigration = async() => {        
-        const fsUtility = new fileSystemUtility()
         if (testmigrationResult.current) {
+            const fsUtility = new fileSystemUtility()
             fsUtility.populateWorkspace(migrationTestData, remixFileSystems.current.fileSystems['localstorage'].fs)
         }
     }
 
     useEffect(() => {
         async function loadStorage() {
-            await remixFileSystems.current.addFileSystem(remixIndexedDB.current)
+            await remixFileSystems.current.addFileSystem(remixIndexedDB.current) || _paq.push(['_trackEvent', 'Storage', 'error', 'indexedDB not supported'])
-            await remixFileSystems.current.addFileSystem(localStorageFileSystem.current)
+            await remixFileSystems.current.addFileSystem(localStorageFileSystem.current) || _paq.push(['_trackEvent', 'Storage', 'error', 'localstorage not supported'])
             await testmigration()
             remixIndexedDB.current.loaded && await remixIndexedDB.current.checkWorkspaces()
             localStorageFileSystem.current.loaded && await localStorageFileSystem.current.checkWorkspaces()

apps/remix-ide/src/app/files/filesystems/fileSystemUtility.ts

@@ -1,7 +1,7 @@
 import { hashMessage } from "ethers/lib/utils"
 import JSZip from "jszip"
 import { fileSystem } from "../fileSystem"
-
+const _paq = window._paq = window._paq || []
 export class fileSystemUtility {
     migrate = async (fsFrom: fileSystem, fsTo: fileSystem) => {
         try {
@@ -26,12 +26,14 @@ export class fileSystemUtility {
                 console.log('file migration successful')
                 return true
             } else {
+                _paq.push(['_trackEvent', 'Migrate', 'error', 'hash mismatch'])
                 console.log('file migration failed falling back to ' + fsFrom.name)
                 fsTo.loaded = false
                 return false
             }
-        } catch (e) {
+        } catch (err) {
-            console.log(e)
+            console.log(err)
+            _paq.push(['_trackEvent', 'Migrate', 'error', err && err.message])
             console.log('file migration failed falling back to ' + fsFrom.name)
             fsTo.loaded = false
             return false
@@ -50,9 +52,10 @@ export class fileSystemUtility {
             const date = today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate()
             const time = today.getHours() + 'h' + today.getMinutes() + 'min'
             this.saveAs(blob, `remix-backup-at-${time}-${date}.zip`)
-
+            _paq.push(['_trackEvent','Backup','download','preload'])
-        } catch (e) {
+        } catch (err) {
-            console.log(e)
+            _paq.push(['_trackEvent','Backup','error',err && err.message])
+            console.log(err)
         }
     }
 

apps/remix-ide/src/app/plugins/storage.ts

@@ -4,7 +4,7 @@ const profile = {
   name: 'storage',
   displayName: 'Storage',
   description: 'Storage',
-  methods: ['getStorage']
+  methods: ['getStorage', 'formatString']
 };
 
 export class StoragePlugin extends Plugin {
@@ -13,10 +13,47 @@ export class StoragePlugin extends Plugin {
   }
 
   async getStorage() {
-    if ('storage' in navigator && 'estimate' in navigator.storage) {
+    let storage = null
-        return  navigator.storage.estimate()
+    if ('storage' in navigator && 'estimate' in navigator.storage && (window as any).remixFileSystem.name !== 'localstorage') {
+      storage = navigator.storage.estimate()
     } else {
-        throw new Error("Can't get storage quota");
+      storage ={
+        usage: parseFloat(this.calculateLocalStorage()) * 1000,
+        quota: 5000000,
       }
     }
+    const _paq = window._paq = window._paq || []
+    _paq.push(['trackEvent', 'Storage', 'used', this.formatString(storage)]);
+    return storage
+  }
+
+  formatString(storage) {
+    return `${this.formatBytes(storage.usage)} / ${this.formatBytes(storage.quota)}`;
+  }
+
+  calculateLocalStorage() {
+    var _lsTotal = 0
+    var _xLen; var _x
+    for (_x in localStorage) {
+      // eslint-disable-next-line no-prototype-builtins
+      if (!localStorage.hasOwnProperty(_x)) {
+        continue
+      }
+      _xLen = ((localStorage[_x].length + _x.length) * 2)
+      _lsTotal += _xLen
+    }
+    return (_lsTotal / 1024).toFixed(2)
+  }
+
+  formatBytes(bytes: number, decimals = 2) {
+    if (bytes === 0) return '0 Bytes';
+
+    const k = 1024;
+    const dm = decimals < 0 ? 0 : decimals;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+  }
 }

libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.tsx

@@ -206,7 +206,9 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
         const date = today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate()
         const time = today.getHours() + 'h' + today.getMinutes() + 'min'
         saveAs(blob, `remix-backup-at-${time}-${date}.zip`)
+        _paq.push(['_trackEvent', 'Backup', 'download', 'home'])
       }).catch((e) => {
+        _paq.push(['_trackEvent', 'Backup', 'error', e.message])
         plugin.call('notification', 'toast', e.message)
       })
     } catch (e) {

libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx

@@ -422,8 +422,7 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
   useEffect(() => {
 
     (async()=>{
-      const storage = await props.plugin.call('storage','getStorage')
+      const storage = await props.plugin.call('storage', 'formatString', await props.plugin.call('storage','getStorage'))
-      console.log(storage)
       setStorage(storage)
     })()
 

libs/remix-ui/terminal/src/lib/terminalWelcome.tsx

@@ -1,16 +1,10 @@
 import React, { useEffect } from 'react' // eslint-disable-line
 
 const TerminalWelcomeMessage = ({ packageJson, storage }) => {
-
-  useEffect(() => {
-    console.log(storage)
-  }, [
-    storage
-  ])
   return (
     <div className="remix_ui_terminal_block px-4 " data-id="block_null">
       <div className="remix_ui_terminal_welcome"> Welcome to Remix {packageJson} </div><br />
-      <div className="">Your files are stored in {(window as any).remixFileSystem.name}, {storage && storage.usage} used</div><br />
+      <div className="">Your files are stored in {(window as any).remixFileSystem.name}, {storage} used</div><br />
       <div>You can use this terminal to: </div>
       <ul className='ml-0 mr-4'>
         <li>Check transactions details and start debugging.</li>