(superset) branch master updated: fix(chart): render chart error stack trace in monospace in dark mode (#42320)

[sophieyou]

This is an automated email from the ASF dual-hosted git repository.

yousoph pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git


The following commit(s) were added to refs/heads/master by this push:
     new c257fa7d66e fix(chart): render chart error stack trace in monospace in 
dark mode (#42320)
c257fa7d66e is described below

commit c257fa7d66e351727a80a007203143cd8266d6d2
Author: yousoph <sophieyo...@gmail.com>
AuthorDate: Wed Jul 29 10:20:11 2026 -0700

    fix(chart): render chart error stack trace in monospace in dark mode 
(#42320)
    
    Co-authored-by: Claude Opus 4.8 <nore...@anthropic.com>
---
 .../components/ErrorMessage/ErrorMessageWithStackTrace.tsx    | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git 
a/superset-frontend/src/components/ErrorMessage/ErrorMessageWithStackTrace.tsx 
b/superset-frontend/src/components/ErrorMessage/ErrorMessageWithStackTrace.tsx
index a98820837e5..890374012a5 100644
--- 
a/superset-frontend/src/components/ErrorMessage/ErrorMessageWithStackTrace.tsx
+++ 
b/superset-frontend/src/components/ErrorMessage/ErrorMessageWithStackTrace.tsx
@@ -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);