From 589006c37d75cbb7055aa4ebf3533709278f211f Mon Sep 17 00:00:00 2001
From: Jithen Shriyan <shriyanjithen@gmail.com>
Date: Thu, 11 Jan 2024 16:09:14 -0500
Subject: [PATCH] [feat] include stack trace in accordion by default and update
 existing error refs

Signed-off-by: Jithen Shriyan <shriyanjithen@gmail.com>
---
 .../app-defaults/src/defaults/components.tsx  |  2 +-
 .../src/layout/ErrorPage/ErrorPage.tsx        | 33 +++++++++++++++++--
 .../components/PlaylistPage/PlaylistPage.tsx  |  1 +
 .../components/ActionsPage/ActionsPage.tsx    |  1 +
 4 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/packages/app-defaults/src/defaults/components.tsx b/packages/app-defaults/src/defaults/components.tsx
index 1e2fddca07..9b58694f2b 100644
--- a/packages/app-defaults/src/defaults/components.tsx
+++ b/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>
   );
 };
diff --git a/packages/core-components/src/layout/ErrorPage/ErrorPage.tsx b/packages/core-components/src/layout/ErrorPage/ErrorPage.tsx
index 830abe6ec3..823571d8b3 100644
--- a/packages/core-components/src/layout/ErrorPage/ErrorPage.tsx
+++ b/packages/core-components/src/layout/ErrorPage/ErrorPage.tsx
@@ -21,7 +21,7 @@ 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 { CopyTextButton, WarningPanel } from '../../components';
 import { useSupportConfig } from '../../hooks';
 import { MicDrop } from './MicDrop';
 
@@ -60,6 +60,17 @@ const useStyles = makeStyles(
     subtitle: {
       color: theme.palette.textSubtle,
     },
+    text: {
+      fontFamily: 'monospace',
+      whiteSpace: 'pre',
+      overflowX: 'auto',
+      marginRight: theme.spacing(2),
+    },
+    copyTextContainer: {
+      display: 'flex',
+      justifyContent: 'flex-end',
+      alignItems: 'flex-start',
+    },
   }),
   { name: 'BackstageErrorPage' },
 );
@@ -108,7 +119,25 @@ export function ErrorPage(props: IErrorPageProps) {
         </Grid>
         <MicDrop />
       </Grid>
-      {stack && <LogViewer text={stack} />}
+      {stack && (
+        <WarningPanel severity="error" title={statusMessage}>
+          <Grid container className={classes.container}>
+            <Grid item xs={10} sm={8}>
+              <Typography variant="subtitle1">Stack Trace</Typography>
+              <Typography
+                className={classes.text}
+                color="error"
+                variant="body1"
+              >
+                {stack}
+              </Typography>
+            </Grid>
+            <Grid item xs={2} sm={4} className={classes.copyTextContainer}>
+              <CopyTextButton text={stack} />
+            </Grid>
+          </Grid>
+        </WarningPanel>
+      )}
     </Box>
   );
 }
diff --git a/plugins/playlist/src/components/PlaylistPage/PlaylistPage.tsx b/plugins/playlist/src/components/PlaylistPage/PlaylistPage.tsx
index 4c9a0edbb7..b17fbd2fb7 100644
--- a/plugins/playlist/src/components/PlaylistPage/PlaylistPage.tsx
+++ b/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}
       />
     );
   }
diff --git a/plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx b/plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx
index 9957d22456..9c0276fa28 100644
--- a/plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx
+++ b/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}
       />
     );
   }