Add some nice error handling

client/package-lock.json

@@ -4244,6 +4244,11 @@
         "shallow-clone": "^3.0.0"
       }
     },
+    "clsx": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
+      "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA=="
+    },
     "co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -14173,6 +14178,14 @@
         }
       }
     },
+    "react-toastify": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-7.0.3.tgz",
+      "integrity": "sha512-cxZ5rfurC8LzcZQMTYc8RHIkQTs+BFur18Pzk6Loz6uS8OXUWm6nXVlH/wqglz4Z7UAE8xxcF5mRjfE13487uQ==",
+      "requires": {
+        "clsx": "^1.1.1"
+      }
+    },
     "read-pkg": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",

client/package.json

@@ -19,6 +19,7 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-scripts": "4.0.1",
+    "react-toastify": "^7.0.3",
     "typescript": "^4.1.3",
     "web-vitals": "^0.2.4"
   },

client/src/components/App.tsx

@@ -2,11 +2,14 @@ import { createClient, FluenceClient } from '@fluencelabs/fluence';
 import React, { useEffect, useState } from 'react';
 
 import './App.scss';
+
 import { FluenceClientContext } from '../app/FluenceClientContext';
 import { UserList } from './UserList';
 import * as api from 'src/app/api';
 import { CollaborativeEditor } from './CollaborativeEditor';
 import { relayNode } from 'src/app/constants';
+import { withErrorHandlingAsync } from './util';
+import { toast } from 'react-toastify';
 
 const App = () => {
     const [client, setClient] = useState<FluenceClient | null>(null);
@@ -24,8 +27,10 @@ const App = () => {
             return;
         }
 
-        await api.join(client, nickName);
-        setIsInRoom(true);
+        await withErrorHandlingAsync(async () => {
+            await api.join(client, nickName);
+            setIsInRoom(true);
+        });
     };
 
     const leaveRoom = async () => {
@@ -33,8 +38,10 @@ const App = () => {
             return;
         }
 
-        await api.leave(client);
-        setIsInRoom(false);
+        await withErrorHandlingAsync(async () => {
+            await api.leave(client);
+            setIsInRoom(false);
+        });
     };
 
     return (

client/src/components/CollaborativeEditor.tsx

@@ -6,6 +6,7 @@ import { fluentPadServiceId, notifyTextUpdateFnName } from 'src/app/constants';
 import { useFluenceClient } from '../app/FluenceClientContext';
 import { getUpdatedDocFromText, initDoc, SyncClient } from '../app/sync';
 import * as api from 'src/app/api';
+import { withErrorHandlingAsync } from './util';
 
 const broadcastUpdates = _.debounce((text: string, syncClient: SyncClient) => {
     let doc = syncClient.getDoc();
@@ -26,7 +27,9 @@ export const CollaborativeEditor = () => {
         };
 
         syncClient.handleSendChanges = (changes: string) => {
-            api.addEntry(client, changes);
+            withErrorHandlingAsync(async () => {
+                await api.addEntry(client, changes);
+            });
         };
 
         const unsub = subscribeToEvent(client, fluentPadServiceId, notifyTextUpdateFnName, (args, tetraplets) => {
@@ -43,7 +46,8 @@ export const CollaborativeEditor = () => {
         syncClient.start();
 
         // don't block
-        api.getHistory(client).then((res) => {
+        withErrorHandlingAsync(async () => {
+            const res = await api.getHistory(client);
             for (let e of res) {
                 syncClient.receiveChanges(e.body);
             }

client/src/components/UserList.tsx

@@ -8,6 +8,7 @@ import {
 import { useFluenceClient } from '../app/FluenceClientContext';
 import * as api from 'src/app/api';
 import { PeerIdB58, subscribeToEvent } from '@fluencelabs/fluence';
+import { withErrorHandlingAsync } from './util';
 
 interface User {
     id: PeerIdB58;
@@ -40,7 +41,9 @@ export const UserList = (props: { selfName: string }) => {
             });
 
             // don't block
-            api.updateOnlineStatuses(client);
+            withErrorHandlingAsync(async () => {
+                await api.updateOnlineStatuses(client);
+            });
         }, refreshTimeoutMs);
 
         const unsub1 = subscribeToEvent(client, fluentPadServiceId, notifyUserAddedFnName, (args, _) => {
@@ -92,8 +95,10 @@ export const UserList = (props: { selfName: string }) => {
         });
 
         // don't block
-        api.getUserList(client);
-        api.notifySelfAdded(client, props.selfName);
+        withErrorHandlingAsync(async () => {
+            await api.getUserList(client);
+            await api.notifySelfAdded(client, props.selfName);
+        });
 
         return () => {
             clearTimeout(listRefreshTimer);

client/src/components/util.tsx

@@ -0,0 +1,19 @@
+import { toast } from 'react-toastify';
+
+export const withErrorHandling = (fn: () => void): void => {
+    try {
+        fn();
+    } catch (err) {
+        console.error(err);
+        toast.error('Something went wrong: ' + err);
+    }
+};
+
+export const withErrorHandlingAsync = async (fn: () => Promise<void>): Promise<void> => {
+    try {
+        await fn();
+    } catch (err) {
+        console.error(err);
+        toast.error('Something went wrong: ' + err);
+    }
+};

client/src/index.tsx

@@ -2,14 +2,18 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.scss';
 import App from './components/App';
-import log from 'loglevel';
+import { setLogLevel } from '@fluencelabs/fluence';
+import { ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
 
-// log.setLevel('trace');
-log.setLevel('error');
+setLogLevel('INFO');
 
 ReactDOM.render(
     <React.StrictMode>
-        <App />
+        <div>
+            <App />
+            <ToastContainer />
+        </div>
     </React.StrictMode>,
     document.getElementById('root'),
 );