Handle sync errors (#824)

After authenticating, kinto might return some errors we should handle.

 fix synced UI after kinto error. Should request reconnect.
 implement a solution to unblock the user.
 display used quota. #837 

Fix #791 #801 #802 #827

Author: sebastienbarbier

docs/metrics.md

@@ -69,7 +69,6 @@ An event fired when the user completes a change of the content of the notepad. I
 - `cd6`
 
 #### `drag-n-drop`
-
 An event fired when the user tries to drag or drop a content into the notepad.
 
 - `ec` - `notes`
@@ -142,7 +141,6 @@ An event fired when the "Send to Notes" context menu is used
 - `ea` - `metrics-context-menu`
 
 #### `limit-reached`
-
 An event fired when user goes over the pad limit (15000 character)
 
 - `ec` - `notes`
@@ -157,15 +155,15 @@ An event fired when user goes over the pad limit (15000 character)
 - `cd6`
 
 #### `idb-fail`
-
 An event fired when IndexedDB fails to load
 
 - `ec` - `notes`
 - `ea` - `idb-fail`
 
-
-#### `migrate-single-note`
-An event fired when migrating singleNote to multiNote
+### `delete-deleted-notes`
+A client retrieved notes which have been deleted on client side but not proparly
+deleted on server side. Those were deleted before v4.0.0-beta.4 (during multi-note implementation).
 
 - `ec` - `notes`
-- `ea` - `migrate-single-note`
+- `ea` - `delete-deleted-notes`
+

locales/en-US/notes.properties

@@ -122,3 +122,4 @@ backToAllNotes=Back to all notes
 newNote=New Note
 makePlainText=Make Plain Text
 deleteNote=Delete Note
+insufficientStorage=Insufficient Storage

src/sidebar/app/actions.js

@@ -11,6 +11,7 @@ import { SYNC_AUTHENTICATED,
          PLEASE_LOGIN,
          OPENING_LOGIN,
          FOCUS_NOTE,
+         ERROR,
          REQUEST_WELCOME_PAGE } from './utils/constants';
 
 import INITIAL_CONTENT from './data/initialContent';
@@ -169,3 +170,7 @@ export function setFocusedNote(id) {
 export function requestWelcomeNote() {
   return { type: REQUEST_WELCOME_PAGE };
 }
+
+export function error(message) {
+  return { type: ERROR, message};
+}

src/sidebar/app/components/Footer.js

@@ -39,6 +39,10 @@ class Footer extends React.Component {
         isReconnectState: true,
         text: () => browser.i18n.getMessage('reconnectSync')
       },
+      ERROR: {
+        yellowBackground: true,
+        isClickable: false
+      },
       SYNCING: {
         animateSyncIcon: true,
         text: () => browser.i18n.getMessage('syncProgress')
@@ -52,7 +56,10 @@ class Footer extends React.Component {
     this.getFooterState = (state) => {
       let res;
       if (state.sync.email) { // If user is authenticated
-        if (state.sync.isSyncing) {
+        if (state.sync.error) {
+          res = this.STATES.ERROR;
+          res.text = () => state.sync.error;
+        } else if (state.sync.isSyncing) {
           res = this.STATES.SYNCING;
         } else {
           res = this.STATES.SYNCED;

src/sidebar/app/onMessage.js

@@ -4,6 +4,7 @@ import { SYNC_AUTHENTICATED,
          TEXT_SYNCED,
          RECONNECT_SYNC,
          DISCONNECTED,
+         ERROR,
          SEND_TO_NOTES } from './utils/constants';
          // Actions
 import { authenticate,
@@ -12,7 +13,8 @@ import { authenticate,
          synced,
          reconnectSync,
          sendToNote,
-         kintoLoad } from './actions';
+         kintoLoad,
+         error } from './actions';
 import store from './store';
 /**
  * For each event, action on redux to update UI. No longer any event from chrome in components
@@ -56,6 +58,9 @@ chrome.runtime.onMessage.addListener(eventData => {
       case RECONNECT_SYNC:
         store.dispatch(reconnectSync());
         break;
+      case ERROR:
+        store.dispatch(error(eventData.message));
+        break;
       case DISCONNECTED:
         if (store.getState().sync.email) {
           store.dispatch(disconnect());

src/sidebar/app/reducers.js

@@ -12,6 +12,7 @@ import {
   PLEASE_LOGIN,
   FOCUS_NOTE,
   SEND_TO_NOTES,
+  ERROR,
   REQUEST_WELCOME_PAGE
 } from './utils/constants';
 
@@ -26,14 +27,16 @@ function sync(sync = {}, action) {
         isReconnectSync: false,
         email: action.email,
         lastSynced: new Date(),
-        isSyncing: true
+        isSyncing: true,
+        error: null
       });
     case DISCONNECTED:
       return Object.assign({}, sync, {
         email: null,
         isOpeningLogin: false,
         isPleaseLogin: false,
         isReconnectSync: false,
+        error: null
       });
     case OPENING_LOGIN:
       return Object.assign({}, sync, {
@@ -46,20 +49,25 @@ function sync(sync = {}, action) {
         isOpeningLogin: false,
         isPleaseLogin: true,
         isReconnectSync: false,
+        error: null
       });
     case RECONNECT_SYNC:
       return Object.assign({}, sync, {
+        email: null,
         isOpeningLogin: false,
         isPleaseLogin: false,
         isReconnectSync: true,
+        error: null
       });
     case DELETE_NOTE:
       return Object.assign({}, sync, {
-        isSyncing: true
+        isSyncing: true,
+        error: null
       });
     case UPDATE_NOTE:
       return Object.assign({}, sync, {
-        isSyncing: true
+        isSyncing: true,
+        error: null
       });
     case TEXT_SYNCED:
       return Object.assign({}, sync, {
@@ -84,6 +92,10 @@ function sync(sync = {}, action) {
       return Object.assign({}, sync, {
         welcomePage: false
       });
+    case ERROR:
+      return Object.assign({}, sync, {
+        error: action.message
+      });
     default:
       return sync;
   }

src/sidebar/app/utils/constants.js

@@ -19,4 +19,5 @@ export const UPDATE_NOTE = 'text-change';
 export const DELETE_NOTE = 'delete-note';
 
 export const FOCUS_NOTE = 'focus-note';
+export const ERROR = 'error';
 export const REQUEST_WELCOME_PAGE = 'request-welcome-page';

src/sync.js

@@ -28,13 +28,12 @@ function decrypt(key, encrypted) {
 
 // An "id schema" used to validate Kinto IDs and generate new ones.
 const notesIdSchema = { // eslint-disable-line no-unused-vars
-  // FIXME: Maybe this should generate IDs?
+  // We do not generate ID to keep retrocompatibility with single note version.
   generate() {
     throw new Error('cannot generate IDs');
   },
 
   validate() {
-    // FIXME: verify that at least this matches Kinto server ID format
     return true;
   },
 };
@@ -51,6 +50,8 @@ class ServerKeyOlderError extends Error {
   }
 }
 
+const deletedNotesStillOnServer = {};
+
 class JWETransformer {
   constructor(key) {
     this.key = key;
@@ -61,13 +62,10 @@ class JWETransformer {
     const ciphertext = await encrypt(this.key, record);
     // Copy over the _status field, so that we handle concurrency
     // headers (If-Match, If-None-Match) correctly.
-    // DON'T copy over "deleted" status, because then we'd leak
-    // plaintext deletes.
-    const status = record._status && (record._status === 'deleted' ? 'updated' : record._status);
     const encryptedResult = {
       content: ciphertext,
       id: record.id,
-      _status: status,
+      _status: record._status,
       kid: this.key.kid,
     };
     if (record.hasOwnProperty('last_modified')) {
@@ -104,6 +102,12 @@ class JWETransformer {
     // If we get such a record, flag it as deleted.
     if (decoded._status === 'deleted') {
       decoded.deleted = true;
+      // On decode, we flag notes with _status deleted but still on server.
+      // We automatically will request deletion for those.
+      // (This is due to singleNote replacing 'deleted' state by 'updated')
+      // Should be deleted when every user who tried beta runned it once.
+      // (see metrics deleteDeleted)
+      deletedNotesStillOnServer[decoded.id] = decoded;
     }
     return decoded;
   }
@@ -261,6 +265,16 @@ function syncKinto(client, credentials) {
       } else if (error.message === 'Failed to renew token') {
         // cannot refresh the access token, log the user out.
         return reconnectSync(credentials);
+      } else if (error.response
+                && error.response.status === 507
+                && error.message.includes('Insufficient Storage')) {
+
+        // cannot refresh the access token, log the user out.
+        browser.runtime.sendMessage('notes@mozilla.com', {
+          action: 'error',
+          message: browser.i18n.getMessage('insufficientStorage')
+        });
+        return Promise.reject(error);
       }
       console.error(error); // eslint-disable-line no-console
       reconnectSync(credentials);
@@ -276,7 +290,18 @@ function reconnectSync(credentials) {
 }
 
 function retrieveNote(client) {
-  return client.collection('notes', { idSchema: notesIdSchema }).list({});
+  return client
+    .collection('notes', { idSchema: notesIdSchema })
+    .list({})
+    .then((list) => {
+      // We delete all notes retrieved from server and not properly deleted
+      Object.keys(deletedNotesStillOnServer).forEach((id) => {
+        sendMetrics('delete-deleted-notes'); // eslint-disable-line no-undef
+        client.collection('notes', { idSchema: notesIdSchema }).deleteAny(id);
+      });
+
+      return list;
+    });
 }
 
 /**