Excluding Dynamic Class Names, IDs and Attributes

When targeting elements in your app using Userpilot, they might have dynamically-generated attributes (classes, IDs, etc.) which is a common pattern in JavaScript frameworks such as React.js and Ember.js. These patterns are variable and might change on every page load or deployment.

As such, we won't be able to automatically determine the best CSS selector to use thus resulting in an unstable or an overly generic tag.

Some examples of such patterns:

.sc-1fzu5ml-0 // styled-component
.jss514 // React.js
#ember45 // ember.js

To help you in customizing Userpilot for more reliable targeting in these cases, Userpilot has provided a way to exclude these attributes through Regex. You can access it by navigating to the Exclude Lists under your Settings.

Tip: If Regular Expressions sound a bit foreign and overwhelming, you can delegate the exclusion to one of the techie people on your team.

Example frameworks and how to exclude them

Material-UI

Example: Excluding the auto-generated portion in the class with the format .jss514

jss(.+?)$

css(.+?)$

Styled-components

Example: Using a regular expression to only match the stable portion of the class .sc-1fzu5ml-0

sc-(.+?)-(.+?)buffer_3lt;

^[a-zA-Z]{6}buffer_4lt;

Ember

Example: Excluding the number in the Id #ember45

ember(.+?)$