> ## Documentation Index > Fetch the complete documentation index at: https://docs.appsignal.com/llms.txt > Use this file to discover all available pages before exploring further. # Confidentialité et filtrage des données du navigateur Browser monitoring est une fonctionnalité en beta d'[AppSignal Labs](/labs). Le package `@appsignal/browser` est publié sous le tag `beta` sur npm, et sa configuration ainsi que son API peuvent encore changer d'une release beta à l'autre. Partagez vos retours dans notre [communauté Discord](https://discord.gg/EjF6ykYx63). La télémétrie front-end est plus proche des données personnelles que la télémétrie back-end. Les URL transportent des tokens, les formulaires des numéros de carte, et le texte d'un bouton peut être un montant de commande. AppSignal pour Browser est prudent par défaut, et toutes les décisions restantes vous appartiennent.

Ce qui est protégé par défaut

Sans aucune configuration : * **La plupart des champs d'URL créés par le SDK omettent les paramètres de requête par défaut.** Cela couvre les URL des pages d'erreur, les URL des pages de web vitals, les breadcrumbs de navigation, et les breadcrumbs `fetch`/`XMLHttpRequest`. Le breadcrumb réseau initial du chargement du document fait exception, comme expliqué plus bas. * **Le SDK ne lit pas les corps de requête ou de réponse** des appels réseau. Vérifiez les données que votre propre code place dans les erreurs, la sortie console, les tags ou les breadcrumbs manuels. * **Aucun cookie n'est lu ni écrit.** Le SDK stocke des valeurs `appsignal_*` dans `localStorage` et `sessionStorage`. Celles-ci incluent des identifiants aléatoires pour la session, l'onglet et le visiteur, l'heure d'activité, et les tags que vous avez définis. L'identifiant de visiteur est une valeur aléatoire sans rien de personnel. L'identifiant de visiteur persiste entre les visites. Traitez-le comme un identifiant dans votre politique de confidentialité. * **Les avertissements et erreurs de la console sont coupés** après les 200 premiers caractères. Le SDK ne capture pas `console.log`. * **Rien n'est envoyé quand `active` vaut `false`.** Le SDK ne modifie rien sur la page, ne démarre aucun minuteur et n'émet aucune requête.

URL et paramètres de requête

`privacy.queryParamsAllowlist` liste les paramètres de requête à conserver dans les champs d'URL ci-dessous. Les autres paramètres de requête sont retirés de ces champs. Vous pouvez utiliser `*` pour faire correspondre plusieurs noms à la fois : `utm_*` conserve donc tous les paramètres UTM. La liste par défaut est vide, ce qui les supprime tous. Cela s'applique aux breadcrumbs `fetch`/`XMLHttpRequest` et de navigation. Cela s'applique aussi aux erreurs de requête rapportées automatiquement, aux URL des pages d'erreur, aux référents, et aux URL des pages de web vitals. ```js JavaScript theme={null} init({ key: "", privacy: { queryParamsAllowlist: ["utm_*", "page"], }, }); ``` Avec ce réglage : | URL | Champ d'URL filtré | | - | - | | `https://example.com/search?q=alice@corp.com&page=2` | `https://example.com/search?page=2` | | `https://example.com/dashboard?utm_source=email&token=abc` | `https://example.com/dashboard?utm_source=email` | | `https://example.com/callback#access_token=ey123&token_type=bearer` | `https://example.com/callback` | | `https://example.com/checkout#/payment` | inchangée | Les deux dernières lignes forment la paire importante. Les deux URL ont quelque chose après un `#`, et elles sont traitées différemment à dessein. La troisième URL contient des données au format requête après le `#`, donc le SDK en retire le token dans ces champs filtrés. La quatrième URL est une route à hash, que le SDK conserve. Cela inclut tout texte de requête à l'intérieur d'une route à hash, comme `#/payment?token=abc`. Gardez les secrets hors des routes à hash. Les ancres simples comme `#pricing` sont également conservées. Le breadcrumb réseau initial du chargement du document utilise actuellement l'URL d'atterrissage complète, même quand `queryParamsAllowlist` est vide. `networkBlocklist` ne le filtre pas. Si les URL d'atterrissage peuvent contenir des secrets, écartez ce breadcrumb avec `beforeBreadcrumb` : ```js JavaScript theme={null} import { init } from "@appsignal/browser"; init({ key: "", endpoint: "https://appsignal-endpoint.net", beforeBreadcrumb: (breadcrumb) => breadcrumb.category === "network" && breadcrumb.data?.initiator === "document" ? null : breadcrumb, }); ```

Exclure des requêtes réseau

`privacy.networkBlocklist` liste les appels `fetch` et `XMLHttpRequest` qui ne doivent laisser aucun breadcrumb, et qui ne sont non plus jamais rapportés comme [requêtes échouées](/browser/distributed-tracing#what-is-reported). La requête a lieu normalement. Seul son enregistrement est ignoré. Les motifs sont comparés à l'hôte et au chemin de l'URL. Un `*` seul correspond à une partie du chemin, et `**` correspond à un nombre quelconque de parties. ```js JavaScript theme={null} init({ key: "", privacy: { networkBlocklist: [ "api.stripe.com/**", // every request to that host "*/auth/token", // that path on any host "example.com/users/*/card" // any single ID in that position ], }, }); ```

Masquer et bloquer des éléments de page

Deux options contrôlent ce qui est enregistré quand un utilisateur sélectionne quelque chose. Les deux options prennent des sélecteurs CSS. Sélectionner un conteneur couvre aussi ses descendants. `privacy.dom.maskText` remplace le texte d'un élément correspondant par `[masked]`. Le breadcrumb est tout de même enregistré, vous conservez donc le fait que quelqu'un l'a sélectionné : ``` maskText: [".pay-button"] click button "Pay $42.00" → click button "[masked]" ``` Un libellé `data-breadcrumb` prend le pas sur le masquage de texte. Ne mettez pas de valeurs sensibles dans cet attribut. `privacy.dom.blockElement` n'enregistre rien du tout. Utilisez-le pour les formulaires de carte bancaire, les numéros d'identité et tout ce qui ne doit jamais apparaître : ``` blockElement: ["#card-form"] click input#cvc → (nothing recorded) ``` Ces deux options n'affectent que ce qui est enregistré quand un utilisateur sélectionne quelque chose. Elles ne touchent ni les messages d'erreur, ni les URL réseau, ni les avertissements et erreurs de la console. Pour cela, utilisez `queryParamsAllowlist`, `networkBlocklist` et les deux fonctions de la section suivante.

Filtrer les erreurs et les breadcrumbs

Deux hooks vous permettent de filtrer les erreurs avant qu'elles ne soient rapportées, et les breadcrumbs avant qu'ils n'entrent dans le buffer. Aucun des deux ne peut être `async`. `beforeError` s'exécute pour les erreurs qui passent le sampling et la limite de débit globale. Retournez `null` pour écarter une erreur, ou modifiez ses champs pour en retirer du texte sensible : ```js JavaScript theme={null} import { init } from "@appsignal/browser"; const EMAIL_PATTERN = /[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}/gi; init({ key: "", beforeError: (event) => { // Drop known noise if (/ResizeObserver/.test(event.message)) return null; // Redact email addresses from the message and the stack event.message = event.message.replace(EMAIL_PATTERN, "[redacted]"); event.stack = event.stack?.replace(EMAIL_PATTERN, "[redacted]"); return event; }, }); ``` Retourner `null` n'envoie aucune erreur et n'ajoute aucun breadcrumb d'erreur. La [limite de débit](/browser/error-tracking#rate-limits) globale est vérifiée en premier, donc les erreurs écartées comptent tout de même dedans. Une [requête échouée](/browser/distributed-tracing#what-is-reported) arrive ici sous forme d'`HTTPError` ou de `TimeoutError`. Ses champs `url`, `method`, `status` et `duration_ms` se trouvent sous `context.request`. Si vous y expurgez l'URL, expurgez-la aussi dans le message d'erreur, qui contient l'URL de la requête. `beforeBreadcrumb` s'exécute une fois pour chaque breadcrumb, au moment de son enregistrement. Retournez `null` pour le jeter, ou modifiez ses champs `message` et `data` : ```js JavaScript theme={null} init({ key: "", beforeBreadcrumb: (breadcrumb) => { if (breadcrumb.category === "console") return null; return breadcrumb; }, }); ``` `beforeError` ne peut pas voir les breadcrumbs, car ils sont attachés à l'erreur après que cette fonction l'a approuvée. Utilisez plutôt `beforeBreadcrumb` pour nettoyer le contenu des breadcrumbs. Aucune de ces deux fonctions ne peut être `async`. Si `beforeError` retourne une promesse, AppSignal journalise un `console.error` et jette l'erreur. Effectuez tout traitement lent avant d'appeler `captureError`, pas à l'intérieur de ces fonctions. Rien n'est collecté avant l'exécution d'`init()` : demander le consentement d'abord consiste donc simplement à ne pas l'appeler avant de l'avoir obtenu. ```js JavaScript theme={null} import { init, destroy } from "@appsignal/browser"; if (consent.granted("analytics")) { init({ key: "", endpoint: "https://appsignal-endpoint.net" }); } consent.on("revoked", () => destroy()); ``` `destroy()` arrête la collecte immédiatement, en envoyant ce qu'il avait déjà rassemblé. Cela n'affecte que la page sur laquelle se trouve l'utilisateur. Conservez sa décision vous-même et vérifiez-la avant d'appeler `init()`, sinon la page suivante qu'il ouvre recommence à collecter.

Ce que vous pouvez dire à vos utilisateurs

Une erreur rapportée peut inclure jusqu'à 25 breadcrumbs récents. Selon ce qui s'est passé avant elle, ceux-ci peuvent décrire : * Les pages qu'ils ont ouvertes. * Ce qu'ils ont sélectionné, et à quel endroit de l'écran ils l'ont sélectionné. Les libellés de clic peuvent inclure du texte visible, masquez donc les éléments sensibles. * Les requêtes émises par la page, et si chacune a réussi. * Les avertissements et erreurs que la page a journalisés dans la console. * Des tâches longues. L'erreur inclut aussi tous les tags que vous avez définis. Les lots de web vitals contiennent des valeurs de métriques et du contexte de visite, mais n'incluent pas cette suite de breadcrumbs par défaut. La [page des breadcrumbs](/browser/breadcrumbs#what-is-collected) contient la liste complète. Chaque lot de web vitals transporte aussi du contexte de visite. Cela inclut des identifiants aléatoires pour la session, l'onglet et le visiteur, l'URL de la page et son référent. Cela inclut aussi le user agent, la taille de l'écran et de la fenêtre, la langue et le fuseau horaire. Là où le navigateur les expose, il transporte également le type de connexion et la quantité de mémoire de l'appareil. Le SDK ne lit pas directement les valeurs des champs de formulaire, les corps réseau ou les cookies. Le SDK génère un identifiant de visiteur aléatoire. Il persiste sur l'appareil entre les visites. Vos propres messages d'erreur, tags et breadcrumbs peuvent contenir des détails personnels. Vérifiez-les avant d'envoyer des données à AppSignal. This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.