Browser Feature Flags

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);
}

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: '<app-name>',
  serverUrl: 'YOUR_ON_PREMISE_URL',
  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

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

Error Tracking: compare error rates between variants.
Configuration: the full option list.

​Report a flag evaluation

​Choose which events carry flags

​Report flags on every route change

​Next steps

Report a flag evaluation

Choose which events carry flags

Report flags on every route change

Next steps