import {useEffect} from 'react'; import * as Sentry from '@sentry/react'; import Alert from 'sentry/components/alert'; import ExternalLink from 'sentry/components/links/externalLink'; import {t, tct} from 'sentry/locale'; import useOrganization from 'sentry/utils/useOrganization'; import {traceAnalytics} from 'sentry/views/performance/newTraceDetails/traceAnalytics'; import {TraceType} from './traceType'; type TraceWarningsProps = { type: TraceType; }; export function TraceWarnings({type}: TraceWarningsProps) { const organization = useOrganization(); useEffect(() => { traceAnalytics.trackTraceWarningType(type, organization); }, [type, organization]); switch (type) { case TraceType.NO_ROOT: return ( {t( 'A root transaction is missing. Transactions linked by a dashed line have been orphaned and cannot be directly linked to the root.' )} ); case TraceType.BROKEN_SUBTRACES: return ( {t( 'This trace has broken subtraces. Transactions linked by a dashed line have been orphaned and cannot be directly linked to the root.' )} ); // Multiple roots are an edge case in browser SDKs and should be handled by the SDK. // The user should not see a warning as they cannot do anything about it. case TraceType.BROWSER_MULTIPLE_ROOTS: return null; case TraceType.MULTIPLE_ROOTS: return ( {t('Multiple root transactions have been found with this trace ID.')} ); case TraceType.ONLY_ERRORS: return ( {tct( "The good news is we know these errors are related to each other. The bad news is that we can't tell you more than that. If you haven't already, [tracingLink: configure performance monitoring for your SDKs] to learn more about service interactions.", { tracingLink: ( ), } )} ); case TraceType.ONE_ROOT: case TraceType.EMPTY_TRACE: return null; default: Sentry.captureMessage(`Unhandled trace type - ${type}`); return null; } }