diff --git a/packages/core/ui/ErrorMessageStackTraceDialog.tsx b/packages/core/ui/ErrorMessageStackTraceDialog.tsx
index 6a7eaed4a8a..726c0115739 100644
--- a/packages/core/ui/ErrorMessageStackTraceDialog.tsx
+++ b/packages/core/ui/ErrorMessageStackTraceDialog.tsx
@@ -88,6 +88,42 @@ function stripMessage(trace: string, error: unknown) {
   }
 }
 
+function Contents({ text }: { text: string }) {
+  const err = encodeURIComponent(
+    'I got this error from JBrowse, here is the stack trace:\n\n```\n' +
+      text +
+      '\n```\n',
+  )
+  const githubLink = `https://github.com/GMOD/jbrowse-components/issues/new?labels=bug&title=JBrowse+issue&body=${err}`
+  const emailLink = `mailto:jbrowse2dev@gmail.com?subject=JBrowse%202%20error&body=${err}`
+
+  return (
+    <>
+      <Typography>
+        Post a new issue at{' '}
+        <Link href={githubLink} target="_blank">
+          GitHub
+        </Link>{' '}
+        or send an email to{' '}
+        <Link href={emailLink} target="_blank">
+          jbrowse2dev@gmail.com
+        </Link>{' '}
+      </Typography>
+      <pre
+        style={{
+          background: 'lightgrey',
+          border: '1px solid black',
+          overflow: 'auto',
+          margin: 20,
+          maxHeight: 300,
+        }}
+      >
+        {text}
+      </pre>
+    </>
+  )
+}
+
 export default function ErrorMessageStackTraceDialog({
   error,
   onClose,
@@ -128,42 +164,13 @@ export default function ErrorMessageStackTraceDialog({
     window.JBrowseSession ? `JBrowse ${window.JBrowseSession.version}` : '',
   ].join('\n')
 
-  const err = encodeURIComponent(
-    'I got this error from JBrowse, here is the stack trace:\n\n```\n' +
-      errorBoxText +
-      '\n```\n',
-  )
-  const githubLink = `https://github.com/GMOD/jbrowse-components/issues/new?labels=bug&title=JBrowse+issue&body=${err}`
-  const emailLink = `mailto:jbrowse2dev@gmail.com?subject=JBrowse%202%20error&body=${err}`
   return (
     <Dialog open onClose={onClose} title="Stack trace" maxWidth="xl">
       <DialogContent>
         {mappedStackTrace === undefined ? (
           <LoadingEllipses variant="h6" />
         ) : (
-          <>
-            <Typography>
-              Post a new issue at{' '}
-              <Link href={githubLink} target="_blank">
-                GitHub
-              </Link>{' '}
-              or send an email to{' '}
-              <Link href={emailLink} target="_blank">
-                jbrowse2dev@gmail.com
-              </Link>{' '}
-            </Typography>
-            <pre
-              style={{
-                background: 'lightgrey',
-                border: '1px solid black',
-                overflow: 'auto',
-                margin: 20,
-                maxHeight: 300,
-              }}
-            >
-              {errorBoxText}
-            </pre>
-          </>
+          <Contents text={errorBoxText} />
         )}
       </DialogContent>
       <DialogActions>
diff --git a/plugins/alignments/src/shared/BaseDisplayComponent.tsx b/plugins/alignments/src/shared/BaseDisplayComponent.tsx
index 918f7117c28..633b272b98b 100644
--- a/plugins/alignments/src/shared/BaseDisplayComponent.tsx
+++ b/plugins/alignments/src/shared/BaseDisplayComponent.tsx
@@ -6,11 +6,12 @@ import {
 } from '@jbrowse/plugin-linear-genome-view'
 import { makeStyles } from 'tss-react/mui'
 import { observer } from 'mobx-react'
+import { getContainingView } from '@jbrowse/core/util'
+import { Button, Tooltip } from '@mui/material'
 
 // local
 import { LinearReadCloudDisplayModel } from '../LinearReadCloudDisplay/model'
 import { LinearReadArcsDisplayModel } from '../LinearReadArcsDisplay/model'
-import { getContainingView } from '@jbrowse/core/util'
 
 const useStyles = makeStyles()(theme => ({
   loading: {
@@ -38,8 +39,13 @@ const BaseDisplayComponent = observer(function ({
     <BlockMsg
       message={`${error}`}
       severity="error"
-      buttonText="Reload"
-      action={model.reload}
+      action={
+        <Tooltip title="Reload">
+          <Button data-testid="reload_button" onClick={() => model.reload()}>
+            Reload
+          </Button>
+        </Tooltip>
+      }
     />
   ) : regionTooLarge ? (
     model.regionCannotBeRendered()
diff --git a/plugins/arc/src/LinearPairedArcDisplay/components/BaseDisplayComponent.tsx b/plugins/arc/src/LinearPairedArcDisplay/components/BaseDisplayComponent.tsx
index 57c228b4c6b..91bd153bc7b 100644
--- a/plugins/arc/src/LinearPairedArcDisplay/components/BaseDisplayComponent.tsx
+++ b/plugins/arc/src/LinearPairedArcDisplay/components/BaseDisplayComponent.tsx
@@ -1,4 +1,5 @@
-import React from 'react'
+import React, { lazy } from 'react'
+import { IconButton, Tooltip } from '@mui/material'
 import { LoadingEllipses } from '@jbrowse/core/ui'
 import { BlockMsg } from '@jbrowse/plugin-linear-genome-view'
 import { makeStyles } from 'tss-react/mui'
@@ -7,6 +8,16 @@ import { observer } from 'mobx-react'
 // local
 import { LinearArcDisplayModel } from '../model'
 
+// icons
+import RefreshIcon from '@mui/icons-material/Refresh'
+import ReportIcon from '@mui/icons-material/Report'
+
+import { getSession } from '@jbrowse/core/util'
+
+const ErrorMessageStackTraceDialog = lazy(
+  () => import('@jbrowse/core/ui/ErrorMessageStackTraceDialog'),
+)
+
 const useStyles = makeStyles()(theme => ({
   loading: {
     backgroundColor: theme.palette.background.default,
@@ -33,8 +44,30 @@ const BaseDisplayComponent = observer(function ({
     <BlockMsg
       message={`${error}`}
       severity="error"
-      buttonText="Reload"
-      action={model.reload}
+      action={
+        <>
+          <Tooltip title="Reload">
+            <IconButton
+              data-testid="reload_button"
+              onClick={() => model.reload()}
+            >
+              <RefreshIcon />
+            </IconButton>
+          </Tooltip>
+          <Tooltip title="Show stack trace">
+            <IconButton
+              onClick={() => {
+                getSession(model).queueDialog(onClose => [
+                  ErrorMessageStackTraceDialog,
+                  { onClose, error: model.error as Error },
+                ])
+              }}
+            >
+              <ReportIcon />
+            </IconButton>
+          </Tooltip>
+        </>
+      }
     />
   ) : regionTooLarge ? (
     model.regionCannotBeRendered()
diff --git a/plugins/data-management/src/HierarchicalTrackSelectorWidget/components/dialogs/ManageConnectionsDialog.tsx b/plugins/data-management/src/HierarchicalTrackSelectorWidget/components/dialogs/ManageConnectionsDialog.tsx
index 601b9c892d0..6926e543b76 100644
--- a/plugins/data-management/src/HierarchicalTrackSelectorWidget/components/dialogs/ManageConnectionsDialog.tsx
+++ b/plugins/data-management/src/HierarchicalTrackSelectorWidget/components/dialogs/ManageConnectionsDialog.tsx
@@ -26,6 +26,16 @@ const useStyles = makeStyles()(theme => ({
   },
 }))
 
+function DisabledButton() {
+  return (
+    <Tooltip title="Unable to delete connection in config file as non-admin user">
+      <IconButton>
+        <CloseIcon color="disabled" />
+      </IconButton>
+    </Tooltip>
+  )
+}
+
 const ManageConnectionsDialog = observer(function ({
   session,
   handleClose,
@@ -53,11 +63,7 @@ const ManageConnectionsDialog = observer(function ({
                     <CloseIcon color="error" />
                   </IconButton>
                 ) : (
-                  <Tooltip title="Unable to delete connection in config file as non-admin user">
-                    <IconButton>
-                      <CloseIcon color="disabled" />
-                    </IconButton>
-                  </Tooltip>
+                  <DisabledButton />
                 )}
                 {name}
               </Typography>
diff --git a/plugins/linear-genome-view/src/BaseLinearDisplay/components/BlockMsg.tsx b/plugins/linear-genome-view/src/BaseLinearDisplay/components/BlockMsg.tsx
index 7d6b984b826..2ab327747db 100644
--- a/plugins/linear-genome-view/src/BaseLinearDisplay/components/BlockMsg.tsx
+++ b/plugins/linear-genome-view/src/BaseLinearDisplay/components/BlockMsg.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Tooltip, Button, Alert, AlertColor } from '@mui/material'
+import { Tooltip, Alert, AlertColor } from '@mui/material'
 import { makeStyles } from 'tss-react/mui'
 
 const useStyles = makeStyles()({
@@ -12,26 +12,17 @@ const useStyles = makeStyles()({
 export default function BlockMsg({
   message,
   severity,
-  buttonText,
-  icon,
   action,
 }: {
   message: string
   severity?: AlertColor
-  buttonText?: string
-  icon?: React.ReactNode
-  action?: () => void
+  action?: React.ReactNode
 }) {
   const { classes } = useStyles()
-  const button = action ? (
-    <Button data-testid="reload_button" onClick={action} startIcon={icon}>
-      {buttonText}
-    </Button>
-  ) : null
   return (
     <Alert
       severity={severity}
-      action={button}
+      action={action}
       classes={{ message: classes.ellipses }}
     >
       <Tooltip title={message}>
diff --git a/plugins/linear-genome-view/src/BaseLinearDisplay/components/LinearBlocks.tsx b/plugins/linear-genome-view/src/BaseLinearDisplay/components/LinearBlocks.tsx
index d1a50abb3bc..7e5d10ba368 100644
--- a/plugins/linear-genome-view/src/BaseLinearDisplay/components/LinearBlocks.tsx
+++ b/plugins/linear-genome-view/src/BaseLinearDisplay/components/LinearBlocks.tsx
@@ -58,10 +58,10 @@ const RenderedBlocks = observer(function ({
               block={block}
               key={`${model.id}-${block.key}`}
             >
-              {state && state.ReactComponent ? (
+              {state?.ReactComponent ? (
                 <state.ReactComponent model={state} />
               ) : null}
-              {state && state.maxHeightReached ? (
+              {state?.maxHeightReached ? (
                 <div
                   className={classes.heightOverflowed}
                   style={{
diff --git a/plugins/linear-genome-view/src/BaseLinearDisplay/components/ServerSideRenderedBlockContent.tsx b/plugins/linear-genome-view/src/BaseLinearDisplay/components/ServerSideRenderedBlockContent.tsx
index 1c6e54e61ea..a8451a34a4e 100644
--- a/plugins/linear-genome-view/src/BaseLinearDisplay/components/ServerSideRenderedBlockContent.tsx
+++ b/plugins/linear-genome-view/src/BaseLinearDisplay/components/ServerSideRenderedBlockContent.tsx
@@ -1,4 +1,6 @@
-import React from 'react'
+import React, { Suspense, lazy, useState } from 'react'
+import { Tooltip, IconButton } from '@mui/material'
+
 import { makeStyles } from 'tss-react/mui'
 import { observer } from 'mobx-react'
 import { getParent } from 'mobx-state-tree'
@@ -6,9 +8,15 @@ import { LoadingEllipses } from '@jbrowse/core/ui'
 
 // icons
 import RefreshIcon from '@mui/icons-material/Refresh'
+import ReportIcon from '@mui/icons-material/Report'
 
 // locals
 import BlockMsg from './BlockMsg'
+import { getSession } from '@jbrowse/core/util'
+
+const ErrorMessageStackTraceDialog = lazy(
+  () => import('@jbrowse/core/ui/ErrorMessageStackTraceDialog'),
+)
 
 const useStyles = makeStyles()(theme => {
   const bg = theme.palette.action.disabledBackground
@@ -42,14 +50,36 @@ const ServerSideRenderedBlockContent = observer(function ({
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   model: any
 }) {
+  const [showStack, setShowStack] = useState(false)
   if (model.error) {
     return (
       <BlockMsg
         message={`${model.error}`}
         severity="error"
-        buttonText="reload"
-        icon={<RefreshIcon />}
-        action={model.reload}
+        action={
+          <>
+            <Tooltip title="Reload">
+              <IconButton
+                data-testid="reload_button"
+                onClick={() => model.reload()}
+              >
+                <RefreshIcon />
+              </IconButton>
+            </Tooltip>
+            <Tooltip title="Show stack trace">
+              <IconButton
+                onClick={() => {
+                  getSession(model).queueDialog(onClose => [
+                    ErrorMessageStackTraceDialog,
+                    { onClose, error: model.error },
+                  ])
+                }}
+              >
+                <ReportIcon />
+              </IconButton>
+            </Tooltip>
+          </>
+        }
       />
     )
   } else if (model.message) {
diff --git a/plugins/linear-genome-view/src/BaseLinearDisplay/components/TooLargeMessage.tsx b/plugins/linear-genome-view/src/BaseLinearDisplay/components/TooLargeMessage.tsx
index 3856d247a5a..82ea071cdd9 100644
--- a/plugins/linear-genome-view/src/BaseLinearDisplay/components/TooLargeMessage.tsx
+++ b/plugins/linear-genome-view/src/BaseLinearDisplay/components/TooLargeMessage.tsx
@@ -3,6 +3,7 @@ import { FeatureDensityStats } from '@jbrowse/core/data_adapters/BaseAdapter'
 
 // locals
 import BlockMsg from '../components/BlockMsg'
+import { Button } from '@mui/material'
 
 function TooLargeMessage({
   model,
@@ -18,11 +19,16 @@ function TooLargeMessage({
   return (
     <BlockMsg
       severity="warning"
-      action={() => {
-        model.setFeatureDensityStatsLimit(model.featureDensityStats)
-        model.reload()
-      }}
-      buttonText="Force load"
+      action={
+        <Button
+          onClick={() => {
+            model.setFeatureDensityStatsLimit(model.featureDensityStats)
+            model.reload()
+          }}
+        >
+          Force load
+        </Button>
+      }
       message={[
         regionTooLargeReason,
         'Zoom in to see features or force load (may be slow)',