diff --git a/src/app/util.js b/src/app/util.js index 88ae8cc..16d2b2a 100644 --- a/src/app/util.js +++ b/src/app/util.js @@ -392,7 +392,18 @@ export function logAndCapture(e) { Sentry.captureException(e); } -export function MajorErrorMessage({ error }) { +export function MajorErrorMessage({ error, variant = "unexpected" }) { + // If this is a GraphQL Bad Request error, show the message of the first + // error the server returned. Otherwise, just use the normal error message! + const message = + error?.networkError?.result?.errors?.[0]?.message || error.message; + + // Log the detailed error to the console, so we can have a good debug + // experience without the parent worrying about it! + React.useEffect(() => { + console.error(error); + }, [error]); + return ( - Ah dang, I broke it ๐Ÿ˜– + {variant === "unexpected" && <>Ah dang, I broke it ๐Ÿ˜–} + {variant === "network" && <>Oops, it didn't work, sorry ๐Ÿ˜–} - There was an error displaying this page. I'll get info about it - automatically, but you can tell me more at{" "} - - matchu@openneo.net - - ! + {variant === "unexpected" && ( + <> + There was an error displaying this page. I'll get info about it + automatically, but you can tell me more at{" "} + + matchu@openneo.net + + ! + + )} + {variant === "network" && ( + <> + There was an error displaying this page. Check your internet + connection and try againโ€”and if you keep having trouble, please + tell me more at{" "} + + matchu@openneo.net + + ! + + )} - "{error.message}" + "{message}"