diff --git a/apps/remix-ide/src/app/components/preload.tsx b/apps/remix-ide/src/app/components/preload.tsx index df3bf8500c..0aade77f75 100644 --- a/apps/remix-ide/src/app/components/preload.tsx +++ b/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(localStorageFileSystem.current) + await remixFileSystems.current.addFileSystem(remixIndexedDB.current) || _paq.push(['_trackEvent', 'Storage', 'error', 'indexedDB not supported']) + 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() diff --git a/apps/remix-ide/src/app/files/filesystems/fileSystemUtility.ts b/apps/remix-ide/src/app/files/filesystems/fileSystemUtility.ts index d4718c7dd2..0873a7d288 100644 --- a/apps/remix-ide/src/app/files/filesystems/fileSystemUtility.ts +++ b/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) { - console.log(e) + } catch (err) { + 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`) - - } catch (e) { - console.log(e) + _paq.push(['_trackEvent','Backup','download','preload']) + } catch (err) { + _paq.push(['_trackEvent','Backup','error',err && err.message]) + console.log(err) } } diff --git a/apps/remix-ide/src/app/plugins/storage.ts b/apps/remix-ide/src/app/plugins/storage.ts index 2bf50fdb58..d52e2302eb 100644 --- a/apps/remix-ide/src/app/plugins/storage.ts +++ b/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) { - return navigator.storage.estimate() + let storage = null + 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]; } } diff --git a/apps/remix-ide/src/index.html b/apps/remix-ide/src/index.html index f2573bc29b..1fa68cd3b5 100644 --- a/apps/remix-ide/src/index.html +++ b/apps/remix-ide/src/index.html @@ -40,7 +40,7 @@ var _paq = window._paq = window._paq || [] /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['disableCookies']); - _paq.push(['enableJSErrorTracking']); + _paq.push(['enableJSErrorTracking']); _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { diff --git a/libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.tsx b/libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.tsx index e13ed5c28b..d203a873a9 100644 --- a/libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.tsx +++ b/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) { diff --git a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx b/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx index 52eaa9058c..c47f0fcd4d 100644 --- a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx +++ b/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') - console.log(storage) + const storage = await props.plugin.call('storage', 'formatString', await props.plugin.call('storage','getStorage')) setStorage(storage) })() diff --git a/libs/remix-ui/terminal/src/lib/terminalWelcome.tsx b/libs/remix-ui/terminal/src/lib/terminalWelcome.tsx index 955de90995..6f80f555d4 100644 --- a/libs/remix-ui/terminal/src/lib/terminalWelcome.tsx +++ b/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 (
Welcome to Remix {packageJson}

-
Your files are stored in {(window as any).remixFileSystem.name}, {storage && storage.usage} used

+
Your files are stored in {(window as any).remixFileSystem.name}, {storage} used

You can use this terminal to: