Catch chainpad errors and display it in the UI

customize.dist/translations/messages.fr.js

@@ -32,9 +32,11 @@ define(function () {
     out.padNotPinned = 'Ce pad va expirer après 3 mois d\'inactivité, {0}connectez-vous{1} ou {2}enregistrez-vous{3} pour le préserver.';
     out.anonymousStoreDisabled = "L'administrateur de cette instance de CryptPad a désactivé le drive pour les utilisateurs non enregistrés. Vous devez vous connecter pour pouvoir utiliser CryptDrive.";
     out.expiredError = "Ce pad a atteint sa date d'expiration est n'est donc plus disponible.";
-    out.expiredErrorCopy = ' Vous pouvez toujours copier son contenu ailleurs en appuyant sur <em>Échap</em>.<br> Dés que vous aurez quitté la page, il sera impossible de le récupérer.';
     out.deletedError = 'Ce pad a été supprimé par son propriétaire et n\'est donc plus disponible.';
     out.inactiveError = 'Ce pad a été supprimé en raison de son inactivité. Appuyez sur Échap pour créer un nouveau pad.';
+    out.chainpadError = 'Une erreur critique est survenue lors de la mise à jour du contenu. Le pad est désormais en mode lecture seule afin de s\'assurer que vous ne perdiez pas davantage de données.<br>' +
+                        'Appuyez sur <em>Échap</em> pour voir le pad ou rechargez la page pour pouvoir le modifier à nouveau.';
+    out.errorCopy = ' Vous pouvez toujours copier son contenu ailleurs en appuyant sur <em>Échap</em>.<br> Dés que vous aurez quitté la page, il sera impossible de le récupérer.';
 
     out.loading = "Chargement...";
     out.error = "Erreur";

customize.dist/translations/messages.js

@@ -33,9 +33,11 @@ define(function () {
     out.padNotPinned = 'This pad will expire after 3 months of inactivity, {0}login{1} or {2}register{3} to preserve it.';
     out.anonymousStoreDisabled = "The webmaster of this CryptPad instance has disabled the store for anonymous users. You have to log in to be able to use CryptDrive.";
     out.expiredError = 'This pad has reached its expiration time and is no longer available.';
-    out.expiredErrorCopy = ' You can still copy the content to another location by pressing <em>Esc</em>.<br>Once you leave this page, it will disappear forever!';
     out.deletedError = 'This pad has been deleted by its owner and is no longer available.';
     out.inactiveError = 'This pad has been deleted due to inactivity. Press Esc to create a new pad.';
+    out.chainpadError = 'A critical error occurred when updating your content. This page is in read-only mode to make sure you won\'t lose your work.<br>' +
+                        'Hit <em>Esc</em> to continue to view this pad, or reload to try editing again.';
+    out.errorCopy = ' You can still copy the content to another location by pressing <em>Esc</em>.<br>Once you leave this page, it will disappear forever!';
 
     out.loading = "Loading...";
     out.error = "Error";

www/common/common-ui-elements.js

@@ -2066,12 +2066,12 @@ define([
         if (err.type === 'EEXPIRED') {
             msg = Messages.expiredError;
             if (err.loaded) {
-                msg += Messages.expiredErrorCopy;
+                msg += Messages.errorCopy;
             }
         } else if (err.type === 'EDELETED') {
             msg = Messages.deletedError;
             if (err.loaded) {
-                msg += Messages.expiredErrorCopy;
+                msg += Messages.errorCopy;
             }
         }
         if (toolbar && typeof toolbar.deleted === "function") { toolbar.deleted(); }

www/common/sframe-app-framework.js

@@ -45,6 +45,7 @@ define([
         FORGOTTEN: 'FORGOTTEN',
         DELETED: 'DELETED',
         INFINITE_SPINNER: 'INFINITE_SPINNER',
+        ERROR: 'ERROR',
         INITIALIZING: 'INITIALIZING',
         HISTORY_MODE: 'HISTORY_MODE',
         READY: 'READY'
@@ -118,9 +119,9 @@ define([
             return;
         };
 
-        var stateChange = function (newState) {
+        var stateChange = function (newState, text) {
             var wasEditable = (state === STATE.READY);
-            if (state === STATE.DELETED) { return; }
+            if (state === STATE.DELETED || state === STATE.ERROR) { return; }
             if (state === STATE.INFINITE_SPINNER && newState !== STATE.READY) { return; }
             if (newState === STATE.INFINITE_SPINNER || newState === STATE.DELETED) {
                 state = newState;
@@ -147,6 +148,14 @@ define([
                     evStart.reg(function () { toolbar.failed(); });
                     break;
                 }
+                case STATE.ERROR: {
+                    evStart.reg(function () {
+                        toolbar.errorState(true, text);
+                        var msg = Messages.chainpadError;
+                        UI.errorLoadingScreen(msg, true, true);
+                    });
+                    break;
+                }
                 case STATE.FORGOTTEN: {
                     evStart.reg(function () { toolbar.forgotten(); });
                     break;
@@ -249,7 +258,12 @@ define([
             }
 
             var contentStr = JSONSortify(content);
-            cpNfInner.chainpad.contentUpdate(contentStr);
+            try {
+                cpNfInner.chainpad.contentUpdate(contentStr);
+            } catch (e) {
+                stateChange(STATE.ERROR, e.message);
+                console.error(e);
+            }
             if (cpNfInner.chainpad.getUserDoc() !== contentStr) {
                 console.error("realtime.getUserDoc() !== shjson");
             }
@@ -463,6 +477,7 @@ define([
             window.setInterval(function () {
                 if (state === STATE.DISCONNECTED) { return; }
                 if (state === STATE.DELETED) { return; }
+                if (state === STATE.ERROR) { return; }
                 var l;
                 try {
                     l = cpNfInner.chainpad.getLag();

www/common/toolbar3.js

@@ -1061,6 +1061,7 @@ define([
 
         toolbar.errorState = function (state, error) {
             toolbar.isErrorState = state;
+            if (state) { toolbar.connected = false; }
             if (toolbar.spinner) {
                 if (!state) {
                     return void kickSpinner(toolbar, config);

www/whiteboard/inner.js

@@ -346,7 +346,16 @@ define([
 
             var content = stringifyInner(canvas.toDatalessJSON());
 
-            APP.realtime.contentUpdate(content);
+            try {
+                APP.realtime.contentUpdate(content);
+            } catch (e) {
+                APP.unrecoverable = true;
+                setEditable(false);
+                APP.toolbar.errorState(true, e.message);
+                var msg = Messages.chainpadError;
+                UI.errorLoadingScreen(msg, true, true);
+                console.error(e);
+            }
         };
 
         var addImageToCanvas = function (img) {