SFR-2239: Remove error codes from error page

CHANGELOG.md

@@ -4,6 +4,8 @@
 
 - Update license link for editions, works, and collections to copyright
 - Update License page to Copyright and add section for "In Copyright" explanation
+- Remove error codes from error page
+- Update styling for mobile view of error page
 
 ## [0.18.3]
 

src/components/Feedback/Feedback.tsx

@@ -5,6 +5,7 @@ import { FeedbackContext } from "~/src/context/FeedbackContext";
 
 const DEFAULT_DESCRIPTION_TEXT = "Please share your question or feedback.";
 const ERROR_DESCRIPTION_TEXT = "We are here to help!";
+const ERROR_NOTIFICATION_TEXT = `You are asking for help or information about a page error.`;
 
 const Feedback: React.FC<any> = ({ location }) => {
   const [view, setView] = useState<FeedbackBoxViewType>("form");
@@ -18,14 +19,19 @@ const Feedback: React.FC<any> = ({ location }) => {
     onClose,
     isError,
     notificationText,
+    statusCode,
     setIsError,
     setNotificationText,
   } = useContext(FeedbackContext);
 
   useEffect(() => {
-    if (isError) setDescriptionText(ERROR_DESCRIPTION_TEXT);
-    else setDescriptionText(DEFAULT_DESCRIPTION_TEXT);
-  }, [isError]);
+    if (isError) {
+      setDescriptionText(ERROR_DESCRIPTION_TEXT);
+      setNotificationText(ERROR_NOTIFICATION_TEXT);
+    } else {
+      setDescriptionText(DEFAULT_DESCRIPTION_TEXT);
+    }
+  }, [isError, setNotificationText]);
 
   const onCloseAndReset = () => {
     if (isError) setIsError(false);
@@ -38,7 +44,9 @@ const Feedback: React.FC<any> = ({ location }) => {
     values: React.ComponentProps<typeof FeedbackBox>["onSubmit"]
   ) => {
     submitFeedback({
-      feedback: values.comment,
+      feedback: isError
+        ? `Error Code: ${statusCode ?? "Unknown"} - ${values.comment}`
+        : values.comment,
       category: isError ? "Bug" : values.category,
       url: location,
       email: values.email,

src/context/FeedbackContext.tsx

@@ -12,6 +12,8 @@ type FeedbackContextType = {
   setIsError: React.Dispatch<React.SetStateAction<boolean | null>>;
   notificationText: string | null;
   setNotificationText: React.Dispatch<React.SetStateAction<string | null>>;
+  statusCode: number | null;
+  setStatusCode: React.Dispatch<React.SetStateAction<number | null>>;
 };
 
 export const FeedbackContext = createContext<FeedbackContextType | undefined>(
@@ -24,6 +26,7 @@ export const FeedbackProvider: React.FC<{
   const { FeedbackBox, isOpen, onOpen, onClose } = useFeedbackBox();
   const [isError, setIsError] = useState(null);
   const [notificationText, setNotificationText] = useState(null);
+  const [statusCode, setStatusCode] = useState(null);
 
   return (
     <FeedbackContext.Provider
@@ -36,6 +39,8 @@ export const FeedbackProvider: React.FC<{
         setIsError,
         notificationText,
         setNotificationText,
+        statusCode,
+        setStatusCode,
       }}
     >
       {children}

src/pages/_error.tsx

@@ -14,68 +14,67 @@ import { FeedbackContext } from "../context/FeedbackContext";
 
 const ERROR_PERSISTS = " if the error persists.";
 
-const getNotificationText = (statusCode) => {
-  return `You are asking for help or information about a page error (error code ${statusCode})`;
-};
-
 const errorMap = {
   500: {
-    overline: "error 500",
     heading: "Something went wrong on our end.",
     subText: "We encountered an error while trying to load the page. ",
     tryText: "Try refreshing the page or ",
   },
   404: {
-    overline: "error 404",
     heading: "We couldn't find that page.",
     subText:
       "The page you were looking for doesn't exist or may have moved elsewhere. ",
     tryText: "Try a different URL or ",
   },
   400: {
-    overline: "error 400",
     heading: "There was an unexpected error.",
     subText: "We couldn't process your request at this time. ",
     tryText: "Try again later or ",
   },
 };
 
 const Error = ({ statusCode }) => {
-  const { onOpen, isError, setNotificationText, setIsError } =
+  const { onOpen, isError, setIsError, setStatusCode } =
     useContext(FeedbackContext);
 
   useEffect(() => {
     if (!isError) {
       setIsError(true);
-      setNotificationText(getNotificationText(statusCode));
+      setStatusCode(statusCode);
     }
-  }, [isError, setIsError, setNotificationText, statusCode]);
+  }, [isError, setIsError, setStatusCode, statusCode]);
+
+  // default to 400 messages for unexpected error codes
+  const errorValues = errorMap[statusCode]
+    ? errorMap[statusCode]
+    : errorMap[400];
 
   return (
     <Layout>
       <Flex
         alignItems="center"
         flexDir="column"
+        paddingLeft="l"
+        paddingRight="l"
         textAlign="center"
         role="alert"
       >
         <Image
           src="/images/error-img.png"
           alt=""
           marginBottom="xl"
-          marginTop="xxxl"
+          marginTop={{ base: "xl", md: "xxxl" }}
           width={100}
         />
-        <Text size="overline1">{errorMap[statusCode].overline}</Text>
         <Heading marginTop="s" marginBottom="s">
-          {errorMap[statusCode].heading}
+          {errorValues.heading}
         </Heading>
         <Box>
           <Text noSpace display={{ base: "inline", md: "block" }}>
-            {errorMap[statusCode].subText}
+            {errorValues.subText}
           </Text>
           <Text noSpace display="inline">
-            {errorMap[statusCode].tryText}
+            {errorValues.tryText}
           </Text>
           <Button
             buttonType="text"
@@ -89,7 +88,11 @@ const Error = ({ statusCode }) => {
           </Button>
           {ERROR_PERSISTS}
         </Box>
-        <Box width="fit-content" marginTop="xxl" marginBottom="xxxl">
+        <Box
+          width="fit-content"
+          marginTop={{ base: "xl", md: "xxl" }}
+          marginBottom={{ base: "xxl", md: "xxxl" }}
+        >
           <Link to="/" linkType="buttonPrimary">
             Back to Digital Research Books
           </Link>