dice/impress
1
0
Fork 0
forked from OpenNeo/impress
Code Pull requests Activity

Better error handling for item page preview HTTP error

Browse source 
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!)
This commit is contained in:
Emi Matchu 2024-09-08 13:36:30 -07:00
parent 09572b5c05
commit 27774d908f
1 changed files with 14 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
app/assets/javascripts/items/show.js
View file

@ -4,9 +4,11 @@ document.addEventListener("change", (e) => {
try { try {
const mainPickerForm = document.querySelector( const mainPickerForm = document.querySelector(
"#item-preview species-color-picker form"); "#item-preview species-color-picker form",
const mainSpeciesField = );
mainPickerForm.querySelector("[name='preview[species_id]']"); const mainSpeciesField = mainPickerForm.querySelector(
"[name='preview[species_id]']",
);
mainSpeciesField.value = e.target.value; mainSpeciesField.value = e.target.value;
mainPickerForm.requestSubmit(); // `submit` doesn't get captured by Turbo! mainPickerForm.requestSubmit(); // `submit` doesn't get captured by Turbo!
} catch (error) { } 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 { class SpeciesColorPicker extends HTMLElement {
#internals; #internals;
@ -44,7 +54,7 @@ class SpeciesFacePicker extends HTMLElement {
#handleClick(e) { #handleClick(e) {
if (e.target.matches("input[type=radio]")) { if (e.target.matches("input[type=radio]")) {
this.dispatchEvent(new Event("change", {bubbles: true})); this.dispatchEvent(new Event("change", { bubbles: true }));
} }
} }
} }