Skip to content

Commit

Permalink
Handle malformed JSON in onboarding form (#3078)
Browse files Browse the repository at this point in the history
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">
  • Loading branch information
ben-z authored Sep 3, 2024
1 parent 2a78a85 commit 3243c69
Showing 1 changed file with 39 additions and 33 deletions.
72 changes: 39 additions & 33 deletions components/onboarding-form.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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]);

Expand Down

0 comments on commit 3243c69

Please sign in to comment.