From 25f072565a153336ee17c9a30a83cfb0bcd66caf Mon Sep 17 00:00:00 2001 From: Julia Hoge Date: Tue, 18 Jul 2023 12:01:46 -0700 Subject: [PATCH] Use gray and italicized text for system frames (#51758) Closes https://github.com/getsentry/sentry/issues/50691 and https://github.com/getsentry/sentry/issues/50693 Distinguishes "In App" and "System" frames using gray/italicized text with no pill for "System". Screenshot 2023-07-17 at 4 01 52 PM Screenshot 2023-07-17 at 4 01 40 PM ### Non-Native stacktrace changes ![Screenshot 2023-06-29 at 10 17 37 AM](https://github.com/getsentry/sentry/assets/22582037/2a76e609-3fc5-489d-af81-8ef1b726d062) ![Screenshot 2023-06-29 at 10 16 38 AM](https://github.com/getsentry/sentry/assets/22582037/417fffd4-3402-4171-91b2-5883ec3ecc50) --- .../interfaces/frame/deprecatedLine.tsx | 49 +++++++++++++++---- .../events/interfaces/nativeFrame.tsx | 28 +++++++++-- 2 files changed, 63 insertions(+), 14 deletions(-) diff --git a/static/app/components/events/interfaces/frame/deprecatedLine.tsx b/static/app/components/events/interfaces/frame/deprecatedLine.tsx index 973299c11e75f..bc32fca709018 100644 --- a/static/app/components/events/interfaces/frame/deprecatedLine.tsx +++ b/static/app/components/events/interfaces/frame/deprecatedLine.tsx @@ -274,6 +274,9 @@ export class DeprecatedLine extends Component { const {isHoverPreviewed, debugFrames, data, isANR, threadId, lockAddress} = this.props; const organization = this.props.organization; + const stacktraceChangesEnabled = !!organization?.features.includes( + 'issue-details-stacktrace-improvements' + ); const anrCulprit = isANR && analyzeFrameForRootCause( @@ -284,8 +287,14 @@ export class DeprecatedLine extends Component { return ( - - + +
@@ -306,7 +315,9 @@ export class DeprecatedLine extends Component { ) : null} {!data.inApp ? ( - {t('System')} + stacktraceChangesEnabled ? null : ( + {t('System')} + ) ) : ( {t('In App')} )} @@ -332,10 +343,18 @@ export class DeprecatedLine extends Component { const leadHint = this.renderLeadHint(); const packageStatus = this.packageStatus(); + const organization = this.props.organization; + const stacktraceChangesEnabled = !!organization?.features.includes( + 'issue-details-stacktrace-improvements' + ); return ( - + {leadHint} @@ -374,9 +393,16 @@ export class DeprecatedLine extends Component { isHoverPreviewed={isHoverPreviewed} /> - {this.renderExpander()} + + {this.renderExpander()} + + {!data.inApp ? ( - {t('System')} + stacktraceChangesEnabled ? null : ( + {t('System')} + ) ) : ( {t('In App')} )} @@ -453,10 +479,12 @@ const RepeatedFrames = styled('div')` display: inline-block; `; -const DefaultLineTitleWrapper = styled('div')` +const DefaultLineTitleWrapper = styled('div')<{stacktraceChangesEnabled: boolean}>` display: flex; align-items: center; justify-content: space-between; + color: ${p => (p.stacktraceChangesEnabled ? p.theme.subText : '')}; + font-style: ${p => (p.stacktraceChangesEnabled ? 'italic' : '')}; `; const LeftLineTitle = styled('div')` @@ -492,9 +520,12 @@ const NativeLineContent = styled('div')<{isFrameAfterLastNonApp: boolean}>` } `; -const DefaultLine = styled('div')` +const DefaultLine = styled('div')<{stacktraceChangesEnabled: boolean}>` display: grid; - grid-template-columns: 1fr auto ${space(2)}; /* sm icon size */ + grid-template-columns: ${p => + p.stacktraceChangesEnabled + ? `1fr auto auto` + : `1fr auto ${space(2)}`}; /* sm icon size */ align-items: center; `; diff --git a/static/app/components/events/interfaces/nativeFrame.tsx b/static/app/components/events/interfaces/nativeFrame.tsx index 09df4748f1f37..2118d007a9c55 100644 --- a/static/app/components/events/interfaces/nativeFrame.tsx +++ b/static/app/components/events/interfaces/nativeFrame.tsx @@ -29,6 +29,7 @@ import {space} from 'sentry/styles/space'; import {Frame, PlatformType, SentryAppComponent} from 'sentry/types'; import {Event} from 'sentry/types/event'; import {defined} from 'sentry/utils'; +import useOrganization from 'sentry/utils/useOrganization'; import withSentryAppComponents from 'sentry/utils/withSentryAppComponents'; import DebugImage from './debugMeta/debugImage'; @@ -215,11 +216,19 @@ function NativeFrame({ const addressTooltip = getAddressTooltip(); const functionName = getFunctionName(); const status = getStatus(); + const organization = useOrganization(); + const stacktraceChangesEnabled = !!organization?.features.includes( + 'issue-details-stacktrace-improvements' + ); return ( - + {status === 'error' ? ( - {frame.inApp ? ( - {t('In App')} + {!frame.inApp ? ( + stacktraceChangesEnabled ? null : ( + {t('System')} + ) ) : ( - {t('System')} + {t('In App')} )} @@ -401,6 +412,7 @@ const Package = styled('span')` overflow: hidden; text-overflow: ellipsis; width: 100%; + padding-right: 2px; /* Needed to prevent text cropping with italic font */ `; const FileName = styled('span')` @@ -408,7 +420,11 @@ const FileName = styled('span')` border-bottom: 1px dashed ${p => p.theme.border}; `; -const RowHeader = styled('span')<{expandable: boolean; expanded: boolean}>` +const RowHeader = styled('span')<{ + expandable: boolean; + expanded: boolean; + stacktraceChangesEnabled: boolean; +}>` display: grid; grid-template-columns: repeat(2, auto) 1fr repeat(2, auto) ${space(2)}; grid-template-rows: repeat(2, auto); @@ -418,6 +434,8 @@ const RowHeader = styled('span')<{expandable: boolean; expanded: boolean}>` background-color: ${p => p.theme.bodyBackground}; font-size: ${p => p.theme.codeFontSize}; padding: ${space(1)}; + color: ${p => (p.stacktraceChangesEnabled ? p.theme.subText : '')}; + font-style: ${p => (p.stacktraceChangesEnabled ? 'italic' : '')}; ${p => p.expandable && `cursor: pointer;`}; @media (min-width: ${p => p.theme.breakpoints.small}) {