helpers.ts 2.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. import * as BreadcrumbFrameData from './replayBreadcrumbFrameData';
  2. import * as ReplayFrameEvents from './replayFrameEvents';
  3. import * as ReplaySpanFrameData from './replaySpanFrameData';
  4. export function ConsoleEvent({timestamp, message}: {timestamp: Date; message?: string}) {
  5. return ReplayFrameEvents.BreadcrumbFrameEvent({
  6. timestamp,
  7. data: {
  8. payload: BreadcrumbFrameData.ConsoleFrame({
  9. timestamp,
  10. message: message ?? 'Hello World',
  11. }),
  12. },
  13. });
  14. }
  15. export function ClickEvent({timestamp}: {timestamp: Date}) {
  16. return ReplayFrameEvents.BreadcrumbFrameEvent({
  17. timestamp,
  18. data: {
  19. payload: BreadcrumbFrameData.ClickFrame({
  20. timestamp,
  21. message: 'nav[aria-label="Primary Navigation"] > div > a#sidebar-item-projects',
  22. data: {
  23. nodeId: 42,
  24. },
  25. }),
  26. },
  27. });
  28. }
  29. export function NavigateEvent({
  30. startTimestamp,
  31. endTimestamp,
  32. }: {
  33. endTimestamp: Date;
  34. startTimestamp: Date;
  35. }) {
  36. const duration = endTimestamp.getTime() - startTimestamp.getTime(); // in MS
  37. return ReplayFrameEvents.SpanFrameEvent({
  38. timestamp: startTimestamp,
  39. data: {
  40. payload: ReplaySpanFrameData.NavigationFrame({
  41. op: 'navigation.navigate',
  42. startTimestamp,
  43. endTimestamp,
  44. description: '',
  45. data: {
  46. size: 1149,
  47. decodedBodySize: 1712,
  48. encodedBodySize: 849,
  49. duration,
  50. domInteractive: duration - 200,
  51. domContentLoadedEventStart: duration - 50,
  52. domContentLoadedEventEnd: duration - 48,
  53. loadEventStart: duration, // real value would be approx the same
  54. loadEventEnd: duration, // real value would be approx the same
  55. domComplete: duration, // real value would be approx the same
  56. redirectCount: 0,
  57. },
  58. }),
  59. },
  60. });
  61. }
  62. export function MemoryEvent({
  63. startTimestamp,
  64. endTimestamp,
  65. }: {
  66. endTimestamp: Date;
  67. startTimestamp: Date;
  68. }) {
  69. return ReplayFrameEvents.SpanFrameEvent({
  70. timestamp: startTimestamp,
  71. data: {
  72. payload: ReplaySpanFrameData.MemoryFrame({
  73. op: 'memory',
  74. startTimestamp,
  75. endTimestamp,
  76. description: '',
  77. }),
  78. },
  79. });
  80. }