fix: Catch error when emoji combinations cause document to be unable to persist (#3250)

* fix: Catch and warn of rare error when emoji combinations cause document to be unable to persist changes
closes #3230

* addEventListener -> removeEventListener

app/components/Toast.tsx

@@ -17,7 +17,12 @@ function Toast({ closeAfterMs = 3000, onRequestClose, toast }: Props) {
   const { action, type = "info", reoccurring } = toast;
 
   React.useEffect(() => {
-    timeout.current = setTimeout(onRequestClose, toast.timeout || closeAfterMs);
+    if (toast.timeout) {
+      timeout.current = setTimeout(
+        onRequestClose,
+        toast.timeout || closeAfterMs
+      );
+    }
     return () => timeout.current && clearTimeout(timeout.current);
   }, [onRequestClose, toast, closeAfterMs]);
 
@@ -36,7 +41,7 @@ function Toast({ closeAfterMs = 3000, onRequestClose, toast }: Props) {
   }, []);
 
   const handleResume = React.useCallback(() => {
-    if (timeout.current) {
+    if (timeout.current && toast.timeout) {
       timeout.current = setTimeout(
         onRequestClose,
         toast.timeout || closeAfterMs

app/scenes/Document/components/MultiplayerEditor.tsx

@@ -229,6 +229,28 @@ function MultiplayerEditor({ onSynced, ...props }: Props, ref: any) {
     }
   }, [remoteProvider, isIdle, isVisible]);
 
+  // Certain emoji combinations trigger this error in YJS, while waiting for a fix
+  // we must prevent the user from continuing to edit as their changes will not
+  // be persisted. See: https://github.com/yjs/yjs/issues/303
+  React.useEffect(() => {
+    function onUnhandledError(err: any) {
+      if (err.message.includes("URIError: URI malformed")) {
+        showToast(
+          t(
+            "Sorry, the last change could not be persisted – please reload the page"
+          ),
+          {
+            type: "error",
+            timeout: 0,
+          }
+        );
+      }
+    }
+
+    window.addEventListener("error", onUnhandledError);
+    return () => window.removeEventListener("error", onUnhandledError);
+  }, [showToast, t]);
+
   if (!extensions.length) {
     return null;
   }