React best practices

Release, sampling, analytics, feature flags, session replay, heatmaps, and consent for @newtalaria/react.

@newtalaria/reactanalyticsfeature-flagsreplayheatmaps

Release

Set release in Talaria.init to the version or git SHA of this build. Upload source maps for that same string. See Upload JavaScript source maps.

API key and environment

The API key chooses the environment. Do not pass environment in init. Use a development key locally and a production key on the deployed bundle.

Sampling

Successful traces follow the traces sample rate from Project settings. Error traces stay. A response with retry: false stops that signal until the page reloads.

Project settings

Tracing, analytics, heatmaps, and session replay follow the project document, not init flags. See Project configuration.

Analytics

javascript

import { Talaria } from '@newtalaria/react';

Talaria.analytics.identify('user_42', { plan: 'pro' });
Talaria.analytics.page('Pricing');
Talaria.analytics.track('Checkout Started', { plan: 'pro' });

Enable Analytics in Project settings first. Consent is the browser SDK's consent. See Product analytics setup.

Feature flags

javascript

const on = await Talaria.flags.boolVariation('new-checkout', false);

Session replay

Replay, input masking, and getReplayId() are the browser SDK. Enable session replay in Project settings. Replay waits for the same consent state as analytics. Error capture does not wait. See Browser best practices.

Heatmaps

Enable heatmaps and analytics. Clicks, scroll depth, and snapshots use the browser recorder. Mask inputs and mark private blocks with [data-talaria-mask] or blockSelector.

Web Vitals

LCP, INP, CLS, and TTFB are child spans of the pageload when tracing is on and that pageload was sampled.

CookieYes, Cookiebot, and Google Consent Mode are followed automatically. Any other banner calls Talaria.analytics.optIn() after agreement and optOut() to stop. publicAnalytics: true opts the page in when there is no banner. Details: Cookie banners.

Privacy in events

Keep tokens and passwords out of extra, tags, and breadcrumbs. The component stack on a React error is useful; a prop dump of a form is not.