Faro: JavaScript errors, logs, business events and sessions

1. Errors #

Automatic and manual.

Capture #

Web instrumentations automatically capture unhandled exceptions (window.onerror) and rejected promises. For a handled error, send it explicitly:

import { faro } from '@grafana/faro-web-sdk';

try {
  await payer(panier);
} catch (err) {
  faro.api.pushError(err, { context: { etape: 'paiement', montant: String(panier.total) } });
  afficherMessage('Le paiement a échoué');
}

Source maps #

In production, code is minified: a stack trace points to main.4f3a.js:1:20345. With source maps, the stack is translated back to the original file and line. Alloy can download them from your site or read them from disk:

faro.receiver "front" {
  sourcemaps {
    download = false
    location {
      path                 = "/var/www/sourcemaps"
      minified_path_prefix = "https://boutique.example.org/assets/"
    }
  }
  // ...
}

Common mistake: You do not necessarily want to publish your source maps on the public site: they reveal the source code. Place them on the receiver's disk instead.

2. Logs, events, measurements #

Instrumenting the business.

API #

// Événement métier (tunnel de conversion)
faro.api.pushEvent('ajout_panier', { produit: 'casque-x', quantite: '1' });

// Mesure personnalisée (valeurs numériques)
faro.api.pushMeasurement({ type: 'panier', values: { articles: 3, total: 129.9 } });

// Log applicatif
faro.api.pushLog(['Filtre appliqué', JSON.stringify(filtres)]);

Events let you build funnels (page views → add to cart → payment) and link a drop in conversion to an error or slowness.

➜ To go further: Conversion funnels in RUM: building, reading and comparing funnels in Faro, Dynatrace, Datadog and New Relic.

3. Sessions and users #

With care.

Sessions #

Faro creates a session identifier and adds it to all signals: you can find everything a session went through (pages, errors, slow requests).

initializeFaro({
  // ...
  sessionTracking: { enabled: true, samplingRate: 0.2 },   // 20 % des sessions
});

// Après connexion : identifiant technique, jamais l'e-mail
faro.api.setUser({ id: 'u-7f3a', attributes: { offre: 'premium' } });

Common mistake: Send no email, name or form content. The identifier must be pseudonymous and the collection covered by your privacy policy (see the lesson on operations).