Merge pull request #22189 from jithenms/feature/add-stack-trace-in-error-page

[feat] add stack trace option in error page

.changeset/real-grapes-sing.md

@@ -0,0 +1,8 @@
+---
+'@backstage/core-components': patch
+'@backstage/app-defaults': minor
+'@backstage/plugin-playlist': patch
+'@backstage/plugin-scaffolder': minor
+---
+
+Added stack trace display to `ErrorPage` and updated existing refs

packages/app-defaults/src/defaults/components.tsx

@@ -49,7 +49,7 @@ const DefaultBootErrorPage = ({ step, error }: BootErrorPageProps) => {
   // TODO: figure out a nicer way to handle routing on the error page, when it can be done.
   return (
     <OptionallyWrapInRouter>
-      <ErrorPage statusMessage={message} />
+      <ErrorPage statusMessage={message} stack={error.stack} />
     </OptionallyWrapInRouter>
   );
 };

packages/core-components/src/layout/ErrorPage/ErrorPage.test.tsx

@@ -99,4 +99,15 @@ describe('<ErrorPage/>', () => {
       'https://error-page-test-support-url.com',
     );
   });
+
+  it('should render show details if stack is provided', async () => {
+    const { getByText } = await renderInTestApp(
+      <ErrorPage
+        status="500"
+        statusMessage="INTERNAL ERROR"
+        stack="this is my stack trace!"
+      />,
+    );
+    expect(getByText(/Show more details/i)).toBeInTheDocument();
+  });
 });

packages/core-components/src/layout/ErrorPage/ErrorPage.tsx

@@ -22,12 +22,14 @@ import { useNavigate } from 'react-router-dom';
 import { Link } from '../../components/Link';
 import { useSupportConfig } from '../../hooks';
 import { MicDrop } from './MicDrop';
+import { StackDetails } from './StackDetails';
 
 interface IErrorPageProps {
   status?: string;
   statusMessage: string;
   additionalInfo?: React.ReactNode;
   supportUrl?: string;
+  stack?: string;
 }
 
 /** @public */
@@ -62,13 +64,13 @@ 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 (
-    <Grid container spacing={0} className={classes.container}>
+    <Grid container className={classes.container}>
       <Grid item xs={12} sm={8} md={4}>
         <Typography
           data-testid="error"
@@ -83,7 +85,7 @@ export function ErrorPage(props: IErrorPageProps) {
         <Typography variant="h2" className={classes.title}>
           Looks like someone dropped the mic!
         </Typography>
-        <Typography variant="h6">
+        <Typography variant="h6" className={classes.title}>
           <Link to="#" data-testid="go-back-link" onClick={() => navigate(-1)}>
             Go back
           </Link>
@@ -91,6 +93,7 @@ export function ErrorPage(props: IErrorPageProps) {
           <Link to={supportUrl || support.url}>contact support</Link> if you
           think this is a bug.
         </Typography>
+        {stack && <StackDetails stack={stack} />}
       </Grid>
       <MicDrop />
     </Grid>

packages/core-components/src/layout/ErrorPage/StackDetails.tsx

@@ -0,0 +1,77 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import Typography from '@material-ui/core/Typography';
+import React from 'react';
+import { useState } from 'react';
+import { Link } from '../../components/Link';
+import { CodeSnippet } from '../../components';
+import { makeStyles } from '@material-ui/core/styles';
+
+interface IStackDetailsProps {
+  stack: string;
+}
+
+const useStyles = makeStyles(
+  theme => ({
+    title: {
+      paddingBottom: theme.spacing(5),
+      [theme.breakpoints.down('xs')]: {
+        paddingBottom: theme.spacing(4),
+        fontSize: theme.typography.h3.fontSize,
+      },
+    },
+  }),
+  { name: 'BackstageErrorPageStackDetails' },
+);
+
+/**
+ * Error page details with stack trace
+ *
+ * @public
+ *
+ */
+export function StackDetails(props: IStackDetailsProps) {
+  const { stack } = props;
+  const classes = useStyles();
+
+  const [detailsOpen, setDetailsOpen] = useState<boolean>(false);
+
+  if (!detailsOpen) {
+    return (
+      <Typography variant="h6" className={classes.title}>
+        <Link to="#" onClick={() => setDetailsOpen(true)}>
+          Show more details
+        </Link>
+      </Typography>
+    );
+  }
+
+  return (
+    <>
+      <Typography variant="h6" className={classes.title}>
+        <Link to="#" onClick={() => setDetailsOpen(false)}>
+          Show less details
+        </Link>
+      </Typography>
+      <CodeSnippet
+        text={stack}
+        language="text"
+        showCopyCodeButton
+        showLineNumbers
+      />
+    </>
+  );
+}

plugins/playlist/src/components/PlaylistPage/PlaylistPage.tsx

@@ -84,6 +84,7 @@ export const PlaylistPage = () => {
       <ErrorPage
         status={(error as ResponseError).response?.status.toString()}
         statusMessage={error.toString()}
+        stack={error.stack}
       />
     );
   }

plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx

@@ -142,6 +142,7 @@ export const ActionsPage = () => {
       <ErrorPage
         statusMessage="Failed to load installed actions"
         status="500"
+        stack={error.stack}
       />
     );
   }