index.tsx 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191
  1. import {Component} from 'react';
  2. import isPropValid from '@emotion/is-prop-valid';
  3. import styled from '@emotion/styled';
  4. import {addErrorMessage} from 'sentry/actionCreators/indicator';
  5. import type {Client} from 'sentry/api';
  6. import LoadingIndicator from 'sentry/components/loadingIndicator';
  7. import type SplitDiff from 'sentry/components/splitDiff';
  8. import {t} from 'sentry/locale';
  9. import {space} from 'sentry/styles/space';
  10. import type {Organization, Project} from 'sentry/types';
  11. import {trackAnalytics} from 'sentry/utils/analytics';
  12. import getStacktraceBody from 'sentry/utils/getStacktraceBody';
  13. import withApi from 'sentry/utils/withApi';
  14. const defaultProps = {
  15. baseEventId: 'latest',
  16. targetEventId: 'latest',
  17. };
  18. type DefaultProps = typeof defaultProps;
  19. type Props = {
  20. api: Client;
  21. baseIssueId: string;
  22. orgId: string;
  23. project: Project;
  24. targetIssueId: string;
  25. baseEventId?: string;
  26. className?: string;
  27. organization?: Organization;
  28. shouldBeGrouped?: string;
  29. targetEventId?: string;
  30. };
  31. type State = {
  32. baseEvent: Array<string>;
  33. loading: boolean;
  34. targetEvent: Array<string>;
  35. SplitDiffAsync?: typeof SplitDiff;
  36. };
  37. class IssueDiff extends Component<Props, State> {
  38. static defaultProps: DefaultProps = defaultProps;
  39. state: State = {
  40. loading: true,
  41. baseEvent: [],
  42. targetEvent: [],
  43. // `SplitDiffAsync` is an async-loaded component
  44. // This will eventually contain a reference to the exported component from `./splitDiff`
  45. SplitDiffAsync: undefined,
  46. };
  47. componentDidMount() {
  48. this.fetchData();
  49. }
  50. fetchData() {
  51. const {
  52. baseIssueId,
  53. targetIssueId,
  54. baseEventId,
  55. targetEventId,
  56. organization,
  57. project,
  58. shouldBeGrouped,
  59. } = this.props;
  60. const hasSimilarityEmbeddingsFeature = project.features.includes(
  61. 'similarity-embeddings'
  62. );
  63. // Fetch component and event data
  64. const asyncFetch = async () => {
  65. try {
  66. const splitdiffPromise = import('../splitDiff');
  67. const {default: SplitDiffAsync} = await splitdiffPromise;
  68. const [baseEventData, targetEventData] = await Promise.all([
  69. this.fetchEvent(baseIssueId, baseEventId ?? 'latest'),
  70. this.fetchEvent(targetIssueId, targetEventId ?? 'latest'),
  71. ]);
  72. const [baseEvent, targetEvent] = await Promise.all([
  73. getStacktraceBody(baseEventData, hasSimilarityEmbeddingsFeature),
  74. getStacktraceBody(targetEventData, hasSimilarityEmbeddingsFeature),
  75. ]);
  76. this.setState({
  77. SplitDiffAsync,
  78. baseEvent,
  79. targetEvent,
  80. loading: false,
  81. });
  82. if (organization && hasSimilarityEmbeddingsFeature) {
  83. trackAnalytics('issue_details.similar_issues.diff_clicked', {
  84. organization,
  85. project_id: baseEventData?.projectID,
  86. group_id: baseEventData?.groupID,
  87. error_message: baseEventData?.message
  88. ? baseEventData.message
  89. : baseEventData?.title,
  90. stacktrace: baseEvent.join('/n '),
  91. transaction: this.getTransaction(
  92. baseEventData?.tags ? baseEventData.tags : []
  93. ),
  94. parent_group_id: targetEventData?.groupID,
  95. parent_error_message: targetEventData?.message
  96. ? targetEventData.message
  97. : targetEventData?.title,
  98. parent_stacktrace: targetEvent.join('/n '),
  99. parent_transaction: this.getTransaction(
  100. targetEventData?.tags ? targetEventData.tags : []
  101. ),
  102. shouldBeGrouped: shouldBeGrouped,
  103. });
  104. }
  105. } catch {
  106. addErrorMessage(t('Error loading events'));
  107. }
  108. };
  109. asyncFetch();
  110. }
  111. fetchEvent = async (issueId: string, eventId: string) => {
  112. const {orgId, project, api} = this.props;
  113. let paramEventId = eventId;
  114. if (eventId === 'latest') {
  115. const event = await api.requestPromise(`/issues/${issueId}/events/latest/`);
  116. paramEventId = event.eventID;
  117. }
  118. const event = await api.requestPromise(
  119. `/projects/${orgId}/${project.slug}/events/${paramEventId}/`
  120. );
  121. return event;
  122. };
  123. getTransaction = (tags: any[]) => {
  124. return tags.find(tag => tag.key === 'transaction');
  125. };
  126. render() {
  127. const {className} = this.props;
  128. const {SplitDiffAsync: DiffComponent, loading, baseEvent, targetEvent} = this.state;
  129. return (
  130. <StyledIssueDiff className={className} loading={loading}>
  131. {loading && <LoadingIndicator />}
  132. {!loading &&
  133. DiffComponent &&
  134. baseEvent.map((value, i) => (
  135. <DiffComponent
  136. key={i}
  137. base={value}
  138. target={targetEvent[i] ?? ''}
  139. type="words"
  140. />
  141. ))}
  142. </StyledIssueDiff>
  143. );
  144. }
  145. }
  146. export default withApi(IssueDiff);
  147. // required for tests which do not provide API as context
  148. export {IssueDiff};
  149. const StyledIssueDiff = styled('div', {
  150. shouldForwardProp: p => typeof p === 'string' && isPropValid(p) && p !== 'loading',
  151. })<Pick<State, 'loading'>>`
  152. background-color: ${p => p.theme.backgroundSecondary};
  153. overflow: auto;
  154. padding: ${space(1)};
  155. flex: 1;
  156. display: flex;
  157. flex-direction: column;
  158. ${p =>
  159. p.loading &&
  160. `
  161. background-color: ${p.theme.background};
  162. justify-content: center;
  163. align-items: center;
  164. `};
  165. `;