Skip to main content

Usage and metrics

Server entry @ops-ai/react-router-toggly/server can send Usage and Metrics telemetry (HTTPS by default; optional gRPC when @grpc/grpc-js is installed).

Browser companion​

@ops-ai/react-router-toggly 1.1.0 also adds an independent compact browser reporter to the /client entry. Configure it on TogglyProvider or RouterTogglyProvider with enableTelemetry, enableUsageTracking, enableMetrics, metricsBaseUrl, and telemetryFlushIntervalMs.

import { useToggly } from '@ops-ai/react-router-toggly/client'

export function CheckoutTelemetry({
  onOpenPricing,
}: {
  onOpenPricing: () => void
}) {
  const toggly = useToggly()

  const handleCheckout = async () => {
    toggly.recordUsage('Checkout')
    await toggly.use('Checkout', async (scope) => {
      const ok = await submitOrder()
      if (!ok) scope.fail()
    })
    toggly.incrementCounter('orders')
    toggly.setGauge('cartItems', 3)
    await toggly.flushTelemetry()
  }

  const handleOpenPricing = async () => {
    onOpenPricing()
    toggly.recordView('PricingTable', 'control')
    await toggly.flushTelemetry()
  }

  return (
    <>
      <button onClick={handleCheckout}>Checkout</button>
      <button onClick={handleOpenPricing}>Open pricing</button>
    </>
  )
}

Render this component beneath TogglyProvider or RouterTogglyProvider. Record an explicit view from the interaction or navigation boundary that actually presents it, never from component render. Each mounted provider owns its browser reporter and releases it on unmount. SSR, builds, keyless providers, and opted-out categories stay silent. Browser telemetry defaults to https://metrics.toggly.io and remains separate from the trusted server transport. recordUsage and recordView are count-only; use wraps scoped work (attempt, duration, errors). See usage scopes and the frontend telemetry contract.

Configure telemetry on the server client / loader options the same way as other Toggly Node-family SDKs.

See also:

Session identity​

Provide instanceId in browser provider config. In a component interaction, use useToggly().identify('user-123', { instanceId: 'minted-token', groups: [], claims: {} }) and await it. identify without a token clears the previous token; reset() clears identity and token, but retains groups and claims. To remove those too, await identify('', { groups: [], claims: {} }) at logout. See session attribution.