> ## Documentation Index
> Fetch the complete documentation index at: https://private-7c7dfe99-mintlify-8c05c8a2.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Cartes de services

> Visualisez les dépendances entre les services et le flux des requêtes avec les cartes de services de ClickStack.

export const Video = ({src, width = '100%', autoPlay = true, loop = true, muted = true, playsInline = true, ...rest}) => {
  const base = typeof window !== 'undefined' && window.location.pathname.startsWith('/docs') ? '/docs' : '';
  const fullSrc = src && src.startsWith('/') ? base + src : src;
  return <video src={fullSrc} width={width} autoPlay={autoPlay} loop={loop} muted={muted} playsInline={playsInline} {...rest} />;
};

export const Image = ({img, alt, size}) => {
  return <Frame>
      <img src={img} alt={alt} />
    </Frame>;
};

export const galaxyOnClick = eventName => () => {
  try {
    if (typeof window !== "undefined" && window.galaxy && eventName) {
      window.galaxy.track(eventName, {
        interaction: "click"
      });
    }
  } catch (e) {}
};

export const BetaBadge = ({link, galaxyTrack, galaxyEvent}) => {
  if (link) {
    return <a href={link} target="_blank" rel="noopener noreferrer" className="betaBadge" onClick={galaxyTrack && galaxyEvent ? galaxyOnClick(galaxyEvent) : undefined}>
                <Icon />
                <span>Beta</span>
            </a>;
  }
  return <div className="betaBadge">
            <Icon />
            <span>
                Fonctionnalité en bêta. 
                <u>
                    <a href="/docs/beta-and-experimental-features#beta-features">
                        En savoir plus.
                    </a>
                </u>
            </span>
        </div>;
};

Les cartes de services montrent comment vos services interagissent. ClickStack construit le graphe en faisant correspondre les spans client (requêtes sortantes) aux spans serveur (requêtes entrantes) au sein d’une même trace, afin de reconstituer le parcours des requêtes entre les services.

Cliquez sur **Carte de services** dans le panneau de navigation de gauche pour ouvrir le graphe complet. Les services apparaissent une fois que vous [ingérez des données de trace](/fr/clickstack/ingesting-data) avec OpenTelemetry.

<Image img="https://mintcdn.com/private-7c7dfe99-mintlify-8c05c8a2/_TDydWLKO6Z3njo9/images/clickstack/service-maps/service-map-overview.png?fit=max&auto=format&n=_TDydWLKO6Z3njo9&q=85&s=6ab39c677d7363317f62b186ddfa1b11" alt="Carte de services montrant les nœuds de service et le flux des requêtes entre eux" size="lg" width="1999" height="981" data-path="images/clickstack/service-maps/service-map-overview.png" />

<div id="exploring-the-service-map">
  ## Exploration de la carte de services
</div>

Chaque nœud représente un service, identifié par l’attribut de ressource `service.name`. Les arêtes (lignes en pointillés) relient des services lorsqu’un span client dans l’un correspond à un span serveur dans l’autre. La taille des nœuds reflète le volume de trafic relatif, et les nœuds rouges indiquent les services présentant des erreurs dans l’intervalle de temps sélectionné.

La barre d’outils au-dessus de la carte vous permet de filtrer et d’ajuster l’affichage.

**Sélecteur de source** — filtrez la carte pour n’afficher qu’une source de traces spécifique (par ex. « ClickPy Traces »).

<Image img="https://mintcdn.com/private-7c7dfe99-mintlify-8c05c8a2/_TDydWLKO6Z3njo9/images/clickstack/service-maps/source-selector.png?fit=max&auto=format&n=_TDydWLKO6Z3njo9&q=85&s=a998e19c6d8bafaf94b37690279c4c0d" alt="Sélecteur de source mis en évidence dans la barre d’outils de la carte de services" size="lg" width="3838" height="138" data-path="images/clickstack/service-maps/source-selector.png" />

**Curseur d’échantillonnage** — ajustez le taux d’échantillonnage pour trouver le bon équilibre entre performances et précision. Des taux plus faibles accélèrent le chargement sur les clusters à fort volume.

<Image img="https://mintcdn.com/private-7c7dfe99-mintlify-8c05c8a2/_TDydWLKO6Z3njo9/images/clickstack/service-maps/sampling.png?fit=max&auto=format&n=_TDydWLKO6Z3njo9&q=85&s=624f847e0ddf0717486719c687bc4d32" alt="Curseur d’échantillonnage mis en évidence dans la barre d’outils de la carte de services" size="lg" width="3838" height="138" data-path="images/clickstack/service-maps/sampling.png" />

**Sélecteur de plage de dates** — définissez la fenêtre temporelle des données de trace utilisées pour créer la carte.

<Image img="https://mintcdn.com/private-7c7dfe99-mintlify-8c05c8a2/_TDydWLKO6Z3njo9/images/clickstack/service-maps/date-selector.png?fit=max&auto=format&n=_TDydWLKO6Z3njo9&q=85&s=8805b947c5eee06d445d184ab501a679" alt="Sélecteur de plage de dates mis en évidence dans la barre d’outils de la carte de services" size="lg" width="3838" height="138" data-path="images/clickstack/service-maps/date-selector.png" />

Utilisez les boutons **+/-** dans le coin inférieur gauche de la carte ou la molette pour zoomer et dézoomer.

<div id="trace-level-service-maps">
  ## Cartes de services au niveau de la trace
</div>

Lorsque vous examinez une trace individuelle, une carte de services dédiée montre comment cette requête précise est passée d’un service à l’autre. Cela vous permet de visualiser la topologie d’une requête unique sans quitter le trace waterfall.

<Frame>
  <Video src="/images/clickstack/service-maps/service-map-demo.mp4" />
</Frame>
