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;
}
}