From 27774d908f862f69ff3cef79e528935082207dd7 Mon Sep 17 00:00:00 2001 From: Emi Matchu Date: Sun, 8 Sep 2024 13:36:30 -0700 Subject: [PATCH] Better error handling for item page preview HTTP error If something goes wrong, like the site goes down or has an intermittent error, try a full pageload. That way, we're both retrying, and in a way that gives the user more control and visibility into what's going on, and what they can potentially do about it. (e.g. if there's a useful error message, they will see it!) --- app/assets/javascripts/items/show.js | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/app/assets/javascripts/items/show.js b/app/assets/javascripts/items/show.js index 723a18ec..e9d8aaab 100644 --- a/app/assets/javascripts/items/show.js +++ b/app/assets/javascripts/items/show.js @@ -4,9 +4,11 @@ document.addEventListener("change", (e) => { try { const mainPickerForm = document.querySelector( - "#item-preview species-color-picker form"); - const mainSpeciesField = - mainPickerForm.querySelector("[name='preview[species_id]']"); + "#item-preview species-color-picker form", + ); + const mainSpeciesField = mainPickerForm.querySelector( + "[name='preview[species_id]']", + ); mainSpeciesField.value = e.target.value; mainPickerForm.requestSubmit(); // `submit` doesn't get captured by Turbo! } catch (error) { @@ -14,6 +16,14 @@ document.addEventListener("change", (e) => { } }); +// If the preview frame fails to load, try a full pageload. +document.addEventListener("turbo:frame-missing", (e) => { + if (!e.target.matches("#item-preview")) return; + + e.detail.visit(e.detail.response.url); + e.preventDefault(); +}); + class SpeciesColorPicker extends HTMLElement { #internals; @@ -44,7 +54,7 @@ class SpeciesFacePicker extends HTMLElement { #handleClick(e) { if (e.target.matches("input[type=radio]")) { - this.dispatchEvent(new Event("change", {bubbles: true})); + this.dispatchEvent(new Event("change", { bubbles: true })); } } }