import {useEffect, useState} from 'react'; import {browserHistory, RouteComponentProps} from 'react-router'; import {Client} from 'sentry/api'; import LoadingError from 'sentry/components/loadingError'; import LoadingIndicator from 'sentry/components/loadingIndicator'; import {Organization} from 'sentry/types'; import trackAdvancedAnalyticsEvent from 'sentry/utils/analytics/trackAdvancedAnalyticsEvent'; import useApi from 'sentry/utils/useApi'; import {alertDetailsLink, fetchIncident} from './utils'; type Props = { api: Client; organization: Organization; } & RouteComponentProps<{alertId: string; orgId: string}, {}>; function IncidentDetails({organization, params}: Props) { const api = useApi(); const [hasError, setHasError] = useState(false); const track = () => { trackAdvancedAnalyticsEvent('alert_details.viewed', { organization, alert_id: parseInt(params.alertId, 10), }); }; const fetchData = async () => { setHasError(false); try { const incident = await fetchIncident(api, params.orgId, params.alertId); browserHistory.replace({ pathname: alertDetailsLink(organization, incident), query: {alert: incident.identifier}, }); } catch (err) { setHasError(true); } }; useEffect(() => { fetchData(); track(); }, []); if (hasError) { return ; } return ; } export default IncidentDetails;