useTrace.tsx 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. import {useMemo} from 'react';
  2. import type {Location} from 'history';
  3. import * as qs from 'query-string';
  4. import type {Client} from 'sentry/api';
  5. import {normalizeDateTimeParams} from 'sentry/components/organizations/pageFilters/parse';
  6. import {ALL_ACCESS_PROJECTS} from 'sentry/constants/pageFilters';
  7. import type {PageFilters} from 'sentry/types';
  8. import type {
  9. TraceFullDetailed,
  10. TraceSplitResults,
  11. } from 'sentry/utils/performance/quickTrace/types';
  12. import {useApiQuery, type UseApiQueryResult} from 'sentry/utils/queryClient';
  13. import {decodeScalar} from 'sentry/utils/queryString';
  14. import useOrganization from 'sentry/utils/useOrganization';
  15. import usePageFilters from 'sentry/utils/usePageFilters';
  16. import {useParams} from 'sentry/utils/useParams';
  17. export function fetchTrace(
  18. api: Client,
  19. params: {
  20. orgSlug: string;
  21. query: string;
  22. traceId: string;
  23. }
  24. ): Promise<TraceSplitResults<TraceFullDetailed>> {
  25. return api.requestPromise(
  26. `/organizations/${params.orgSlug}/events-trace/${params.traceId}/?${params.query}`
  27. );
  28. }
  29. const DEFAULT_TIMESTAMP_LIMIT = 10_000;
  30. const DEFAULT_LIMIT = 1_000;
  31. export function getTraceQueryParams(
  32. query: Location['query'],
  33. filters: Partial<PageFilters> = {},
  34. options: {limit?: number} = {}
  35. ): {
  36. eventId: string | undefined;
  37. limit: number;
  38. project: string;
  39. timestamp: string | undefined;
  40. useSpans: number;
  41. pageEnd?: string | undefined;
  42. pageStart?: string | undefined;
  43. statsPeriod?: string | undefined;
  44. } {
  45. const normalizedParams = normalizeDateTimeParams(query, {
  46. allowAbsolutePageDatetime: true,
  47. });
  48. const statsPeriod = decodeScalar(normalizedParams.statsPeriod);
  49. const project = decodeScalar(normalizedParams.project, ALL_ACCESS_PROJECTS + '');
  50. const timestamp = decodeScalar(normalizedParams.timestamp);
  51. let decodedLimit: string | number | undefined =
  52. options.limit ?? decodeScalar(normalizedParams.limit);
  53. if (typeof decodedLimit === 'string') {
  54. decodedLimit = parseInt(decodedLimit, 10);
  55. }
  56. const eventId = decodeScalar(normalizedParams.eventId);
  57. if (timestamp) {
  58. decodedLimit = decodedLimit ?? DEFAULT_TIMESTAMP_LIMIT;
  59. } else {
  60. decodedLimit = decodedLimit ?? DEFAULT_LIMIT;
  61. }
  62. const limit = decodedLimit;
  63. const otherParams: Record<string, string | string[] | undefined | null> = {
  64. end: normalizedParams.pageEnd,
  65. start: normalizedParams.pageStart,
  66. statsPeriod: statsPeriod || filters.datetime?.period,
  67. };
  68. // We prioritize timestamp over statsPeriod as it makes the query more specific, faster
  69. // and not prone to time drift issues.
  70. if (timestamp) {
  71. delete otherParams.statsPeriod;
  72. }
  73. const queryParams = {...otherParams, limit, project, timestamp, eventId, useSpans: 1};
  74. for (const key in queryParams) {
  75. if (
  76. queryParams[key] === '' ||
  77. queryParams[key] === null ||
  78. queryParams[key] === undefined
  79. ) {
  80. delete queryParams[key];
  81. }
  82. }
  83. return queryParams;
  84. }
  85. type UseTraceParams = {
  86. limit?: number;
  87. };
  88. const DEFAULT_OPTIONS = {};
  89. export function useTrace(
  90. options: Partial<UseTraceParams> = DEFAULT_OPTIONS
  91. ): UseApiQueryResult<TraceSplitResults<TraceFullDetailed>, any> {
  92. const filters = usePageFilters();
  93. const organization = useOrganization();
  94. const params = useParams<{traceSlug?: string}>();
  95. const queryParams = useMemo(() => {
  96. const query = qs.parse(location.search);
  97. return getTraceQueryParams(query, filters.selection, options);
  98. // eslint-disable-next-line react-hooks/exhaustive-deps
  99. }, [options]);
  100. return useApiQuery(
  101. [
  102. `/organizations/${organization.slug}/events-trace/${params.traceSlug ?? ''}/`,
  103. {query: queryParams},
  104. ],
  105. {
  106. staleTime: Infinity,
  107. enabled: !!params.traceSlug && !!organization.slug,
  108. }
  109. );
  110. }