replaySpanFrameData.ts 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  1. import {RawSpanFrame} from 'sentry/utils/replays/types';
  2. type Overwrite<T, U> = Pick<T, Exclude<keyof T, keyof U>> & U;
  3. type TestableFrame<Op extends RawSpanFrame['op']> = Overwrite<
  4. Partial<Extract<RawSpanFrame, {op: Op}>>,
  5. {endTimestamp: Date; startTimestamp: Date}
  6. >;
  7. type MockFrame<Op extends RawSpanFrame['op']> = Extract<RawSpanFrame, {op: Op}>;
  8. function BaseFrame<T extends RawSpanFrame['op']>(
  9. op: T,
  10. fields: TestableFrame<T>
  11. ): MockFrame<T> {
  12. return {
  13. op,
  14. description: fields.description ?? '',
  15. startTimestamp: fields.startTimestamp.getTime() / 1000,
  16. endTimestamp: fields.endTimestamp.getTime() / 1000,
  17. data: fields.data,
  18. } as MockFrame<T>;
  19. }
  20. export function ReplayLargestContentfulPaintFrameFixture(
  21. fields: TestableFrame<'largest-contentful-paint'>
  22. ): MockFrame<'largest-contentful-paint'> {
  23. return BaseFrame('largest-contentful-paint', {
  24. ...fields,
  25. data: {
  26. nodeId: fields.data?.nodeId,
  27. size: fields.data?.size ?? 0,
  28. value: fields.data?.value ?? 0,
  29. },
  30. });
  31. }
  32. export function ReplayMemoryFrameFixture(
  33. fields: TestableFrame<'memory'>
  34. ): MockFrame<'memory'> {
  35. return BaseFrame('memory', {
  36. ...fields,
  37. data: {
  38. memory: {
  39. jsHeapSizeLimit: fields.data?.memory?.jsHeapSizeLimit ?? 0,
  40. totalJSHeapSize: fields.data?.memory?.totalJSHeapSize ?? 0,
  41. usedJSHeapSize: fields.data?.memory?.usedJSHeapSize ?? 0,
  42. },
  43. },
  44. });
  45. }
  46. export function ReplayNavigationFrameFixture(
  47. fields: TestableFrame<
  48. 'navigation.navigate' | 'navigation.reload' | 'navigation.back_forward'
  49. >
  50. ): MockFrame<'navigation.navigate' | 'navigation.reload' | 'navigation.back_forward'> {
  51. return BaseFrame(fields.op ?? 'navigation.navigate', {
  52. ...fields,
  53. data: {
  54. decodedBodySize: fields.data?.decodedBodySize,
  55. domComplete: fields.data?.domComplete,
  56. domContentLoadedEventEnd: fields.data?.domContentLoadedEventEnd,
  57. domContentLoadedEventStart: fields.data?.domContentLoadedEventStart,
  58. domInteractive: fields.data?.domInteractive,
  59. duration: fields.data?.duration,
  60. encodedBodySize: fields.data?.encodedBodySize,
  61. loadEventEnd: fields.data?.loadEventEnd,
  62. loadEventStart: fields.data?.loadEventStart,
  63. redirectCount: fields.data?.redirectCount,
  64. size: fields.data?.size,
  65. },
  66. });
  67. }
  68. export function ReplayNavigationPushFrameFixture(
  69. fields: TestableFrame<'navigation.push'>
  70. ): MockFrame<'navigation.push'> {
  71. return BaseFrame('navigation.push', {
  72. ...fields,
  73. data: {
  74. previous: fields.data?.previous ?? '/',
  75. },
  76. });
  77. }
  78. export function ReplayPaintFrameFixture(
  79. fields: TestableFrame<'paint'>
  80. ): MockFrame<'paint'> {
  81. return BaseFrame('paint', fields);
  82. }
  83. export function ReplayRequestFrameFixture(
  84. fields: TestableFrame<'resource.fetch' | 'resource.xhr' | 'resource.http'>
  85. ): MockFrame<'resource.fetch' | 'resource.xhr' | 'resource.http'> {
  86. return BaseFrame(fields.op ?? 'resource.xhr', {
  87. ...fields,
  88. data: {
  89. method: fields.data?.method,
  90. requestBodySize: fields.data?.requestBodySize,
  91. responseBodySize: fields.data?.responseBodySize,
  92. statusCode: fields.data?.statusCode,
  93. request: fields.data?.request,
  94. response: fields.data?.response,
  95. },
  96. });
  97. }
  98. export function ReplayResourceFrameFixture(
  99. fields: TestableFrame<
  100. | 'resource.css'
  101. | 'resource.iframe'
  102. | 'resource.img'
  103. | 'resource.link'
  104. | 'resource.other'
  105. | 'resource.script'
  106. >
  107. ): MockFrame<
  108. | 'resource.css'
  109. | 'resource.iframe'
  110. | 'resource.img'
  111. | 'resource.link'
  112. | 'resource.other'
  113. | 'resource.script'
  114. > {
  115. return BaseFrame(fields.op ?? 'resource.other', {
  116. ...fields,
  117. data: {
  118. decodedBodySize: fields.data?.decodedBodySize ?? 0,
  119. encodedBodySize: fields.data?.encodedBodySize ?? 0,
  120. size: fields.data?.size ?? 0,
  121. statusCode: fields.data?.statusCode,
  122. },
  123. });
  124. }