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

# Mapas de serviço

> Visualize as dependências entre serviços e o fluxo de requisições com os mapas de serviço do 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>
                Funcionalidade Beta. 
                <u>
                    <a href="/docs/beta-and-experimental-features#beta-features">
                        Saiba mais.
                    </a>
                </u>
            </span>
        </div>;
};

Os mapas de serviço mostram como seus serviços interagem. O ClickStack constrói o grafo associando spans de cliente (solicitações de saída) a spans de servidor (solicitações de entrada) dentro do mesmo trace, reconstruindo o caminho da solicitação entre os serviços.

Clique em **Service Map** no painel de navegação à esquerda para abrir o grafo completo. Os serviços aparecem quando você está [ingerindo dados de trace](/pt-BR/clickstack/ingesting-data) com OpenTelemetry.

<Image img="https://mintcdn.com/private-7c7dfe99-mintlify-fbfa8bee/TCLsdkFwl4CgDiNY/images/clickstack/service-maps/service-map-overview.png?fit=max&auto=format&n=TCLsdkFwl4CgDiNY&q=85&s=5f737e604e37d90cb2f4e2bde6ca7f1d" alt="Mapa de serviço mostrando nós de serviço e o fluxo de solicitações entre eles" size="lg" width="1999" height="981" data-path="images/clickstack/service-maps/service-map-overview.png" />

<div id="exploring-the-service-map">
  ## Explorando o mapa de serviço
</div>

Cada nó representa um serviço, identificado pelo atributo de recurso `service.name`. As arestas (linhas tracejadas) conectam serviços quando um span de cliente em um serviço corresponde a um span de servidor em outro. O tamanho do nó reflete o volume relativo de tráfego, e os nós em vermelho indicam serviços com erros no intervalo de tempo selecionado.

A barra de ferramentas acima do mapa permite filtrar e ajustar a visualização.

**Seletor de fonte** — filtre o mapa por uma fonte de trace específica (por exemplo, "ClickPy Traces").

<Image img="https://mintcdn.com/private-7c7dfe99-mintlify-fbfa8bee/TCLsdkFwl4CgDiNY/images/clickstack/service-maps/source-selector.png?fit=max&auto=format&n=TCLsdkFwl4CgDiNY&q=85&s=8331ed9af21927399525565946129cd3" alt="Seletor de fonte destacado na barra de ferramentas do mapa de serviço" size="lg" width="3838" height="138" data-path="images/clickstack/service-maps/source-selector.png" />

**Controle deslizante de sampling** — ajuste a taxa de sampling para equilibrar desempenho e precisão. Taxas menores carregam mais rápido em clusters de alto volume.

<Image img="https://mintcdn.com/private-7c7dfe99-mintlify-fbfa8bee/TCLsdkFwl4CgDiNY/images/clickstack/service-maps/sampling.png?fit=max&auto=format&n=TCLsdkFwl4CgDiNY&q=85&s=d26822c47e20b4b29c216499328eddf3" alt="Controle deslizante de sampling destacado na barra de ferramentas do mapa de serviço" size="lg" width="3838" height="138" data-path="images/clickstack/service-maps/sampling.png" />

**Seletor de intervalo de datas** — defina a janela de tempo dos dados de trace usados para criar o mapa.

<Image img="https://mintcdn.com/private-7c7dfe99-mintlify-fbfa8bee/TCLsdkFwl4CgDiNY/images/clickstack/service-maps/date-selector.png?fit=max&auto=format&n=TCLsdkFwl4CgDiNY&q=85&s=32ede93891cbf22bf7539d533026cc88" alt="Seletor de intervalo de datas destacado na barra de ferramentas do mapa de serviço" size="lg" width="3838" height="138" data-path="images/clickstack/service-maps/date-selector.png" />

Use os botões **+/-** no canto inferior esquerdo do mapa ou a rolagem para aumentar e diminuir o zoom.

<div id="trace-level-service-maps">
  ## Mapas de serviço no nível do trace
</div>

Ao inspecionar um trace individual, um mapa de serviço focado mostra como essa requisição específica passou pelos serviços. Isso permite ver a topologia de uma única requisição sem sair do waterfall do trace.

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