Skip to content

Commit

Permalink
feat: Add more information to errors if we think cookies are missing
Browse files Browse the repository at this point in the history
  • Loading branch information
AshCorr committed Nov 22, 2024
1 parent 71afae6 commit 22f0e45
Show file tree
Hide file tree
Showing 4 changed files with 41 additions and 6 deletions.
17 changes: 17 additions & 0 deletions src/client/components/GatewayErrorSummary.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
23 changes: 19 additions & 4 deletions src/client/components/GatewayErrorSummary.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
5 changes: 4 additions & 1 deletion src/server/lib/renderer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,10 @@ const clientStateFromRequestStateLocals = ({
...clientState,
pageData: {
...clientState.pageData,
formError: CsrfErrors.CSRF_ERROR,
formError: {
message: CsrfErrors.CSRF_ERROR,
severity: 'CSRF',
},
},
};
}
Expand Down
2 changes: 1 addition & 1 deletion src/shared/model/Errors.ts
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ export enum SubscribeErrors {

export interface StructuredGatewayError {
message: string;
severity: 'BAU' | 'UNEXPECTED';
severity: 'BAU' | 'CSRF' | 'UNEXPECTED';
}

export type GatewayError = StructuredGatewayError | string;
Expand Down

0 comments on commit 22f0e45

Please sign in to comment.