Data Collected by Our Product

Overview

Our product is designed to provide comprehensive insights into user interactions and application performance. This is achieved by capturing a wide range of data that enables developers to debug, monitor, and improve the user experience effectively. Below is a detailed breakdown of the data we collect:

The data collected by our product is categorized into several key areas that help monitor the health of the application, track user behavior, identify issues, and optimize performance. By understanding these data points, developers can make informed decisions to enhance the overall user experience.

1. DOM Video Replay and User Events

DOM Video Replay

  • Records the state of the DOM during user sessions, ensuring that all user interactions and page states are captured accurately.
  • Allows playback of user interactions as if viewing a live session, enabling teams to visually debug issues and understand user behavior.
  • Includes visual updates and user-driven changes to provide a clear picture of the user's experience, including mouse movements, clicks, and page scrolls.
  • Helps in understanding user paths and identifying UI/UX issues by reproducing the exact session environment.

User Events

  • Clicks: Tracks where and how users interact with clickable elements on the interface, such as buttons, links, or forms. This helps identify which elements are more engaging and which are being ignored.
  • Scrolls: Monitors scrolling activity to understand navigation patterns, including how users move through a page and how much content they view.
  • Other Events: Captures input, focus changes, and hover states to give a comprehensive interaction map, which can be used to track form submissions, input errors, or focus shifts.
  • This data can be used to optimize user interfaces, reduce friction, and enhance overall usability by identifying and resolving pain points.

2. Network Requests and Responses

  • Request Metadata: Captures the full set of request data, including the URL, headers, payload, and request method (GET, POST, PUT, DELETE, etc.). This information helps track the source of requests and debug issues related to the frontend/backend communication.
  • Response Metadata: Includes status codes (200, 404, 500, etc.), headers, response time, and data payload. By capturing this data, you can measure the success or failure of requests and detect any issues in data fetching or API communication.
  • Enables tracing of failed or delayed requests to identify backend issues or network problems, ensuring a better user experience by addressing performance bottlenecks.
  • Highlights bottlenecks in network performance, such as slow response times or timeouts, and their impact on user experience, allowing for targeted optimizations.

3. Performance Data

  • Page Load Time: Measures the time it takes for a page to fully load, including the time for all assets (images, scripts, styles) to be fetched from the server. This metric is critical for optimizing the speed of web applications.
  • Time to Interactive: Tracks how long it takes before the user can interact with the page, ensuring that users are not left waiting for key functionality to become available.
  • Resource Timing: Breaks down the time spent loading individual resources like scripts, stylesheets, and images. This helps developers pinpoint which resources are slowing down the page and optimize their loading strategies (e.g., lazy loading, asynchronous scripts).
  • Pinpoints performance bottlenecks, such as large images, unoptimized scripts, or network latency, to guide optimization efforts that can significantly reduce page load times.
  • This data is valuable for improving web application performance, ensuring that users have a smooth, fast, and responsive experience.

4. Console and Redux Logs

Console Logs

  • Captures warnings, errors, and informational messages output to the browser console. These logs are essential for diagnosing JavaScript errors, API failures, and debugging application behavior.
  • Helps identify unexpected behavior during runtime, such as failed network requests, unhandled exceptions, or resource loading issues.
  • Developers can use console logs to trace the flow of data, identify performance issues, and track down bugs in the application.

Redux Logs (if applicable)

  • Tracks state changes and dispatched actions within applications using Redux, providing a timeline of state updates.
  • Helps debug complex state management flows by showing exactly how actions modify the app’s state and ensuring that the state is being updated correctly.
  • Can be especially helpful in large applications with multiple components, where understanding the state flow is crucial for debugging and ensuring consistent behavior.

Benefits of Data Collection

  • Actionable Insights: Provides developers with a clear view of how users interact with the application and where issues arise. This data empowers developers to prioritize feature improvements and bug fixes based on actual user behavior.
  • Improved Debugging: Reduces the time to identify and resolve bugs by replaying sessions, analyzing detailed logs, and pinpointing exactly where things went wrong. This approach can significantly reduce downtime and improve application stability.
  • Enhanced Performance: Helps pinpoint performance bottlenecks in real time, guiding optimization efforts such as code splitting, caching strategies, and resource loading optimizations. By addressing these issues, developers can enhance the user experience by improving speed and responsiveness.
  • Optimized User Experience: By understanding how users interact with the application, you can identify friction points and refine the UI/UX design to improve user satisfaction and retention.
  • Informed Decision Making: The collected data allows teams to make data-driven decisions on product features, marketing strategies, and more, ensuring a higher return on investment (ROI) and improved business outcomes.