From 3243c69f2880cd48fe9d529ac3e0ed20e7b60b45 Mon Sep 17 00:00:00 2001
From: Ben Zhang <ben-z@users.noreply.github.com>
Date: Tue, 3 Sep 2024 14:12:44 -0700
Subject: [PATCH] Handle malformed JSON in onboarding form (#3078)

Currently, using a malformed JSON as the `initialformdatab64` query
parameter in the onboarding form results in an application error:

<img width="1552" alt="image"
src="https://github.com/user-attachments/assets/08560a8d-acf9-40f8-9cbb-dd229739857f">

This is not a good user experience. This PR makes it so that we display
an error message instead, and still allow the user to fill in the form
from scratch:
<img width="1552" alt="image"
src="https://github.com/user-attachments/assets/54831b4e-9575-4fdb-acaf-65eaf78eefad">
---
 components/onboarding-form.tsx | 72 ++++++++++++++++++----------------
 1 file changed, 39 insertions(+), 33 deletions(-)

diff --git a/components/onboarding-form.tsx b/components/onboarding-form.tsx
index 9ff9ea8..18e0c44 100644
--- a/components/onboarding-form.tsx
+++ b/components/onboarding-form.tsx
@@ -122,41 +122,47 @@ export default function OnboardingForm() {
       return;
     }
 
-    const savedFormState = getFormState();
-    const savedFormData = savedFormState.formData;
-    const savedInitialFormDataB64FromParam =
-      savedFormState.initialFormDataB64FromParam;
-
-    const initialFormDataFromParam = initialFormDataB64FromParam
-      ? JSON.parse(b64Decode(initialFormDataB64FromParam as string))
-      : null;
-
-    // Choose initial form data:
-    // 1. If there's no form data from query param, use saved form data.
-    // 2. If there is form data from query param, and it's the same as before, use saved form data. This allows
-    //    restoring the form data after an (accidental) navigation.
-    // 3. If there is form data from query param, and it's different from before, the saved data is stale.
-    //    Use form data from query param.
-    let dataSource = "" as "sessionStorage" | "queryParam" | "";
-    let initialFormData = null;
-    if (!initialFormDataFromParam) {
-      initialFormData = savedFormData;
-      dataSource = "sessionStorage";
-    } else if (initialFormDataB64FromParam === savedInitialFormDataB64FromParam) {
-      initialFormData = savedFormData;
-      dataSource = "sessionStorage";
-    } else {
-      initialFormData = initialFormDataFromParam;
-      dataSource = "queryParam";
-    }
+    try {
+      const savedFormState = getFormState();
+      const savedFormData = savedFormState.formData;
+      const savedInitialFormDataB64FromParam =
+        savedFormState.initialFormDataB64FromParam;
+
+      const initialFormDataFromParam = initialFormDataB64FromParam
+        ? JSON.parse(b64Decode(initialFormDataB64FromParam as string))
+        : null;
+
+      // Choose initial form data:
+      // 1. If there's no form data from query param, use saved form data.
+      // 2. If there is form data from query param, and it's the same as before, use saved form data. This allows
+      //    restoring the form data after an (accidental) navigation.
+      // 3. If there is form data from query param, and it's different from before, the saved data is stale.
+      //    Use form data from query param.
+      let dataSource = "" as "sessionStorage" | "queryParam" | "";
+      let initialFormData = null;
+      if (!initialFormDataFromParam) {
+        initialFormData = savedFormData;
+        dataSource = "sessionStorage";
+      } else if (initialFormDataB64FromParam === savedInitialFormDataB64FromParam) {
+        initialFormData = savedFormData;
+        dataSource = "sessionStorage";
+      } else {
+        initialFormData = initialFormDataFromParam;
+        dataSource = "queryParam";
+      }
 
-    if (initialFormData) {
-      _setFormData(initialFormData);
-      if (dataSource === "sessionStorage") {
-        toast.success("Successfully restored form data from session storage.");
-      } else if (dataSource === "queryParam") {
-        toast.success("Successfully loaded form data from query params.");
+      if (initialFormData) {
+        _setFormData(initialFormData);
+        if (dataSource === "sessionStorage") {
+          toast.success("Successfully restored form data from session storage.");
+        } else if (dataSource === "queryParam") {
+          toast.success("Successfully loaded form data from query params.");
+        }
       }
+    } catch (e) {
+      console.error("Failed to load saved form data", e);
+
+      toast.error("Failed to load saved form data. Please see the browser console for more information.");
     }
   }, [isReady, initialFormDataB64FromParam]);