> ## Documentation Index
> Fetch the complete documentation index at: https://clickhouse.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# デモデイズ - 2026-09-17

> 2026-09-17のClickStackデモデイズ

<h2 id="colouring-service-map-nodes-by-absolute-error-rate">
  実際のエラー率に基づくサービスマップのノードの色分け
</h2>

*デモ担当：[@MikeShi42](https://github.com/MikeShi42)*

<iframe width="768" height="432" src="https://www.youtube.com/embed/d8QHorCCgqY" title="YouTube ビデオプレーヤー" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen />

サービスマップでは、実際にエラーが発生しているサービスを見分けにくいというフィードバックがありました。エラーがゼロのサービスも含め、すべてのノードが赤系の色で表示されていたためです。また、色は表示中のグラフ内での相対値に基づいていたため、エラー率がわずか 0.3% でも、最もエラー率が高いサービスは常に最も濃い赤で表示されていました。

現在、エラー率は次の 4 つの固定区分で表示されます。

* **0%：** 青みがかったグレー
* **0% 超、1% 未満：** 薄い赤
* **1% 以上、5% 未満：** 中程度の赤
* **5% 以上：** 濃い赤

トラフィックのないサービスは中空の円で表示されます。トラフィックがあり、エラーのないサービスはグレーで表示されます。赤ならエラーが発生しています。

ここで重要なのはグレーです。32px のノードでは、薄いピンクと少し濃いピンクはほとんど見分けがつきません。青みがかったグレーなら区別しやすく、3 段階の赤には既存の配色を使用しています。

凡例も段階別の表示になり、最上段には `≥5%` が表示されます。このしきい値はツールチップで既に使用している警告色と共通のため、両者の表示に一貫性があります。レイテンシーとスループットには引き続き相対的な尺度を使用します。適切なしきい値がワークロードによって異なるためです。

ただし、6% と 60% が同じ色になるというトレードオフがあります。正確な割合は引き続きツールチップで確認できます。割合を反映したドーナツ図ならより詳しく示せますが、その実装には大きな変更が必要です。また、成功、`4xx`、`5xx`、スロットリングの内訳を表示するためのデータは、現時点ではありません。ログソースから取得できるのは、OpenTelemetry の `Ok`、`Error`、`Unset` ステータスです。

しきい値は当面固定です。今後はログソースごとにオーバーライドできるようにするとよいでしょう。`99.9%` の SLO を持つサービスとバッチジョブでは、許容できるエラー率が異なるためです。

**関連 PR：** [#3125](https://github.com/hyperdxio/hyperdx/pull/3125) 実際のエラー率のしきい値に基づいてサービスマップのノードを色分け