fix(chart): render chart error stack trace in monospace in dark mode (#42320)

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
yousoph
2026-07-29 10:20:11 -07:00
committed by GitHub
parent 87f7dbf337
commit c257fa7d66

View File

@@ -18,6 +18,7 @@
*/
import { ReactNode } from 'react';
import { t } from '@apache-superset/core/translation';
import { styled } from '@apache-superset/core/theme';
import { ErrorSource, SupersetError } from '@superset-ui/core';
import { Typography } from '@superset-ui/core/components';
import { getErrorMessageComponentRegistry } from './getErrorMessageComponentRegistry';
@@ -25,6 +26,14 @@ import { ErrorAlert } from './ErrorAlert';
const DEFAULT_TITLE = t('Unexpected error');
// Render the stack trace in the monospace font in both light and dark mode.
// Set font-family explicitly from the theme token (as SQL Lab does) rather
// than relying on the browser/antd default styling for `pre`, which is
// cascade-order dependent and can fall back to the UI font in dark mode.
const StackTrace = styled.pre`
font-family: ${({ theme }) => theme.fontFamilyCode};
`;
type Props = {
title?: string;
error?: SupersetError;
@@ -90,7 +99,7 @@ export function ErrorMessageWithStackTrace({
</Typography.Link>
)}
<br />
{stackTrace && <pre>{stackTrace}</pre>}
{stackTrace && <StackTrace>{stackTrace}</StackTrace>}
</>
) : undefined);