When you roll out a change behind a feature flag, you need to know whether the users who hit an error were on the new code or the old code. Reporting flag evaluations to RUM answers that: every view and error carries the flags that were active, so you can compare variants side by side.

This page covers reporting flags and choosing which events carry them.

Report a flag evaluation

Call addFeatureFlagEvaluation with the flag name and the value the user got:

atatusRum.addFeatureFlagEvaluation('new-checkout', true);
atatusRum.addFeatureFlagEvaluation('pricing-tier', 'variant-b');

Values can be booleans, strings, or numbers, so both on/off flags and multi-variant experiments work.

Report flags as soon as they resolve, before the user interacts with the page. If your flag provider hands you the whole set at once, report them in a loop:

for (const [key, value] of Object.entries(flags)) {
  atatusRum.addFeatureFlagEvaluation(key, value);
}
Tip:

Report both states rather than only the flags that are on. Knowing a flag was false for a user who hit an error is as useful as knowing it was true, and it lets you compare the two groups.

Choose which events carry flags

View and error events always carry flag context, because those are the two you compare most often. To attach flags to other event types as well, list them in trackFeatureFlagsForEvents:

atatusRum.init({
  licenseKey: '<license-key>',
  appName: 'Storefront',
  trackFeatureFlagsForEvents: ['action', 'resource', 'long_task', 'vital'],
});

The accepted values are:

Value Attaches flags to
action Clicks, taps, and custom actions
resource Network requests and assets
long_task Main-thread long tasks
vital Web vitals and custom duration vitals
Note:

Each event type you add makes every event of that kind slightly larger, since the flag set travels with it. Resources are usually the highest-volume event type, so add that one only if you need to compare request performance across variants.

Report flags on every route change

In a single-page application, flags often change when the user moves between areas of the app. Report them again after each route change so the new view carries the right set:

router.afterEach(() => {
  for (const [key, value] of Object.entries(flagClient.allFlags())) {
    atatusRum.addFeatureFlagEvaluation(key, value);
  }
});

Next steps