Session Replay improved for continuously deployed apps: CSS file capture

Session Replay provides video-like replay of recorded user sessions, giving you full visibility into user behavior so that you can create perfect user experiences while aligning your business, development, and operations teams with a singular view and source of digital truth. We're happy to announce that Session Replay now supports applications that utilize fast deployment lifecycles and protected resources. All with zero configuration (an industry first).

In modern software development, continuous deployment is a standard practice that features, among other things, quick end-user feedback and short development cycles that result in improvements to your software. If you’re using continuous deployment in combination with a session replay tool, you’ve likely faced issues when playing back user sessions: styling and positioning of some elements on playback may differ significantly from what the user experienced at the time of session recording. To avoid this issue, you have to implement extra steps in your continuous deployment process to make outdated resources available for longer periods of time. The same problems can occur if you want to record the user sessions of an internal application when certain resources are protected by password.

Monitor user experience of internal apps with zero configuration

One of our largest customers was interested in monitoring an internal application to understand how they can create better training materials based on common mistakes that their users are committing. Their internal application is deployed with all CSS resources protected by password so the team in charge of doing the analysis couldn’t access the monitored application. To enable user experience monitoring for the application, DevOps would have to configure the server to make the CSS resources available without authentication. This was undesirable from a data-security standpoint and would also entail a lot of manual work.

Dynatrace Session Replay is the first solution that enables you to capture CSS resources with no configuration required.

“This is the most seamless integration of a session replay tool I have seen in order to record sessions from internal applications with protected CSSs”
— Dynatrace enterprise customer

To illustrate the value of this new feature, have a look at the sample screen image below. This is an example of what’s displayed when playing back a session of an application that utilizes password-protected or non-available stylesheets. Only HTML without styles is applied. As you can see, without the CSS resources, it’s not possible to make sense of the user’s recorded mouse clicks.

Now have a look at the difference once the new CSS resource-capture feature is enabled. Even though the images are not available at replay time, you can still make sense of the user’s mouse clicks and other interactions with the application.

With Dynatrace Session Replay, stylesheets are captured and stored during session recording. You don’t have to worry about copying CSS resources to an accessible location, adding tags to indicate whether the resources have changed, or giving permissions to a separate process that can access the protected CSS files. It’s an entirely automated process that ensures that all required resources are captured and made available for future replay.

This innovative solution supports application teams that have:

• resources that cannot be accessed from outside a firewall
• resources that cannot be accessed by unauthenticated users
• short redeployment cycles, where resources change on a frequent basis

It enables these application teams to:

• reproduce the complete digital experience of their end users across all devices and responsive UIs
• measure the impact of errors in the end users experience
• analyze areas of struggle
• analyze new feature adoption

Returning to the customer use case mentioned above, with automated resource-capture for Session Replay, all our customer had to do was wait for their end users to begin interacting with their application. The team responsible for the analysis was then able to playback the sessions and obtain the information they needed.

Enabled by default, with options

You can disable resource capture if you don’t need it, for example if your application is already prepared to support multiple versions by:

• changing the stylesheet URL with each change to the content, with older versions retained for 35 days or more after they’re replaced
• making all resources publicly available
• excluding some styles from session recording

Configuration options are available in application settings (Session Replay and behavior > Session Replay > Resource capture settings).