Show a deserialization error modal if needed.

lib/page-with-shareable-state.tsx

@@ -84,13 +84,15 @@ export function createPageWithShareableState<T>({
      */
     const [isInOnChange, setIsInOnChange] = useState(false);
 
-    /** The default state from th URL, which we'll pass into our component. */
+    /** The default state from the URL, which we'll pass into our component. */
     let defaults: T = defaultValue;
+    let deserializeError = false;
 
     try {
       defaults = deserialize(state || "");
     } catch (e) {
       console.log(`Error deserializing state: ${e}`);
+      deserializeError = true;
     }
 
     const onChange = useCallback(
@@ -115,7 +117,26 @@ export function createPageWithShareableState<T>({
       }
     }, [isInOnChange, state, latestState, key]);
 
-    return <Component key={key} defaults={defaults} onChange={onChange} />;
+    return (
+      <>
+        {deserializeError && (
+          <div className="page-error">
+            <div>
+              <p>
+                Sorry, an error occurred when trying to load the composition on
+                this page.
+              </p>
+              <p>
+                Either its data is corrupted, or displaying it is no longer
+                supported.
+              </p>
+              <button>Alas</button>
+            </div>
+          </div>
+        )}
+        <Component key={key} defaults={defaults} onChange={onChange} />
+      </>
+    );
   };
 
   return PageWithShareableState;

lib/page.css

@@ -116,3 +116,39 @@ ul.navbar li:last-child {
 .error {
   color: red;
 }
+
+.page-error {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  background-color: rgba(0, 0, 0, 0.75);
+}
+
+.page-error div {
+  background: crimson;
+  color: white;
+  padding: 2em;
+  max-width: 50em;
+  pointer-events: auto;
+}
+
+.page-error div p:first-child {
+  margin-top: 0;
+}
+
+.page-error div p:last-child {
+  margin-bottom: 0;
+}
+
+.page-error div button {
+  display: block;
+  width: 66%;
+  margin: 3em auto 0 auto;
+  text-align: center;
+}