eventErrors.tsx 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
  1. import styled from '@emotion/styled';
  2. import isEqual from 'lodash/isEqual';
  3. import uniqWith from 'lodash/uniqWith';
  4. import {Alert} from 'sentry/components/alert';
  5. import {ErrorItem, EventErrorData} from 'sentry/components/events/errorItem';
  6. import List from 'sentry/components/list';
  7. import {JavascriptProcessingErrors} from 'sentry/constants/eventErrors';
  8. import {t, tn} from 'sentry/locale';
  9. import space from 'sentry/styles/space';
  10. import {Artifact, Project} from 'sentry/types';
  11. import {Event} from 'sentry/types/event';
  12. import {defined} from 'sentry/utils';
  13. import {useQuery} from 'sentry/utils/queryClient';
  14. import useOrganization from 'sentry/utils/useOrganization';
  15. import {DataSection} from './styles';
  16. const MAX_ERRORS = 100;
  17. type EventErrorsProps = {
  18. event: Event;
  19. proGuardErrors: Array<EventErrorData>;
  20. projectSlug: Project['slug'];
  21. };
  22. const getURLPathname = (url: string) => {
  23. try {
  24. return new URL(url).pathname;
  25. } catch {
  26. return undefined;
  27. }
  28. };
  29. export const EventErrors = ({event, proGuardErrors, projectSlug}: EventErrorsProps) => {
  30. const organization = useOrganization();
  31. const orgSlug = organization.slug;
  32. const releaseVersion = event.release?.version;
  33. const pathNames = (event.errors ?? [])
  34. .filter(
  35. error =>
  36. error.type === 'js_no_source' && error.data.url && getURLPathname(error.data.url)
  37. )
  38. .map(sourceCodeError => getURLPathname(sourceCodeError.data.url));
  39. const {data: releaseArtifacts} = useQuery<Artifact[]>(
  40. [
  41. `/projects/${orgSlug}/${projectSlug}/releases/${encodeURIComponent(
  42. releaseVersion ?? ''
  43. )}/files/`,
  44. {query: {query: pathNames}},
  45. ],
  46. {staleTime: Infinity, enabled: pathNames.length > 0 && defined(releaseVersion)}
  47. );
  48. const {dist: eventDistribution, errors: eventErrors = [], _meta} = event;
  49. // XXX: uniqWith returns unique errors and is not performant with large datasets
  50. const otherErrors: Array<EventErrorData> =
  51. eventErrors.length > MAX_ERRORS ? eventErrors : uniqWith(eventErrors, isEqual);
  52. const errors = [...otherErrors, ...proGuardErrors];
  53. return (
  54. <StyledDataSection>
  55. <StyledAlert
  56. type="error"
  57. showIcon
  58. data-test-id="event-error-alert"
  59. expand={
  60. <ErrorList data-test-id="event-error-details" symbol="bullet">
  61. {errors.map((error, errorIdx) => {
  62. const data = error.data ?? {};
  63. const meta = _meta?.errors?.[errorIdx];
  64. if (
  65. error.type === JavascriptProcessingErrors.JS_MISSING_SOURCE &&
  66. data.url &&
  67. !!releaseArtifacts?.length
  68. ) {
  69. const releaseArtifact = releaseArtifacts.find(releaseArt => {
  70. const pathname = data.url ? getURLPathname(data.url) : undefined;
  71. if (pathname) {
  72. return releaseArt.name.includes(pathname);
  73. }
  74. return false;
  75. });
  76. const releaseArtifactDistribution = releaseArtifact?.dist ?? null;
  77. // Neither event nor file have dist -> matching
  78. // Event has dist, file doesn’t -> not matching
  79. // File has dist, event doesn’t -> not matching
  80. // Both have dist, same value -> matching
  81. // Both have dist, different values -> not matching
  82. if (releaseArtifactDistribution !== eventDistribution) {
  83. error.message = t(
  84. 'Source code was not found because the distribution did not match'
  85. );
  86. data['expected-distribution'] = eventDistribution;
  87. data['current-distribution'] = releaseArtifactDistribution;
  88. }
  89. }
  90. return <ErrorItem key={errorIdx} error={{...error, data}} meta={meta} />;
  91. })}
  92. </ErrorList>
  93. }
  94. >
  95. {tn(
  96. 'There was %s problem processing this event',
  97. 'There were %s problems processing this event',
  98. errors.length
  99. )}
  100. </StyledAlert>
  101. </StyledDataSection>
  102. );
  103. };
  104. const StyledDataSection = styled(DataSection)`
  105. border-top: none;
  106. @media (min-width: ${p => p.theme.breakpoints.small}) {
  107. padding-top: 0;
  108. }
  109. `;
  110. const StyledAlert = styled(Alert)`
  111. margin: ${space(0.5)} 0;
  112. `;
  113. const ErrorList = styled(List)`
  114. li:last-child {
  115. margin-bottom: 0;
  116. }
  117. `;