replayDataUtils.tsx 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  1. import invariant from 'invariant';
  2. import {duration} from 'moment-timezone';
  3. import isValidDate from 'sentry/utils/date/isValidDate';
  4. import getMinMax from 'sentry/utils/getMinMax';
  5. import type {ReplayRecord} from 'sentry/views/replays/types';
  6. const defaultValues = {
  7. has_viewed: false,
  8. };
  9. export function mapResponseToReplayRecord(apiResponse: any): ReplayRecord {
  10. // Marshal special fields into tags
  11. const user = Object.fromEntries(
  12. Object.entries(apiResponse.user)
  13. .filter(([key, value]) => key !== 'display_name' && value)
  14. .map(([key, value]) => [`user.${key}`, [value]])
  15. );
  16. const unorderedTags: ReplayRecord['tags'] = {
  17. ...apiResponse.tags,
  18. ...(apiResponse.browser?.name ? {'browser.name': [apiResponse.browser.name]} : {}),
  19. ...(apiResponse.browser?.version
  20. ? {'browser.version': [apiResponse.browser.version]}
  21. : {}),
  22. ...(apiResponse.device?.brand ? {'device.brand': [apiResponse.device.brand]} : {}),
  23. ...(apiResponse.device?.family ? {'device.family': [apiResponse.device.family]} : {}),
  24. ...(apiResponse.device?.model_id
  25. ? {'device.model_id': [apiResponse.device.model_id]}
  26. : {}),
  27. ...(apiResponse.device?.name ? {'device.name': [apiResponse.device.name]} : {}),
  28. ...(apiResponse.environment ? {environment: [apiResponse.environment]} : {}),
  29. ...(apiResponse.platform ? {platform: [apiResponse.platform]} : {}),
  30. ...(apiResponse.releases ? {releases: [...apiResponse.releases]} : {}),
  31. ...(apiResponse.replay_type ? {replayType: [apiResponse.replay_type]} : {}),
  32. ...(apiResponse.os?.name ? {'os.name': [apiResponse.os.name]} : {}),
  33. ...(apiResponse.os?.version ? {'os.version': [apiResponse.os.version]} : {}),
  34. ...(apiResponse.sdk?.name ? {'sdk.name': [apiResponse.sdk.name]} : {}),
  35. ...(apiResponse.sdk?.version ? {'sdk.version': [apiResponse.sdk.version]} : {}),
  36. ...user,
  37. };
  38. const startedAt = new Date(apiResponse.started_at);
  39. invariant(isValidDate(startedAt), 'replay.started_at is invalid');
  40. const finishedAt = new Date(apiResponse.finished_at);
  41. invariant(isValidDate(finishedAt), 'replay.finished_at is invalid');
  42. return {
  43. ...defaultValues,
  44. ...apiResponse,
  45. ...(apiResponse.started_at ? {started_at: startedAt} : {}),
  46. ...(apiResponse.finished_at ? {finished_at: finishedAt} : {}),
  47. ...(apiResponse.duration !== undefined
  48. ? {duration: duration(apiResponse.duration * 1000)}
  49. : {}),
  50. tags: unorderedTags,
  51. };
  52. }
  53. /**
  54. * We need to figure out the real start and end timestamps based on when
  55. * first and last bits of data were collected. In milliseconds.
  56. *
  57. * @deprecated Once the backend returns the corrected timestamps, this is not needed.
  58. */
  59. export function replayTimestamps(
  60. replayRecord: ReplayRecord,
  61. rrwebEvents: {timestamp: number}[],
  62. rawCrumbs: {timestamp: number}[],
  63. rawSpanData: {endTimestamp: number; op: string; startTimestamp: number}[]
  64. ) {
  65. const rrwebTimestamps = rrwebEvents.map(event => event.timestamp).filter(Boolean);
  66. const breadcrumbTimestamps = rawCrumbs
  67. .map(rawCrumb => rawCrumb.timestamp)
  68. .filter(Boolean);
  69. const rawSpanDataFiltered = rawSpanData.filter(
  70. ({op}) => op !== 'web-vital' && op !== 'largest-contentful-paint'
  71. );
  72. const spanStartTimestamps = rawSpanDataFiltered
  73. .map(span => span.startTimestamp)
  74. .filter(Boolean);
  75. const spanEndTimestamps = rawSpanDataFiltered
  76. .map(span => span.endTimestamp)
  77. .filter(Boolean);
  78. // Calculate min/max of each array individually, to prevent extra allocations.
  79. // Also using `getMinMax()` so we can handle any huge arrays.
  80. const {min: minRRWeb, max: maxRRWeb} = getMinMax(rrwebTimestamps);
  81. const {min: minCrumbs, max: maxCrumbs} = getMinMax(breadcrumbTimestamps);
  82. const {min: minSpanStarts} = getMinMax(spanStartTimestamps);
  83. const {max: maxSpanEnds} = getMinMax(spanEndTimestamps);
  84. return {
  85. startTimestampMs: Math.min(
  86. replayRecord.started_at.getTime(),
  87. minRRWeb,
  88. minCrumbs * 1000,
  89. minSpanStarts * 1000
  90. ),
  91. endTimestampMs: Math.max(
  92. replayRecord.finished_at.getTime(),
  93. maxRRWeb,
  94. maxCrumbs * 1000,
  95. maxSpanEnds * 1000
  96. ),
  97. };
  98. }