[feat] include stack trace in accordion by default and update existing error refs

Signed-off-by: Jithen Shriyan <shriyanjithen@gmail.com>

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.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>
   );
 }

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}
       />
     );
   }