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 && }
+
);
}