diff --git a/.changeset/real-grapes-sing.md b/.changeset/real-grapes-sing.md new file mode 100644 index 0000000000..80fb9edab0 --- /dev/null +++ b/.changeset/real-grapes-sing.md @@ -0,0 +1,5 @@ +--- +'@backstage/core-components': patch +--- + +Included stack trace display option in ErrorPage component diff --git a/packages/core-components/src/layout/ErrorPage/ErrorPage.test.tsx b/packages/core-components/src/layout/ErrorPage/ErrorPage.test.tsx index 2efdc5da33..64a209e4b8 100644 --- a/packages/core-components/src/layout/ErrorPage/ErrorPage.test.tsx +++ b/packages/core-components/src/layout/ErrorPage/ErrorPage.test.tsx @@ -99,4 +99,15 @@ describe('', () => { 'https://error-page-test-support-url.com', ); }); + + it('should render with stack trace if stack is provided', async () => { + const { getByText } = await renderInTestApp( + , + ); + expect(getByText(/this is my stack trace!/i)).toBeInTheDocument(); + }); }); diff --git a/packages/core-components/src/layout/ErrorPage/ErrorPage.tsx b/packages/core-components/src/layout/ErrorPage/ErrorPage.tsx index 4639e8de59..830abe6ec3 100644 --- a/packages/core-components/src/layout/ErrorPage/ErrorPage.tsx +++ b/packages/core-components/src/layout/ErrorPage/ErrorPage.tsx @@ -15,11 +15,13 @@ */ import Grid from '@material-ui/core/Grid'; +import Box from '@material-ui/core/Box'; import { makeStyles } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; import React from 'react'; import { useNavigate } from 'react-router-dom'; import { Link } from '../../components/Link'; +import { LogViewer } from '../../components'; import { useSupportConfig } from '../../hooks'; import { MicDrop } from './MicDrop'; @@ -28,6 +30,7 @@ interface IErrorPageProps { statusMessage: string; additionalInfo?: React.ReactNode; supportUrl?: string; + stack?: string; } /** @public */ @@ -35,12 +38,18 @@ export type ErrorPageClassKey = 'container' | 'title' | 'subtitle'; const useStyles = makeStyles( theme => ({ - container: { + parent: { padding: theme.spacing(8), [theme.breakpoints.down('xs')]: { padding: theme.spacing(2), }, }, + container: { + marginBottom: theme.spacing(5), + [theme.breakpoints.down('xs')]: { + marginBottom: theme.spacing(4), + }, + }, title: { paddingBottom: theme.spacing(5), [theme.breakpoints.down('xs')]: { @@ -62,37 +71,44 @@ const useStyles = makeStyles( * */ export function ErrorPage(props: IErrorPageProps) { - const { status, statusMessage, additionalInfo, supportUrl } = props; + const { status, statusMessage, additionalInfo, supportUrl, stack } = props; const classes = useStyles(); const navigate = useNavigate(); const support = useSupportConfig(); return ( - - - - ERROR {status}: {statusMessage} - - - {additionalInfo} - - - Looks like someone dropped the mic! - - - navigate(-1)}> - Go back - - ... or please{' '} - contact support if you - think this is a bug. - + + + + + ERROR {status}: {statusMessage} + + + {additionalInfo} + + + Looks like someone dropped the mic! + + + navigate(-1)} + > + Go back + + ... or please{' '} + contact support if you + think this is a bug. + + + - - + {stack && } + ); }