does logrocket use ffmpeg to record the web app session
LogRocket's recording mechanism is focused on capturing the state and actions within a web application rather than directly recording the screen like a traditional video. Here's an outline of how LogRocket records sessions without relying on video capture tools such as FFmpeg:
1. DOM Snapshotting and Mutation Observation
- Initial Snapshot: LogRocket takes an initial snapshot of the DOM (Document Object Model) when a user starts a session on your website. This snapshot includes the HTML structure and the current state of the styles, inputs, and more, providing a baseline for the session replay.
- Mutation Observation: After the initial snapshot, LogRocket uses the MutationObserver API to listen for and record changes to the DOM. These changes include user interactions like clicks, typing, and navigation, as well as changes resulting from JavaScript operations. This approach ensures that the session replay reflects the dynamic nature of modern web applications.
2. JavaScript Event Listeners
LogRocket registers event listeners for various user actions, such as mouse movements, clicks, scrolls, and keyboard inputs. These events are captured and recorded to recreate user interactions during the session playback. Sensitive information can be excluded from recording through configuration settings to maintain user privacy.
3. Network Activity Monitoring
LogRocket intercepts and records HTTP requests and responses made by the web application. This includes AJAX calls, Fetch requests, and any other network communication, allowing developers to see the data exchanged between the client and servers during the session. This information is crucial for debugging issues related to network requests and server responses.
4. JavaScript Console Logging
The tool captures console logs, warnings, errors, and info messages that are generated by the web application. By recording these messages, LogRocket provides context to the session replay, offering insights into what was happening in the application's JavaScript environment at the time.
5. Error Tracking
LogRocket records JavaScript errors, including stack traces, which helps in identifying and diagnosing issues that users encounter. This feature is integrated seamlessly, providing developers with detailed error information alongside the session replay.
6. Session Replay
Instead of recording a video of the session, LogRocket reconstructs the user's session by replaying the recorded DOM mutations, user interactions, network requests, and console logs. This method results in a highly accurate representation of the user's experience but with much lower data overhead than a video file would require. Since this process is based on reconstructing the recorded actions and state changes rather than capturing video frames, tools like FFmpeg are not involved in LogRocket's recording process.