replayReader.tsx 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. import type {Crumb} from 'sentry/types/breadcrumbs';
  2. import {
  3. breadcrumbFactory,
  4. isMemorySpan,
  5. isNetworkSpan,
  6. replayTimestamps,
  7. rrwebEventListFactory,
  8. spansFactory,
  9. } from 'sentry/utils/replays/replayDataUtils';
  10. import type {
  11. MemorySpanType,
  12. RecordingEvent,
  13. ReplayCrumb,
  14. ReplayError,
  15. ReplayRecord,
  16. ReplaySpan,
  17. } from 'sentry/views/replays/types';
  18. interface ReplayReaderParams {
  19. breadcrumbs: ReplayCrumb[] | undefined;
  20. errors: ReplayError[] | undefined;
  21. /**
  22. * The root Replay event, created at the start of the browser session.
  23. */
  24. replayRecord: ReplayRecord | undefined;
  25. /**
  26. * The captured data from rrweb.
  27. * Saved as N attachments that belong to the root Replay event.
  28. */
  29. rrwebEvents: RecordingEvent[] | undefined;
  30. spans: ReplaySpan[] | undefined;
  31. }
  32. type RequiredNotNull<T> = {
  33. [P in keyof T]: NonNullable<T[P]>;
  34. };
  35. export default class ReplayReader {
  36. static factory({
  37. breadcrumbs,
  38. replayRecord,
  39. errors,
  40. rrwebEvents,
  41. spans,
  42. }: ReplayReaderParams) {
  43. if (!breadcrumbs || !replayRecord || !rrwebEvents || !spans || !errors) {
  44. return null;
  45. }
  46. return new ReplayReader({breadcrumbs, replayRecord, errors, rrwebEvents, spans});
  47. }
  48. private constructor({
  49. breadcrumbs,
  50. replayRecord,
  51. errors,
  52. rrwebEvents,
  53. spans,
  54. }: RequiredNotNull<ReplayReaderParams>) {
  55. // TODO(replays): We should get correct timestamps from the backend instead
  56. // of having to fix them up here.
  57. const {startTimestampMs, endTimestampMs} = replayTimestamps(
  58. replayRecord,
  59. rrwebEvents,
  60. breadcrumbs,
  61. spans
  62. );
  63. replayRecord.startedAt = new Date(startTimestampMs);
  64. replayRecord.finishedAt = new Date(endTimestampMs);
  65. const sortedSpans = spansFactory(spans);
  66. this.networkSpans = sortedSpans.filter(isNetworkSpan);
  67. this.memorySpans = sortedSpans.filter(isMemorySpan);
  68. this.breadcrumbs = breadcrumbFactory(replayRecord, errors, breadcrumbs, sortedSpans);
  69. this.rrwebEvents = rrwebEventListFactory(replayRecord, rrwebEvents);
  70. this.replayRecord = replayRecord;
  71. }
  72. private replayRecord: ReplayRecord;
  73. private rrwebEvents: RecordingEvent[];
  74. private breadcrumbs: Crumb[];
  75. private networkSpans: ReplaySpan[];
  76. private memorySpans: MemorySpanType[];
  77. /**
  78. * @returns Duration of Replay (milliseonds)
  79. */
  80. getDurationMs = () => {
  81. return this.replayRecord.duration * 1000;
  82. };
  83. getReplay = () => {
  84. return this.replayRecord;
  85. };
  86. getRRWebEvents = () => {
  87. return this.rrwebEvents;
  88. };
  89. getRawCrumbs = () => {
  90. return this.breadcrumbs;
  91. };
  92. getNetworkSpans = () => {
  93. return this.networkSpans;
  94. };
  95. getMemorySpans = () => {
  96. return this.memorySpans;
  97. };
  98. }