Un bloc de simulateur de prix, construit avec un peu de logique JavaScript pour calculer un total en fonction d’options cochées, s’est mis à afficher un résultat figé sur certains navigateurs, sans qu’aucun message d’erreur ne remonte côté équipe. Le premier signal est venu d’un client, trois jours plus tard, par e-mail. Depuis, ce bloc précis embarque son propre suivi Sentry, sans instrumenter l’ensemble du site.
L’idée n’est pas d’ajouter Sentry partout dans l’éditeur ou dans le thème : c’est d’isoler le suivi sur les composants qui présentent un vrai risque de plantage silencieux — calculs, appels réseau, manipulation d’état complexe — et de laisser le reste du site tel quel.
Pourquoi cibler un bloc plutôt que tout le site
Une instrumentation globale de Sentry sur un site WordPress capture énormément de bruit : extensions tierces, thèmes non maîtrisés, scripts de tracking marketing qui génèrent des erreurs sans rapport avec le code du client. Trier ce bruit prend du temps et dilue les alertes vraiment utiles.
En ciblant un bloc précis, chaque erreur capturée a une cause probable dans un périmètre de code restreint, ce qui raccourcit considérablement le temps de diagnostic.
Charger le SDK uniquement sur les pages concernées
Le SDK @sentry/browser s’installe via npm et se charge conditionnellement, seulement quand le bloc est présent sur la page — un contrôle simple avec has_block() côté PHP évite d’ajouter du poids partout ailleurs.
function wpmoderne_enqueue_sentry_simulateur() {
if ( ! has_block( 'wpmoderne/simulateur-prix' ) ) {
return;
}
wp_enqueue_script(
'wpmoderne-sentry-simulateur',
plugins_url( 'build/sentry-simulateur.js', __FILE__ ),
array(),
'1.0.0',
true
);
}
add_action( 'wp_enqueue_scripts', 'wpmoderne_enqueue_sentry_simulateur' );
Initialiser Sentry avec un contexte propre au bloc
L’initialisation se fait une seule fois par page, avec un tag qui identifie clairement le bloc concerné — indispensable dès que plusieurs blocs partagent un jour le même projet Sentry.
import * as Sentry from '@sentry/browser';
Sentry.init( {
dsn: 'https://exemple@o000000.ingest.sentry.io/000000',
environment: 'production',
tracesSampleRate: 0,
} );
Sentry.setTag( 'bloc', 'simulateur-prix' );
Le taux d’échantillonnage des traces de performance est volontairement mis à zéro : ce suivi ne cherche pas à mesurer la vitesse, seulement à capturer les exceptions non gérées.
Encadrer le calcul à risque
La logique de calcul du simulateur est encapsulée dans un bloc try/catch qui transmet à Sentry le contexte exact au moment du plantage : les options cochées par l’utilisateur, pas ses données personnelles.
function calculerTotal( options ) {
try {
return options.reduce( ( total, option ) => total + option.prix, 0 );
} catch ( erreur ) {
Sentry.captureException( erreur, {
extra: { options: options.map( ( o ) => o.id ) },
} );
return null;
}
}
Le retour à null permet ensuite d’afficher un message de repli propre à l’utilisateur, plutôt qu’un total incohérent qui passerait inaperçu.
Résultat après trois mois d’utilisation
- Deux plantages liés à un format de nombre local (virgule au lieu de point) sur des navigateurs configurés en anglais britannique.
- Une erreur liée à une option supprimée côté back-office mais toujours référencée dans une configuration mise en cache côté navigateur.
- Aucun faux positif lié à des extensions tierces, grâce au périmètre restreint de l’instrumentation.
Ce que cet article ne couvre pas
Le monitoring PHP des blocs dynamiques (erreurs côté render_callback) relève du SDK sentry/sentry pour PHP, avec une configuration et des enjeux différents, notamment autour des temps d’exécution serveur. Les erreurs de thème, elles, touchent un périmètre bien plus large que celui d’un bloc unique et justifient une approche globale, pas ce type d’instrumentation ciblée.
En résumé
Instrumenter un bloc précis avec Sentry plutôt que tout un site permet de garder un signal exploitable : chaque alerte pointe vers un périmètre de code réduit, ce qui raccourcit le temps entre la détection et le correctif. Pour un composant critique — paiement, calcul, formulaire complexe — ce coût d’installation minime se rembourse dès le premier bug évité en silence.
