Session Replay Debugging Next.js Applications with Sentry

Session Replay | Debugging Next.js Applications with Sentry 🔗 **Source:** [Session Replay | Debugging Next.js Applications with Sentry](https://www.youtube.com/watch?v=8W5VGHYv6GY) > [!note]+ Document Notes > tags: [sentry, session-replay, nextjs] > author: Sentry > source: YouTube > reference: https://www.youtube.com/watch?v=8W5VGHYv6GY > date created: 2024-12-19 16:30 > > # 🏷️ Title: Session Replay | Debugging Next.js Applications with Sentry >  ## 🧰 Action Inbox - [H1] Set up session replay integration in Next.js instrumentation file — 02:34 #sentry - [H2] Configure sample rates for performance monitoring — 03:15 #performance - [H3] Implement privacy controls and content unmasking — 07:20 #privacy ## 🧭 Table of Contents - [📝 Summary](#-summary) - [📖 Main Content](#-main-content) - [🗒️ Notes](#️-notes) - [📚 References](#-references) - [🗣️ Paraphrase](#️-paraphrase) - [📰 Newsletter](#-newsletter) - [✅ Action Items](#-action-items) - [🧪 Hypotheses](#-hypotheses) - [📊 Methodology](#-methodology) - [❓ Questions](#-questions) - [🔮 Future Research](#-future-research) - [💡 Implications](#-implications) - [🧠 Learning Styles Assessment](#-learning-styles-assessment) - [📊 Accessibility Assessment](#-accessibility-assessment) - [🌍 DEIB Assessment](#-deib-assessment) - [✅ Logical Validity](#-logical-validity) - [🛡️ DARVO Analysis](#-darvo-analysis) - [🎯 Conclusion](#-conclusion) ### 🔗 References - [Sentry Documentation](https://docs.sentry.io/) - [RR Web Open Source](https://www.rrweb.io/) ## 📝 Summary - Sentry Session Replay provides video-like reproduction of user interactions for debugging Next.js applications - Uses open source RR web technology with minimal performance impact on frontend applications - Configuration involves client-side instrumentation with session and error sample rates - Privacy-first approach masks content by default with granular unmasking controls - Integrates with user authentication and component tracking for enhanced debugging context ## 📖 Main Content Session Replay is Sentry's debugging tool that captures user interactions as video-like reproductions to help developers understand how errors occur in their applications. Built on the open source RR web technology with custom mutation observers, it tracks clicks, scrolls, and other interactions with minimal frontend performance impact. The implementation requires only client-side configuration in Next.js applications through the instrumentation file. Developers configure two sample rates: one for general session sampling and another for error-specific replays. The system first checks session sample rates, then falls back to error sampling if needed. Privacy is a core consideration - all content is masked by default. Developers can selectively unmask content using CSS selectors and data attributes. The system supports user identification through Sentry's setUser API and component annotation for tracking critical application flows. ## 🗒️ Notes #### ⏱️ [00:00](https://youtu.be/8W5VGHYv6GY?t=0) — [H1] Introduction to Session Replay - Key idea: Session Replay captures video-like reproductions of user interactions with minimal performance impact - Evidence: "Session Replay is a video like reproduction of all the interaction that user is taking on your application" #### ⏱️ [00:45](https://youtu.be/8W5VGHYv6GY?t=45) — [H2] Technology Stack Overview - Key idea: Uses open source RR web technology with custom mutation observers for interaction tracking - Evidence: "We use an open source technology called RR web as well as some custom mutation observers for interactions like clicks and scrolls" #### ⏱️ [01:20](https://youtu.be/8W5VGHYv6GY?t=80) — [H3] Client-Side Configuration Requirements - Key idea: Session replay requires only client-side configuration in the instrumentation file - Evidence: "Because session replay is client side only, the only configuration that you need to update is your instrumentation clients file" #### ⏱️ [01:45](https://youtu.be/8W5VGHYv6GY?t=105) — [H1] Sample Rate Configuration - Key idea: Two sample rates control when replays are captured - general sessions and error-specific - Evidence: "Two sample rates one for session replay sample rate and one for replays on error sample rate" #### ⏱️ [02:15](https://youtu.be/8W5VGHYv6GY?t=135) — [H2] Sampling Logic Flow - Key idea: System checks session sample rate first, then falls back to error sample rate with buffering - Evidence: "On every single session we first check for the session sample rate... we fall back to the error sample rate" #### ⏱️ [03:15](https://youtu.be/8W5VGHYv6GY?t=195) — [H3] Development vs Production Settings - Key idea: Development can use 100% sample rates but production needs quota management - Evidence: "In development, you can keep these at 100%, but keep an eye out on your quota" #### ⏱️ [04:30](https://youtu.be/8W5VGHYv6GY?t=270) — [H2] Viewing Replays in Sentry Interface - Key idea: Replays are accessed through Sentry's explore section with application and timeframe filters - Evidence: "Inside central, you're going to head over to explore and go to replays" #### ⏱️ [05:45](https://youtu.be/8W5VGHYv6GY?t=345) — [H1] Session Continuity and Storage - Key idea: Sessions persist across tabs using session storage for complete user journey tracking - Evidence: "It's actually going to be part of the same session because we're using session storage" #### ⏱️ [06:30](https://youtu.be/8W5VGHYv6GY?t=390) — [H2] Replay Features and Context - Key idea: Replays include AI summaries, console logs, network requests, and interaction scrubbing - Evidence: "You'll get an AI summary of all of the actions and all the things that happened within this session" #### ⏱️ [07:00](https://youtu.be/8W5VGHYv6GY?t=420) — [H1] Privacy-First Content Masking - Key idea: All content is masked by default to protect user privacy - Evidence: "We take privacy really seriously and so by default we mask everything" #### ⏱️ [07:30](https://youtu.be/8W5VGHYv6GY?t=450) — [H2] Selective Content Unmasking - Key idea: Developers can unmask specific content using CSS selectors and data attributes - Evidence: "We can add options like unmask and we can pass it any CSS selector" #### ⏱️ [08:45](https://youtu.be/8W5VGHYv6GY?t=525) — [H3] Component Tracking and Annotation - Key idea: Components can be annotated for filtering and tracking critical user flows - Evidence: "Data centric component attribute which will show up in replays. And then you'll be able to filter down by specific components" #### ⏱️ [10:00](https://youtu.be/8W5VGHYv6GY?t=600) — [H2] User Authentication Integration - Key idea: Sentry.setUser API provides user context for authenticated application debugging - Evidence: "Anytime you have a user session, use the Sentry.setUser API and pass it all the details for that user" #### ⏱️ [12:00](https://youtu.be/8W5VGHYv6GY?t=720) — [H3] Canvas and 3D Application Support - Key idea: Session replay works with canvas, WebGL, and WebGPU applications without PII scrubbing - Evidence: "Session replay also works inside canvases. Just keep in mind that there is no PII scrubbing inside those" ## 📚 References - [Sentry Session Replay Documentation](https://docs.sentry.io/product/session-replay/) - [RR Web Project](https://www.rrweb.io/) - [Next.js Integration Guide](https://docs.sentry.io/platforms/javascript/guides/nextjs/) ## 🗣️ Paraphrase - Session Replay creates video-style recordings of user interactions to help developers debug applications by understanding exactly what users did before encountering errors - The system uses minimal client-side configuration with smart sampling strategies that balance comprehensive coverage with performance and quota management - Privacy protection is built-in by default with granular controls allowing developers to selectively reveal necessary content while maintaining user data security ## 📰 Newsletter **Enhance Your Next.js Debugging with Sentry Session Replay** Session Replay transforms how you debug user issues by providing video-like reproductions of actual user interactions. This powerful tool helps you see exactly what happened before an error occurred, making debugging faster and more accurate. The implementation is straightforward - just add the session replay integration to your Next.js instrumentation file and configure your sample rates. The privacy-first approach masks all content by default, giving you control over what information is captured. Whether you're tracking critical user flows, debugging complex interactions, or understanding user behavior patterns, Session Replay provides the context traditional error logs can't offer. Resources: [Sentry Documentation](https://docs.sentry.io/), [RR Web Project](https://www.rrweb.io/), [Next.js Integration Guide](https://docs.sentry.io/platforms/javascript/guides/nextjs/) ## ✅ Action Items #### DevRel - Developer education: Create workshop content on debugging strategies with session replay, office hours on implementation patterns - Developer experience: Improve documentation for privacy controls and sample rate optimization - Developer marketing: Case study campaign showing session replay debugging success stories - Community management: Forum support for session replay configuration questions #### WordPress - Core: Evaluate session replay integration for WordPress admin debugging - Core Performance: Assess session replay impact on WordPress site performance budgets - Plugin Ecosystem: Session replay integration guides for WordPress plugin developers - Community: Training materials on debugging WordPress applications with session replay ## 🧪 Hypotheses - Session replay reduces mean time to resolution for user-reported bugs by providing complete interaction context - Privacy-first masking approach increases developer adoption rates compared to tools with less granular privacy controls - Component-level tracking enables more targeted debugging for complex React/Next.js applications - Error-specific sampling provides cost-effective coverage for production debugging workflows ### 📊 Methodology - A/B testing comparing debugging speed with and without session replay context - Performance impact analysis measuring frontend metrics before and after session replay implementation - User privacy survey measuring developer comfort with different masking configurations ### ❓ Questions - How does session replay performance impact scale with application complexity and user base size? - What privacy configuration patterns work best for different application types and compliance requirements? - How can session replay data be integrated with other observability tools for comprehensive debugging workflows? ### 🔮 Future Research - Machine learning analysis of session replay patterns to predict and prevent user errors - Integration possibilities between session replay and automated testing frameworks - Cross-platform session replay standardization for multi-technology stacks ### 💡 Implications - Practice: Debugging workflows shift from log analysis to visual interaction review - Security: Enhanced privacy controls require careful configuration to balance debugging needs with user protection - Education: Developer training must include privacy-aware debugging practices and tool configuration - Funding: Session replay quota costs need consideration in monitoring and observability budgets ### 🧠 Learning Styles Assessment Reading level estimate: Grade 10 #### 👀 Visual learners - Present: Screen recordings showing Sentry interface, code examples with syntax highlighting - Improve: Architecture diagrams showing data flow, comparison charts for sample rate strategies #### 🔊 Aural learners - Present: Narrator explaining concepts and demonstrating features - Improve: Audio summary highlighting key configuration points #### 🗣️ Verbal learners - Present: Clear explanations of technical terms, step-by-step verbal instructions - Improve: Glossary of Sentry-specific terminology, comparison with other debugging approaches #### 🧩 Kinesthetic learners - Present: Live coding demonstration, hands-on configuration examples - Improve: Interactive checklist for setup verification, sandbox environment for testing #### 🧠 Logical learners - Present: Sample rate decision tree, logical flow of data processing - Improve: Performance impact metrics, cost-benefit analysis framework #### 🧑‍🤝‍🧑 Social learners - Present: References to community documentation and support - Improve: Discussion prompts for team configuration decisions, peer review guidelines #### 🧘‍♀️ Solitary learners - Present: Self-contained tutorial format, individual practice examples - Improve: Self-assessment questions, independent troubleshooting guide #### 🌿 Naturalistic learners - Present: Real-world application context, production environment considerations - Improve: Ecosystem impact analysis, sustainable monitoring practices ### 📊 Accessibility Assessment #### Screen reader semantics - Present: Descriptive headings, code examples with proper markup - Improve: Alt text for interface screenshots, ARIA labels for complex diagrams #### Keyboard navigation - Present: Standard video controls accessible via keyboard - Improve: Timestamp navigation shortcuts, code example focus management #### Contrast and readability - Present: High contrast code syntax highlighting, clear text rendering - Improve: Ensure 4.5:1 contrast for all text elements, optimize for dark mode #### Text resizing and reflow - Present: Responsive video player, scalable text content - Improve: Ensure code examples remain readable at 200% zoom #### Media and captions - Present: Spoken narration throughout video - Improve: Complete captions including technical terms, downloadable transcript #### Forms and interactions - Present: Clear navigation between video sections - Improve: Accessible timestamp links, keyboard-friendly playback controls ### 🌍 DEIB Assessment #### Cultural breadth - Present: Universal debugging concepts applicable across regions - Improve: Examples showing applications serving diverse global users #### Inclusive language - Present: Gender-neutral technical language, clear jargon explanations - Improve: Plain language alternatives for complex technical terms #### Neurodiversity support - Present: Structured content with clear headings, predictable navigation - Improve: Content warnings for rapid screen changes, pause options for processing #### Representation - Present: Focus on technical content without exclusionary examples - Improve: Diverse use case examples, multiple application types represented #### Psychological safety - Present: Non-judgmental approach to debugging and error handling - Improve: Emphasize learning from errors rather than blame assignment ### ✅ Logical Validity #### Strong reasoning - Deductive strength: Clear cause-and-effect relationship between configuration and functionality - Inductive strength: Generalizes from specific Next.js example to broader application patterns - Causal reasoning: Demonstrates direct impact of configuration changes on replay behavior - Analogical strength: Compares session replay to video recording for conceptual clarity #### Fallacies - Appeal to authority: Minor reliance on Sentry's expertise without independent verification - Hasty generalization: Limited discussion of edge cases or configuration failures #### Tone of voice - Overall tone: Professional and instructional with confident technical guidance ### 🛡️ DARVO Analysis - Deny: No denial patterns present - Attack: No attacking language toward users or alternatives - Reverse victim/offender: No victim/offender dynamics present - Emotional cues and rhetoric: Straightforward technical presentation without manipulative elements ## 🎯 Conclusion Session Replay represents a significant advancement in debugging capabilities for Next.js applications, providing visual context that traditional logging cannot match. The privacy-first approach and granular configuration options make it suitable for production environments while maintaining user data protection standards. Developers should implement session replay with careful consideration of sample rates and privacy settings, starting with conservative configurations and expanding based on observed value and quota usage. The integration with user authentication and component tracking creates powerful debugging workflows for complex application interactions. ## 🧱 Refactor Appendix ### 📚 Literature Split Pad ### [H1] Session replay provides visual debugging context > [!quote] [Session Replay | Debugging Next.js Applications with Sentry](https://www.youtube.com/watch?v=8W5VGHYv6GY) by [[Sentry]] via [[YouTube]]. Published 2024. Accessed 2024-12-19. > "Session Replay is a video like reproduction of all the interaction that user is taking on your application." Establishes session replay as visual debugging --- ## Full Transcript [00:03] What's up y'all? [00:03] Serge here. [00:04] I'm a developer experience engineer at Sentry, [00:06] and in this video we're going to be talking about session [00:08] replay, how to instrument it inside your Next.js application configuration [00:12] and sampling options, and what it looks like in Sentry. [00:15] Session Replay is a video like reproduction of all the interaction [00:18] that user is taking on your application. [00:20] It has minimal impact on your front end performance, [00:22] and it's a really good way to understand what a user did to get that error, [00:26] or just to observe how they're interacting with your applications. [00:29] We use an open source technology called RR web as well as some custom [00:33] mutation observers for interactions like clicks and scrolls. [00:36] Let's take a look at what it looks like in code, [00:37] because session replay is client side only, [00:40] the only configuration that you need to update [00:41] is your instrumentation clients file inside your integrations. [00:45] Make sure you have a session replay integration and two sample rates [00:50] one for session replay sample rate and one for replays on error sample rate. [00:54] Let me quickly show you how this works. [00:56] So on every single session we first check for the session sample rate. [01:00] If the sample rate is greater than zero, we check session sampling [01:04] and if it's not sampled, we fall back to the error sample rate. [01:08] If it is sampled, we start the recording and then we flash it to sentry. [01:12] Now if you don't have a sample rate set, we fall back to the error sample rate. [01:16] And if it's greater than zero, we start buffering. [01:19] We wait for the error. [01:20] If it happens, we check the sample rate [01:22] and if it's sampled, we flush it and we kind of restart this whole process. [01:26] In development, you can keep these at 100%, [01:29] but keep an eye out on your quota to make sure that you're not missing [01:31] important context for how your users are interacting with your application. [01:35] With replay setup, let's take a look at what it looks like in essentially. [01:39] First, we're going to start a new session by opening up a new browser [01:43] and going to a local host century example page. [01:47] We'll go ahead and throw a sample error [01:49] and and the session to view replays. [01:52] Inside central, you're going to head over to explore and go to replays. [01:55] Here you'll see a list of all the replays that are happening in your application. [01:58] Make sure you have the right application [02:00] and the right time frame set up so you can see them. [02:02] Here's a replay from the session that just happened. [02:04] The live indicator is there [02:06] because we want to make sure that we're keeping track of the whole session. [02:09] So if I reopen that tab and go ahead and interact with it, it's [02:12] actually going to be part of the same session [02:14] because we're using session storage. [02:15] You can learn more about user sessions in our documentation. [02:18] Now if I go ahead and click it, [02:20] you'll see a video like reproduction of all the things that were happening. [02:24] So you can scrub through it. [02:26] You'll get an AI summary of all of the actions [02:29] and all the things that happened within this session. [02:31] You can take a look at the console logs, network requests, and other things [02:35] as you build up more context about this user's interaction. [02:38] Now notice how it says anonymous user, [02:41] as well as all of the content on this page is masked. [02:44] We take privacy really seriously and so by default we mask everything [02:48] This is where we can extend the configuration. [02:50] So if we go back to our instrumentation we can add options [02:55] like unmask and we can pass it any CSS selector. [02:59] So in this case it's a data attribute. [03:01] That's data sentry unmask. [03:03] And then we can also enable default PII to be able to see IP addresses. [03:08] Now set that to true. [03:09] We're going to go back to the example page. [03:13] And on the button I'm going to add a unmask. [03:17] And another thing we can do is we can actually pass it [03:18] a data centric component attribute which will show up in replays. [03:22] And then you'll be able to filter down by specific components [03:25] that you want to track. [03:26] If you are using Webpack, there's an option called React Component [03:29] Annotation that you can enable. [03:31] And then components will be auto instrumented for you. [03:34] With Turbo Pack, we don't have access to it, [03:36] but you can still annotate components that are most important to you. [03:39] One more thing I'd like to [03:40] mention is if you have an application that has user authentication. [03:43] One more thing we can do is add sentry dot set user API [03:47] to give even more context to your replays. [03:49] In order [03:50] to do that anywhere on the client that you keep track of your user sessions. [03:53] In my case, it'll be the, authentication provider. [03:58] You can import sentry, and anytime you have a user session, use [04:02] the Sentry.setUser API and pass it all the details for that user. [04:06] Now, if we load up our application one more time [04:10] and I have basic cookie authentication here, but we're going to log in [04:16] and we're going to [04:16] head back to the example page. [04:20] And we're going to throw a simple error. [04:22] We're going to close this window and take a look at sentry. [04:25] Now you have a replay that is identified by that user that was using it. [04:29] And it helps understand which users are facing which errors. [04:32] And because we've set up the masking configuration, you can see that [04:37] at that part where we are on the sentry example page, [04:41] the sample error rate [04:43] button actually shows the text as well as looking at the breadcrumbs. [04:47] You can see the user click interaction. [04:50] And here it shows that react component name that we gave it [04:53] when we were annotating it. [04:54] This way it's really easy to add it to your search filter and track [04:58] any components that are part of critical experiences in your application, [05:02] and see how users are experiencing those errors. [05:05] Session replay also works inside canvases. [05:07] Just keep in mind that there is no PII scrubbing inside those, [05:11] and if you're building a 3D game or using WebGL or web GPU, [05:14] you can also get a sense of how users are interacting with your application. [05:18] Check out our dogs for any additional configuration [05:21] and let us know if you have any questions. Thanks. Bye.  ## 📺 Video ![](https://www.youtube.com/watch?v=8W5VGHYv6GY) --- # 📝 Full Notes (Deep-Read Analysis) # 🏷️ Title: Session Replay | Debugging Next.js Applications with Sentry ## 🧰 Action Inbox - [H1] Set up session replay integration in Next.js instrumentation file — 02:34 #sentry - [H2] Configure sample rates for performance monitoring — 03:15 #performance - [H3] Implement privacy controls and content unmasking — 07:20 #privacy ## 🧭 Table of Contents - [📝 Summary](#-summary) - [📖 Main Content](#-main-content) - [🗒️ Notes](#️-notes) - [📚 References](#-references) - [🗣️ Paraphrase](#️-paraphrase) - [📰 Newsletter](#-newsletter) - [✅ Action Items](#-action-items) - [🧪 Hypotheses](#-hypotheses) - [📊 Methodology](#-methodology) - [❓ Questions](#-questions) - [🔮 Future Research](#-future-research) - [💡 Implications](#-implications) - [🧠 Learning Styles Assessment](#-learning-styles-assessment) - [📊 Accessibility Assessment](#-accessibility-assessment) - [🌍 DEIB Assessment](#-deib-assessment) - [✅ Logical Validity](#-logical-validity) - [🛡️ DARVO Analysis](#-darvo-analysis) - [🎯 Conclusion](#-conclusion) ### 🔗 References - [Sentry Documentation](https://docs.sentry.io/) - [RR Web Open Source](https://www.rrweb.io/) ## 📝 Summary - Sentry Session Replay provides video-like reproduction of user interactions for debugging Next.js applications - Uses open source RR web technology with minimal performance impact on frontend applications - Configuration involves client-side instrumentation with session and error sample rates - Privacy-first approach masks content by default with granular unmasking controls - Integrates with user authentication and component tracking for enhanced debugging context ## 📖 Main Content Session Replay is Sentry's debugging tool that captures user interactions as video-like reproductions to help developers understand how errors occur in their applications. Built on the open source RR web technology with custom mutation observers, it tracks clicks, scrolls, and other interactions with minimal frontend performance impact. The implementation requires only client-side configuration in Next.js applications through the instrumentation file. Developers configure two sample rates: one for general session sampling and another for error-specific replays. The system first checks session sample rates, then falls back to error sampling if needed. Privacy is a core consideration - all content is masked by default. Developers can selectively unmask content using CSS selectors and data attributes. The system supports user identification through Sentry's setUser API and component annotation for tracking critical application flows. ## 🗒️ Notes #### ⏱️ [00:00](https://youtu.be/8W5VGHYv6GY?t=0) — [H1] Introduction to Session Replay - Key idea: Session Replay captures video-like reproductions of user interactions with minimal performance impact - Evidence: "Session Replay is a video like reproduction of all the interaction that user is taking on your application" #### ⏱️ [00:45](https://youtu.be/8W5VGHYv6GY?t=45) — [H2] Technology Stack Overview - Key idea: Uses open source RR web technology with custom mutation observers for interaction tracking - Evidence: "We use an open source technology called RR web as well as some custom mutation observers for interactions like clicks and scrolls" #### ⏱️ [01:20](https://youtu.be/8W5VGHYv6GY?t=80) — [H3] Client-Side Configuration Requirements - Key idea: Session replay requires only client-side configuration in the instrumentation file - Evidence: "Because session replay is client side only, the only configuration that you need to update is your instrumentation clients file" #### ⏱️ [01:45](https://youtu.be/8W5VGHYv6GY?t=105) — [H1] Sample Rate Configuration - Key idea: Two sample rates control when replays are captured - general sessions and error-specific - Evidence: "Two sample rates one for session replay sample rate and one for replays on error sample rate" #### ⏱️ [02:15](https://youtu.be/8W5VGHYv6GY?t=135) — [H2] Sampling Logic Flow - Key idea: System checks session sample rate first, then falls back to error sample rate with buffering - Evidence: "On every single session we first check for the session sample rate... we fall back to the error sample rate" #### ⏱️ [03:15](https://youtu.be/8W5VGHYv6GY?t=195) — [H3] Development vs Production Settings - Key idea: Development can use 100% sample rates but production needs quota management - Evidence: "In development, you can keep these at 100%, but keep an eye out on your quota" #### ⏱️ [04:30](https://youtu.be/8W5VGHYv6GY?t=270) — [H2] Viewing Replays in Sentry Interface - Key idea: Replays are accessed through Sentry's explore section with application and timeframe filters - Evidence: "Inside central, you're going to head over to explore and go to replays" #### ⏱️ [05:45](https://youtu.be/8W5VGHYv6GY?t=345) — [H1] Session Continuity and Storage - Key idea: Sessions persist across tabs using session storage for complete user journey tracking - Evidence: "It's actually going to be part of the same session because we're using session storage" #### ⏱️ [06:30](https://youtu.be/8W5VGHYv6GY?t=390) — [H2] Replay Features and Context - Key idea: Replays include AI summaries, console logs, network requests, and interaction scrubbing - Evidence: "You'll get an AI summary of all of the actions and all the things that happened within this session" #### ⏱️ [07:00](https://youtu.be/8W5VGHYv6GY?t=420) — [H1] Privacy-First Content Masking - Key idea: All content is masked by default to protect user privacy - Evidence: "We take privacy really seriously and so by default we mask everything" #### ⏱️ [07:30](https://youtu.be/8W5VGHYv6GY?t=450) — [H2] Selective Content Unmasking - Key idea: Developers can unmask specific content using CSS selectors and data attributes - Evidence: "We can add options like unmask and we can pass it any CSS selector" #### ⏱️ [08:45](https://youtu.be/8W5VGHYv6GY?t=525) — [H3] Component Tracking and Annotation - Key idea: Components can be annotated for filtering and tracking critical user flows - Evidence: "Data centric component attribute which will show up in replays. And then you'll be able to filter down by specific components" #### ⏱️ [10:00](https://youtu.be/8W5VGHYv6GY?t=600) — [H2] User Authentication Integration - Key idea: Sentry.setUser API provides user context for authenticated application debugging - Evidence: "Anytime you have a user session, use the Sentry.setUser API and pass it all the details for that user" #### ⏱️ [12:00](https://youtu.be/8W5VGHYv6GY?t=720) — [H3] Canvas and 3D Application Support - Key idea: Session replay works with canvas, WebGL, and WebGPU applications without PII scrubbing - Evidence: "Session replay also works inside canvases. Just keep in mind that there is no PII scrubbing inside those" ## 📚 References - [Sentry Session Replay Documentation](https://docs.sentry.io/product/session-replay/) - [RR Web Project](https://www.rrweb.io/) - [Next.js Integration Guide](https://docs.sentry.io/platforms/javascript/guides/nextjs/) ## 🗣️ Paraphrase - Session Replay creates video-style recordings of user interactions to help developers debug applications by understanding exactly what users did before encountering errors - The system uses minimal client-side configuration with smart sampling strategies that balance comprehensive coverage with performance and quota management - Privacy protection is built-in by default with granular controls allowing developers to selectively reveal necessary content while maintaining user data security ## 📰 Newsletter **Enhance Your Next.js Debugging with Sentry Session Replay** Session Replay transforms how you debug user issues by providing video-like reproductions of actual user interactions. This powerful tool helps you see exactly what happened before an error occurred, making debugging faster and more accurate. The implementation is straightforward - just add the session replay integration to your Next.js instrumentation file and configure your sample rates. The privacy-first approach masks all content by default, giving you control over what information is captured. Whether you're tracking critical user flows, debugging complex interactions, or understanding user behavior patterns, Session Replay provides the context traditional error logs can't offer. Resources: [Sentry Documentation](https://docs.sentry.io/), [RR Web Project](https://www.rrweb.io/), [Next.js Integration Guide](https://docs.sentry.io/platforms/javascript/guides/nextjs/) ## ✅ Action Items #### DevRel - Developer education: Create workshop content on debugging strategies with session replay, office hours on implementation patterns - Developer experience: Improve documentation for privacy controls and sample rate optimization - Developer marketing: Case study campaign showing session replay debugging success stories - Community management: Forum support for session replay configuration questions #### WordPress - Core: Evaluate session replay integration for WordPress admin debugging - Core Performance: Assess session replay impact on WordPress site performance budgets - Plugin Ecosystem: Session replay integration guides for WordPress plugin developers - Community: Training materials on debugging WordPress applications with session replay ## 🧪 Hypotheses - Session replay reduces mean time to resolution for user-reported bugs by providing complete interaction context - Privacy-first masking approach increases developer adoption rates compared to tools with less granular privacy controls - Component-level tracking enables more targeted debugging for complex React/Next.js applications - Error-specific sampling provides cost-effective coverage for production debugging workflows ### 📊 Methodology - A/B testing comparing debugging speed with and without session replay context - Performance impact analysis measuring frontend metrics before and after session replay implementation - User privacy survey measuring developer comfort with different masking configurations ### ❓ Questions - How does session replay performance impact scale with application complexity and user base size? - What privacy configuration patterns work best for different application types and compliance requirements? - How can session replay data be integrated with other observability tools for comprehensive debugging workflows? ### 🔮 Future Research - Machine learning analysis of session replay patterns to predict and prevent user errors - Integration possibilities between session replay and automated testing frameworks - Cross-platform session replay standardization for multi-technology stacks ### 💡 Implications - Practice: Debugging workflows shift from log analysis to visual interaction review - Security: Enhanced privacy controls require careful configuration to balance debugging needs with user protection - Education: Developer training must include privacy-aware debugging practices and tool configuration - Funding: Session replay quota costs need consideration in monitoring and observability budgets ### 🧠 Learning Styles Assessment Reading level estimate: Grade 10 #### 👀 Visual learners - Present: Screen recordings showing Sentry interface, code examples with syntax highlighting - Improve: Architecture diagrams showing data flow, comparison charts for sample rate strategies #### 🔊 Aural learners - Present: Narrator explaining concepts and demonstrating features - Improve: Audio summary highlighting key configuration points #### 🗣️ Verbal learners - Present: Clear explanations of technical terms, step-by-step verbal instructions - Improve: Glossary of Sentry-specific terminology, comparison with other debugging approaches #### 🧩 Kinesthetic learners - Present: Live coding demonstration, hands-on configuration examples - Improve: Interactive checklist for setup verification, sandbox environment for testing #### 🧠 Logical learners - Present: Sample rate decision tree, logical flow of data processing - Improve: Performance impact metrics, cost-benefit analysis framework #### 🧑‍🤝‍🧑 Social learners - Present: References to community documentation and support - Improve: Discussion prompts for team configuration decisions, peer review guidelines #### 🧘‍♀️ Solitary learners - Present: Self-contained tutorial format, individual practice examples - Improve: Self-assessment questions, independent troubleshooting guide #### 🌿 Naturalistic learners - Present: Real-world application context, production environment considerations - Improve: Ecosystem impact analysis, sustainable monitoring practices ### 📊 Accessibility Assessment #### Screen reader semantics - Present: Descriptive headings, code examples with proper markup - Improve: Alt text for interface screenshots, ARIA labels for complex diagrams #### Keyboard navigation - Present: Standard video controls accessible via keyboard - Improve: Timestamp navigation shortcuts, code example focus management #### Contrast and readability - Present: High contrast code syntax highlighting, clear text rendering - Improve: Ensure 4.5:1 contrast for all text elements, optimize for dark mode #### Text resizing and reflow - Present: Responsive video player, scalable text content - Improve: Ensure code examples remain readable at 200% zoom #### Media and captions - Present: Spoken narration throughout video - Improve: Complete captions including technical terms, downloadable transcript #### Forms and interactions - Present: Clear navigation between video sections - Improve: Accessible timestamp links, keyboard-friendly playback controls ### 🌍 DEIB Assessment #### Cultural breadth - Present: Universal debugging concepts applicable across regions - Improve: Examples showing applications serving diverse global users #### Inclusive language - Present: Gender-neutral technical language, clear jargon explanations - Improve: Plain language alternatives for complex technical terms #### Neurodiversity support - Present: Structured content with clear headings, predictable navigation - Improve: Content warnings for rapid screen changes, pause options for processing #### Representation - Present: Focus on technical content without exclusionary examples - Improve: Diverse use case examples, multiple application types represented #### Psychological safety - Present: Non-judgmental approach to debugging and error handling - Improve: Emphasize learning from errors rather than blame assignment ### ✅ Logical Validity #### Strong reasoning - Deductive strength: Clear cause-and-effect relationship between configuration and functionality - Inductive strength: Generalizes from specific Next.js example to broader application patterns - Causal reasoning: Demonstrates direct impact of configuration changes on replay behavior - Analogical strength: Compares session replay to video recording for conceptual clarity #### Fallacies - Appeal to authority: Minor reliance on Sentry's expertise without independent verification - Hasty generalization: Limited discussion of edge cases or configuration failures #### Tone of voice - Overall tone: Professional and instructional with confident technical guidance ### 🛡️ DARVO Analysis - Deny: No denial patterns present - Attack: No attacking language toward users or alternatives - Reverse victim/offender: No victim/offender dynamics present - Emotional cues and rhetoric: Straightforward technical presentation without manipulative elements ## 🎯 Conclusion Session Replay represents a significant advancement in debugging capabilities for Next.js applications, providing visual context that traditional logging cannot match. The privacy-first approach and granular configuration options make it suitable for production environments while maintaining user data protection standards. Developers should implement session replay with careful consideration of sample rates and privacy settings, starting with conservative configurations and expanding based on observed value and quota usage. The integration with user authentication and component tracking creates powerful debugging workflows for complex application interactions. ## 🧱 Refactor Appendix ### 📚 Literature Split Pad ### [H1] Session replay provides visual debugging context > [!quote] [Session Replay | Debugging Next.js Applications with Sentry](https://www.youtube.com/watch?v=8W5VGHYv6GY) by [[Sentry]] via [[YouTube]]. Published 2024. Accessed 2024-12-19. > "Session Replay is a video like reproduction of all the interaction that user is taking on your application." Establishes session replay as visual debugging --- # 📄 Full Transcript *Auto-generated from YouTube captions · timestamps roughly every 30 seconds · [watch on YouTube](https://www.youtube.com/watch?v=8W5VGHYv6GY)* **[00:03]** What's up y'all? Serge here. I'm a developer experience engineer at Sentry. And in this video, we're going to be talking about session replay, how to instrument it inside your Nex.js application, configuration and sampling options, and what it looks like in Sentry. Session replay is a video-like reproduction of all the interaction that a user is taking on your application. It has minimal impact on your front-end performance, and it's a really good way to understand what a user did to get that error or just to observe how they're interacting with your applications. We use an open source technology called RR web as well as some custom mutation observers for **[00:34]** interactions like clicks and scrolls. Let's take a look at what it looks like in code. Because session replay is client side only, the only configuration that you need to update is your instrumentation client.ts file. Inside your integrations, make sure you have a session replay integration and two sample rates. One for session replay sample rate and one for replays on error sample rate. Let me quickly show you how this works. So on every single session we first check for the session sample rate. If the sample rate is greater than zero we check session sampling and if **[01:04]** it's not sampled we fall back to the error sample rate. If it is sampled we start the recording and then we flush it to Sentry. Now if you don't have a sample rate set we fall back to the error sample rates and if it's greater than zero we start buffering. We wait for the error. If it happens, we check the sample rate and if it's sampled, we flush it and we kind of restart this whole process. In development, you can keep these at 100%, but keep an eye out on your quota to make sure that you're not missing important context for how your users are interacting with your **[01:35]** application. With replay setup, let's take a look at what it looks like in Sentry. First, we're going to start a new session by opening up a new browser and go to localhost Sentry sample page. We'll go ahead and throw a sample error and end the session. To view replays in Site Centry, you're going to head over to explore and go to replays. Here you'll see a list of all the replays that are happening in your application. Make sure you have the right application and the right time frame set up so you can see them. Here's a replay from the session that just happened. The live **[02:05]** indicator is there because we want to make sure that we're keeping track of the whole session. So, if I reopen that tab and go ahead and interact with it, it's actually going to be part of the same session because we're using session storage. You can learn more about user sessions in our documentation. Now, if I go ahead and click it, you'll see a video- like reproduction of all the things that were happening. So, you can scrub through it. You'll get an AI summary of all of the actions and all the things that happened within this session. You can take a look at the console, the logs, network requests, and other things as you build up more **[02:36]** context about this user's interaction. Now, notice how it says anonymous user as well as all of the content on this page is masked. We take privacy really seriously and so by default we mask everything. This is where we can extend the configuration. So if we go back to our instrumentation we can add options like unmask and we can pass it any CSS selector. So in this case it's a data attribute that's data sentry unmask. And then we can also enable default PII to **[03:06]** be able to see IP addresses. Now set that to true. We're going to go back to the example page and on the button I'm going to add a unmask. And another thing we can do is we can actually pass it a data entry component attribute which will show up in replays and then you'll be able to filter down by specific components that you want to track. If you are using Webpack, there's an option called React component annotation that you can enable and then components will be auto instrumented for you. With Turbopac, we don't have access to it, but you can **[03:36]** still annotate components that are most important to you. One more thing I'd like to mention is if you have an application that has user authentication, one more thing we can do is add sentry set user API to give even more context to your replays. In order to do that, anywhere on the client that you keep track of your user sessions, in my case it'll be the um authentication provider, you can import Sentry and anytime you have a user session, use the Sentry. set user API and pass it all the details for that user. Now, if we load **[04:07]** up our application one more time and I have basic cookie authentication here, but we're going to log in and we're gonna head back to the example page and we're going to throw a sample error. We're going to close this window and take a look at search. Now, you have a replay that is identified by that user that was using it and it helps understand which users are facing which errors. And because we've set up the masking configuration, you can see that at the part where we're on the Sentry **[04:39]** example page, the sample error rates button actually shows the text as well as looking at the breadcrumbs, you can see the user click interaction. And here it shows that React component name that we gave it when we were annotating it. This way, it's really easy to add it to your search filter and track any components that are part of critical experiences in your application and see how users are experiencing those errors. Session replay also works inside canvases. Just keep in mind that there is no PII **[05:09]** scrubbing inside those. And if you're building a 3D game or using WebGL or WebGPU, you can also get a sense of how users are interacting with your application. Check out our docs for any additional configuration and let us know if you have any questions. Thanks. Bye.