feat: Add more information to errors if we think cookies are missing

Author: AshCorr

src/client/components/GatewayErrorSummary.stories.tsx

@@ -61,3 +61,20 @@ export const WithStructuredUnexpectedError = () => (
 		shortRequestId="123e4567"
 	></GatewayErrorSummary>
 );
+
+const CsrfError: StructuredGatewayError = {
+	message: 'An unexpected error happened unexpectedly',
+	severity: 'CSRF',
+};
+
+export const WithStructuredCSRFError = () => (
+	<GatewayErrorSummary
+		gatewayError={CsrfError}
+		context={
+			<p css={[errorContextSpacing, errorContextLastTypeSpacing]}>
+				Since this was a CSRF error we show cookie help details
+			</p>
+		}
+		shortRequestId="123e4567"
+	></GatewayErrorSummary>
+);

src/client/components/GatewayErrorSummary.tsx

@@ -18,18 +18,33 @@ interface GateWayErrorSummaryProps
 
 export const GatewayErrorSummary = (props: GateWayErrorSummaryProps) => {
 	const structuredError = asStructuredError(props.gatewayError);
-	const fullContext =
-		props.shortRequestId && structuredError?.severity !== 'BAU'
+	const fullContext = [
+		props.context,
+		// A CSRF error is likely to be the first error a user sees if they have cookies disabled
+		// so enrich it with some extra details about how to enable cookies.
+		...(structuredError?.severity === 'CSRF'
+			? [
+					<p>
+						If the problem persists please check if your browser has cookies
+						enabled. You can find details on how to enable cookies in our{' '}
+						<a href="https://www.theguardian.com/info/cookies#how-to-manage-cookies-at-the-guardian">
+							Cookies FAQ
+						</a>
+						.
+					</p>,
+				]
+			: []),
+		...(props.shortRequestId && structuredError?.severity !== 'BAU'
 			? [
-					props.context,
 					<p
 						css={[errorContextSpacing, errorContextLastTypeSpacing]}
 						key={'requestId'}
 					>
 						Request ID: {props.shortRequestId}
 					</p>,
 				]
-			: props.context;
+			: []),
+	];
 
 	return (
 		<ErrorSummary

src/server/lib/renderer.tsx

@@ -86,7 +86,10 @@ const clientStateFromRequestStateLocals = ({
 			...clientState,
 			pageData: {
 				...clientState.pageData,
-				formError: CsrfErrors.CSRF_ERROR,
+				formError: {
+					message: CsrfErrors.CSRF_ERROR,
+					severity: 'CSRF',
+				},
 			},
 		};
 	}

src/shared/model/Errors.ts

@@ -92,7 +92,7 @@ export enum SubscribeErrors {
 
 export interface StructuredGatewayError {
 	message: string;
-	severity: 'BAU' | 'UNEXPECTED';
+	severity: 'BAU' | 'CSRF' | 'UNEXPECTED';
 }
 
 export type GatewayError = StructuredGatewayError | string;