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

# Удалённый демо-набор данных

> Начало работы с ClickStack и удалённым демо-набором данных

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

**В этом руководстве предполагается, что вы развернули ClickStack с открытым исходным кодом, следуя [инструкциям для образа all-in-one](/ru/clickstack/getting-started/oss) или [Local Mode Only](/ru/clickstack/deployment/local-mode-only), и завершили первоначальное создание пользователя. Либо можно пропустить всю локальную настройку и просто подключиться к нашей хостинговой демоверсии ClickStack [play-clickstack.clickhouse.com](https://play-clickstack.clickhouse.com), в которой используется этот набор данных.**

В этом руководстве используется пример набора данных, размещённый в общедоступной Песочнице ClickHouse по адресу [sql.clickhouse.com](https://sql.clickhouse.com), к которому можно подключиться из локально развернутого ClickStack.

<Warning>
  **Не поддерживается в Управляемом ClickStack**

  Удалённые базы данных не поддерживаются при использовании Управляемого ClickStack. Поэтому этот набор данных также не поддерживается.
</Warning>

Он содержит примерно 40 часов данных, собранных в версии официального демо OpenTelemetry (OTel) для ClickHouse. Эти данные каждую ночь воспроизводятся заново, а временные метки сдвигаются под текущее временное окно, что позволяет пользователям изучать поведение системы с помощью встроенных в HyperDX логов, трассировок и метрик.

<Info>
  **Различия в данных**

  Поскольку набор данных каждый день воспроизводится с полуночи, точные визуализации могут различаться в зависимости от того, когда вы открываете демо.
</Info>

<div id="demo-scenario">
  ## Демонстрационный сценарий
</div>

В этой демонстрации мы разбираем инцидент, связанный с интернет-магазином, который продает телескопы и аксессуары к ним.

Команда поддержки клиентов сообщила, что у пользователей возникают проблемы с оплатой при оформлении заказа. Проблема была передана команде Site Reliability Engineering (SRE) для расследования.

С помощью HyperDX команда SRE проанализирует журналы, трассировки и метрики, чтобы диагностировать и устранить проблему, а затем изучит данные сеанса, чтобы проверить, соответствуют ли их выводы фактическому поведению пользователей.

<div id="otel-demo">
  ## Демо OpenTelemetry
</div>

В этом демо используется [форк официального демо OpenTelemetry, поддерживаемый ClickStack](https://github.com/ClickHouse/opentelemetry-demo).

<div id="demo-architecture">
  ### Архитектура демо
</div>

Демо состоит из микросервисов, написанных на разных языках программирования, которые взаимодействуют друг с другом по gRPC и HTTP, а также генератора нагрузки, использующего Locust для имитации пользовательского трафика. Оригинальный исходный код этого демо был изменён, чтобы использовать [инструментирование ClickStack](/ru/clickstack/ingesting-data/sdks).

<Image img="https://mintcdn.com/private-7c7dfe99-mintlify-8a08bda2/16jdCy1HTWZ9Bvmz/images/use-cases/observability/hyperdx-demo/architecture.png?fit=max&auto=format&n=16jdCy1HTWZ9Bvmz&q=85&s=222ad0619ceafc300bc80891e0f043e3" alt="Архитектура" size="lg" width="2180" height="2282" data-path="images/use-cases/observability/hyperdx-demo/architecture.png" />

*Источник: [https://opentelemetry.io/docs/demo/architecture/](https://opentelemetry.io/docs/demo/architecture/)*

Дополнительные сведения о демо можно найти здесь:

* [документация OpenTelemetry](https://opentelemetry.io/docs/demo/)
* [форк, поддерживаемый ClickStack](https://github.com/ClickHouse/opentelemetry-demo)

<div id="demo-steps">
  ## Шаги демонстрации
</div>

**В этой демонстрации мы настроили сбор телеметрии с помощью [ClickStack SDKs](/ru/clickstack/ingesting-data/sdks), развернули сервисы в Kubernetes и также собрали оттуда метрики и журналы.**

<Steps>
  <Step>
    ### Подключение к демонстрационному серверу

    <Info>
      **Режим только для локальной работы**

      Этот шаг можно пропустить, если при развертывании в локальном режиме вы нажали `Connect to Demo Server`. В этом режиме к именам источников добавляется префикс `Demo_`, например `Demo_Logs`
    </Info>

    Перейдите в `Team Settings` и нажмите `Edit` у `Local Connection`:

    <Image img="https://mintcdn.com/private-7c7dfe99-mintlify-8a08bda2/16jdCy1HTWZ9Bvmz/images/use-cases/observability/edit_connection.png?fit=max&auto=format&n=16jdCy1HTWZ9Bvmz&q=85&s=a5e26aecb1d7b2755cbf738a42db90e6" alt="Изменение подключения" size="lg" width="3600" height="1852" data-path="images/use-cases/observability/edit_connection.png" />

    Переименуйте подключение в `Demo` и заполните следующую форму, используя следующие сведения о подключении к демонстрационному серверу:

    * `Connection Name`: `Demo`
    * `Host`: `https://sql-clickhouse.clickhouse.com`
    * `Username`: `otel_demo`
    * `Password`: Оставьте пустым

    <Image img="https://mintcdn.com/private-7c7dfe99-mintlify-8a08bda2/16jdCy1HTWZ9Bvmz/images/use-cases/observability/hyperdx-demo/edit_demo_connection.png?fit=max&auto=format&n=16jdCy1HTWZ9Bvmz&q=85&s=5f710b91f62b1598e7a38cbca2e974da" alt="Изменение демонстрационного подключения" size="lg" width="3600" height="1852" data-path="images/use-cases/observability/hyperdx-demo/edit_demo_connection.png" />
  </Step>

  <Step>
    ### Измените источники

    <Info>
      **Только локальный режим**

      Этот шаг можно пропустить, если при развертывании в локальном режиме вы нажали `Connect to Demo Server`. В этом режиме к именам источников добавляется префикс `Demo_`, например `Demo_Logs`
    </Info>

    Прокрутите страницу вверх до `Sources` и измените каждый источник — `Logs`, `Traces`, `Metrics` и `Sessions` — так, чтобы он использовал базу данных `otel_v2`.

    <Image img="https://mintcdn.com/private-7c7dfe99-mintlify-8a08bda2/16jdCy1HTWZ9Bvmz/images/use-cases/observability/hyperdx-demo/edit_demo_source.png?fit=max&auto=format&n=16jdCy1HTWZ9Bvmz&q=85&s=6914359e720832062842b58a1c92db30" alt="Редактирование демонстрационного источника" size="lg" width="3600" height="1856" data-path="images/use-cases/observability/hyperdx-demo/edit_demo_source.png" />

    <Note>
      Возможно, потребуется перезагрузить страницу, чтобы в каждом источнике отображался полный список баз данных.
    </Note>
  </Step>

  <Step>
    ### Настройте временной диапазон

    Настройте время так, чтобы отображались все данные за предыдущий `1 day`, используя селектор времени в правом верхнем углу.

    <Image img="https://mintcdn.com/private-7c7dfe99-mintlify-8a08bda2/16jdCy1HTWZ9Bvmz/images/use-cases/observability/hyperdx-demo/step_2.png?fit=max&auto=format&n=16jdCy1HTWZ9Bvmz&q=85&s=525778d84cd1b41f9811d742bcb87d54" alt="Шаг 2" size="lg" width="3600" height="1856" data-path="images/use-cases/observability/hyperdx-demo/step_2.png" />

    На обзорной столбчатой диаграмме можно заметить небольшую разницу в количестве ошибок: в нескольких соседних столбцах немного увеличится красная часть.

    <Note>
      Расположение столбцов будет различаться в зависимости от того, когда вы выполняете запрос к набору данных.
    </Note>
  </Step>

  <Step>
    ### Отфильтруйте ошибки

    Чтобы выделить ошибки, используйте фильтр `SeverityText` и выберите `error`, чтобы отображались только записи с уровнем error.

    Теперь ошибки будут заметнее:

    <Image img="https://mintcdn.com/private-7c7dfe99-mintlify-8a08bda2/16jdCy1HTWZ9Bvmz/images/use-cases/observability/hyperdx-demo/step_3.png?fit=max&auto=format&n=16jdCy1HTWZ9Bvmz&q=85&s=f83635d7bd367499c52ff30196f30487" alt="Шаг 3" size="lg" width="3600" height="1856" data-path="images/use-cases/observability/hyperdx-demo/step_3.png" />
  </Step>

  <Step>
    ### Выявление шаблонов ошибок

    С помощью возможности Clustering в HyperDX вы можете автоматически выявлять ошибки и группировать их в осмысленные шаблоны. Это ускоряет анализ при работе с большими объёмами логов и трассировок. Чтобы воспользоваться этой возможностью, выберите `Event Patterns` в меню `Analysis Mode` на левой панели.

    Кластеры ошибок показывают проблемы, связанные со сбоями при оплате, включая именованный шаблон `Failed to place order`. Дополнительные кластеры также указывают на проблемы со списанием средств с карт и переполнением кэша.

    <Image img="https://mintcdn.com/private-7c7dfe99-mintlify-8a08bda2/16jdCy1HTWZ9Bvmz/images/use-cases/observability/hyperdx-demo/step_4.png?fit=max&auto=format&n=16jdCy1HTWZ9Bvmz&q=85&s=0bc6f3d04f6894ebce3fa2f85909826d" alt="Шаг 4" size="lg" width="3600" height="1856" data-path="images/use-cases/observability/hyperdx-demo/step_4.png" />

    Обратите внимание, что эти кластеры ошибок, вероятно, относятся к разным сервисам.
  </Step>

  <Step>
    ### Изучение паттерна ошибки

    Нажмите на наиболее очевидный кластер ошибок, который соответствует зарегистрированной проблеме, из-за которой пользователи могут завершать платежи: `Failed to place order`.

    Это отобразит список всех случаев этой ошибки, связанных с сервисом `frontend`:

    <Image img="https://mintcdn.com/private-7c7dfe99-mintlify-8a08bda2/16jdCy1HTWZ9Bvmz/images/use-cases/observability/hyperdx-demo/step_5.png?fit=max&auto=format&n=16jdCy1HTWZ9Bvmz&q=85&s=4dab3063e0b17eb477d7a2bb9c1f10d6" alt="Шаг 5" size="lg" width="3600" height="1856" data-path="images/use-cases/observability/hyperdx-demo/step_5.png" />

    Выберите любую из найденных ошибок. Подробно отобразятся метаданные журналов. Просмотр разделов `Overview` и `Column Values` указывает на проблему со списанием средств с карт из-за кэша:

    `failed to charge card: could not charge the card: rpc error: code = Unknown desc = Visa cache full: cannot add new item.`

    <Image img="https://mintcdn.com/private-7c7dfe99-mintlify-8a08bda2/16jdCy1HTWZ9Bvmz/images/use-cases/observability/hyperdx-demo/step_6.png?fit=max&auto=format&n=16jdCy1HTWZ9Bvmz&q=85&s=be01203226cae8b3997cb0aad348c698" alt="Шаг 6" size="lg" width="3600" height="1856" data-path="images/use-cases/observability/hyperdx-demo/step_6.png" />
  </Step>

  <Step>
    ### Изучите инфраструктуру

    Мы выявили ошибку, связанную с кэшем, которая, вероятно, вызывает сбои при оплате. Теперь нужно понять, где именно в нашей микросервисной архитектуре возникает эта проблема.

    Учитывая проблему с кэшем, имеет смысл проверить базовую инфраструктуру — возможно, в связанных подах есть проблема с памятью? В ClickStack журналы и метрики объединены и показываются в контексте, что помогает быстрее найти первопричину.

    Выберите вкладку `Infrastructure`, чтобы просмотреть метрики, связанные с подами, на которых работает сервис `frontend`, и расширьте временной диапазон до `1d`:

    <Image img="https://mintcdn.com/private-7c7dfe99-mintlify-8a08bda2/16jdCy1HTWZ9Bvmz/images/use-cases/observability/hyperdx-demo/step_7.png?fit=max&auto=format&n=16jdCy1HTWZ9Bvmz&q=85&s=5115ac3ef1bd36188aa6f64e0519b4e3" alt="Шаг 7" size="lg" width="3600" height="1856" data-path="images/use-cases/observability/hyperdx-demo/step_7.png" />

    Похоже, проблема не связана с инфраструктурой — за этот период метрики заметно не менялись ни до, ни после ошибки. Закройте вкладку `Infrastructure`.
  </Step>

  <Step>
    ### Изучение трейса

    В ClickStack трейсы также автоматически коррелируются и с журналами, и с метриками. Давайте изучим трейс, связанный с выбранной записью журнала, чтобы определить, какой сервис за это отвечает.

    Выберите `Trace`, чтобы визуализировать связанный трейс. Прокрутив открывшееся представление вниз, мы увидим, как HyperDX визуализирует распределённый трейс между микросервисами, связывая спаны в каждом сервисе. Платёж явно задействует несколько микросервисов, в том числе те, которые выполняют checkout и конвертацию валют.

    <Image img="https://mintcdn.com/private-7c7dfe99-mintlify-8a08bda2/16jdCy1HTWZ9Bvmz/images/use-cases/observability/hyperdx-demo/step_8.png?fit=max&auto=format&n=16jdCy1HTWZ9Bvmz&q=85&s=7c3c30f175e0879652e806ee71fd7d8f" alt="Шаг 8" size="lg" width="3600" height="1856" data-path="images/use-cases/observability/hyperdx-demo/step_8.png" />

    Прокрутив представление до самого низа, мы увидим, что ошибку вызывает сервис `payment`, и затем она распространяется вверх по цепочке вызовов.

    <Image img="https://mintcdn.com/private-7c7dfe99-mintlify-8a08bda2/16jdCy1HTWZ9Bvmz/images/use-cases/observability/hyperdx-demo/step_9.png?fit=max&auto=format&n=16jdCy1HTWZ9Bvmz&q=85&s=dff948efed6a31e5ecefd81919c8f893" alt="Шаг 9" size="lg" width="3600" height="1856" data-path="images/use-cases/observability/hyperdx-demo/step_9.png" />
  </Step>

  <Step>
    ### Поиск трейсов

    Мы установили, что пользователи не могут завершить покупки из-за проблемы с кэшем в сервисе payment. Давайте подробнее изучим трейсы этого сервиса, чтобы лучше понять первопричину.

    Переключитесь в основное представление Search, выбрав `Search`. Смените источник данных на `Traces` и выберите представление `Results table`. **Убедитесь, что временной диапазон по-прежнему установлен на последний день.**

    <Image img="https://mintcdn.com/private-7c7dfe99-mintlify-8a08bda2/16jdCy1HTWZ9Bvmz/images/use-cases/observability/hyperdx-demo/step_10.png?fit=max&auto=format&n=16jdCy1HTWZ9Bvmz&q=85&s=aabf752af8e079f1f8d5fd0f4e30cba5" alt="Шаг 10" size="lg" width="3600" height="1856" data-path="images/use-cases/observability/hyperdx-demo/step_10.png" />

    В этом представлении показаны все трейсы за последний день. Мы знаем, что проблема возникает в нашем сервисе payment, поэтому примените фильтр `payment` к `ServiceName`.

    <Image img="https://mintcdn.com/private-7c7dfe99-mintlify-8a08bda2/16jdCy1HTWZ9Bvmz/images/use-cases/observability/hyperdx-demo/step_11.png?fit=max&auto=format&n=16jdCy1HTWZ9Bvmz&q=85&s=7b3b3dc4adf3ab2b6506192d539112cf" alt="Шаг 11" size="lg" width="3600" height="1856" data-path="images/use-cases/observability/hyperdx-demo/step_11.png" />

    Если применить к трейсам кластеризацию событий, выбрав `Event Patterns`, мы сразу увидим проблему с кэшем в сервисе `payment`.

    <Image img="https://mintcdn.com/private-7c7dfe99-mintlify-8a08bda2/16jdCy1HTWZ9Bvmz/images/use-cases/observability/hyperdx-demo/step_12.png?fit=max&auto=format&n=16jdCy1HTWZ9Bvmz&q=85&s=f276d9c0b4ab4514cc126a92c824f990" alt="Шаг 12" size="lg" width="3600" height="1856" data-path="images/use-cases/observability/hyperdx-demo/step_12.png" />
  </Step>

  <Step>
    ### Изучите инфраструктуру трейса

    Переключитесь в представление результатов, нажав `Results table`. Отфильтруйте ошибки с помощью фильтра `StatusCode` и значения `Error`.

    <Image img="https://mintcdn.com/private-7c7dfe99-mintlify-8a08bda2/16jdCy1HTWZ9Bvmz/images/use-cases/observability/hyperdx-demo/step_13.png?fit=max&auto=format&n=16jdCy1HTWZ9Bvmz&q=85&s=500909185fbbb7c9bbfd506b33ec8728" alt="Шаг 13" size="lg" width="3600" height="1856" data-path="images/use-cases/observability/hyperdx-demo/step_13.png" />

    Выберите ошибку `Error: Visa cache full: cannot add new item.`, перейдите на вкладку `Infrastructure` и увеличьте временной диапазон до `1d`.

    <Image img="https://mintcdn.com/private-7c7dfe99-mintlify-8a08bda2/16jdCy1HTWZ9Bvmz/images/use-cases/observability/hyperdx-demo/step_14.png?fit=max&auto=format&n=16jdCy1HTWZ9Bvmz&q=85&s=7adf0d3ac523cbb203728721d08d92c8" alt="Шаг 14" size="lg" width="3600" height="1856" data-path="images/use-cases/observability/hyperdx-demo/step_14.png" />

    Сопоставив трейсы с метриками, мы видим, что у сервиса `payment` выросло потребление памяти и CPU, а затем показатели упали до `0` (это можно связать с перезапуском пода) — это указывает на то, что проблема с кэшем привела к проблемам с ресурсами. Можно ожидать, что это повлияло на время завершения платежей.
  </Step>

  <Step>
    ### Event Deltas для более быстрого поиска причины

    Event Deltas помогают выявлять аномалии, связывая изменения производительности или частоты ошибок с конкретными подмножествами данных, что позволяет быстрее определить первопричину.

    Хотя мы знаем, что у сервиса `payment` есть проблема с кэшем, из-за которой растёт потребление ресурсов, первопричина всё ещё не установлена.

    Вернитесь к представлению таблицы результатов и выберите период времени, содержащий ошибки, чтобы ограничить объём данных. Обязательно захватите несколько часов до появления ошибок и, если возможно, после них (проблема может всё ещё сохраняться):

    <Image img="https://mintcdn.com/private-7c7dfe99-mintlify-8a08bda2/16jdCy1HTWZ9Bvmz/images/use-cases/observability/hyperdx-demo/step_15.png?fit=max&auto=format&n=16jdCy1HTWZ9Bvmz&q=85&s=c4812d92ea2e1a7bdcafb0d55c334fee" alt="Шаг 15" size="lg" width="2559" height="1240" data-path="images/use-cases/observability/hyperdx-demo/step_15.png" />

    Удалите фильтр ошибок и выберите `Event Deltas` в левом меню `Analysis Mode`.

    <Image img="https://mintcdn.com/private-7c7dfe99-mintlify-8a08bda2/16jdCy1HTWZ9Bvmz/images/use-cases/observability/hyperdx-demo/step_16.png?fit=max&auto=format&n=16jdCy1HTWZ9Bvmz&q=85&s=a2348f3a2156d3f1e19784c78ad9676d" alt="Шаг 16" size="lg" width="2560" height="1097" data-path="images/use-cases/observability/hyperdx-demo/step_16.png" />

    На верхней панели показано распределение длительностей, где цвет указывает на плотность событий (количество спанов). Обычно имеет смысл исследовать подмножество событий вне основной концентрации.

    Если выбрать события с длительностью больше `1ms` и применить фильтр `Filter by selection`, можно проанализировать различия между "обычными" событиями и группой высокой плотности спанов с длительностью около 0 мс:

    <Image img="https://mintcdn.com/private-7c7dfe99-mintlify-8a08bda2/16jdCy1HTWZ9Bvmz/images/use-cases/observability/hyperdx-demo/step_17.png?fit=max&auto=format&n=16jdCy1HTWZ9Bvmz&q=85&s=09649ab486d2cd998f943f802b41ab72" alt="Шаг 17" size="lg" width="2558" height="1288" data-path="images/use-cases/observability/hyperdx-demo/step_17.png" />

    При анализе этого подмножества данных видно, что спаны на "фоне" вне выделения — это в основном транзакции Visa, связанные с ответами длительностью 0 мс из-за ошибок кэша.
  </Step>

  <Step>
    ### Использование графиков для дополнительного контекста

    В ClickStack можно строить графики по любым числовым значениям из журналов, трасс или метрик, чтобы получить больше контекста.

    Мы установили следующее:

    * Проблема связана с сервисом payment
    * Кэш заполнен
    * Это привело к росту потребления ресурсов
    * Из-за проблемы платежи Visa не завершались или, по крайней мере, выполнялись очень долго.

    <br />

    Выберите `Chart Explorer` в левом меню. Заполните следующие поля, чтобы построить график времени, необходимого для завершения платежей, по типу графика:

    * `Data Source`: `Traces`
    * `Metric`: `Maximum`
    * `SQL Column`: `Duration`
    * `Where`: `ServiceName: payment`
    * `Timespan`: `Last 1 day`

    <br />

    Нажатие `▶️` покажет, как со временем ухудшалась производительность обработки платежей.

    <Image img="https://mintcdn.com/private-7c7dfe99-mintlify-8a08bda2/16jdCy1HTWZ9Bvmz/images/use-cases/observability/hyperdx-demo/step_18.png?fit=max&auto=format&n=16jdCy1HTWZ9Bvmz&q=85&s=e634ce9c9742ece2c2660fbe7c37d228" alt="Шаг 18" size="lg" width="3600" height="1856" data-path="images/use-cases/observability/hyperdx-demo/step_18.png" />

    Если задать `Group By` как `SpanAttributes['app.payment.card_type']` (просто введите `card` для автодополнения), можно увидеть, как производительность сервиса для транзакций Visa ухудшалась по сравнению с Mastercard:

    <Image img="https://mintcdn.com/private-7c7dfe99-mintlify-8a08bda2/16jdCy1HTWZ9Bvmz/images/use-cases/observability/hyperdx-demo/step_19.png?fit=max&auto=format&n=16jdCy1HTWZ9Bvmz&q=85&s=b597101690dc14a4ecd6b36e7496cb37" alt="Шаг 19" size="lg" width="3600" height="1856" data-path="images/use-cases/observability/hyperdx-demo/step_19.png" />

    Обратите внимание: после возникновения ошибки ответы возвращаются за `0s`.
  </Step>

  <Step>
    ### Дополнительный контекст при изучении метрик

    Наконец, давайте построим график размера кэша как метрики, чтобы посмотреть, как он менялся со временем, и тем самым получить больше контекста.

    Заполните следующие значения:

    * `Data Source`: `Metrics`
    * `Metric`: `Maximum`
    * `SQL Column`: `visa_validation_cache.size (gauge)` (для автодополнения просто введите `cache`)
    * `Where`: `ServiceName: payment`
    * `Group By`: `<empty>`

    Мы видим, как размер кэша увеличивался в течение 4–5 часов (вероятно, после выката новой версии), прежде чем достиг максимального значения `100,000`. По `Sample Matched Events` видно, что наши ошибки коррелируют с тем моментом, когда кэш достигает этого предела, после чего его размер фиксируется как `0`, а время ответа тоже становится `0s`.

    <Image img="https://mintcdn.com/private-7c7dfe99-mintlify-8a08bda2/16jdCy1HTWZ9Bvmz/images/use-cases/observability/hyperdx-demo/step_20.png?fit=max&auto=format&n=16jdCy1HTWZ9Bvmz&q=85&s=fa2e7f95f31156929cedce7c36430d8b" alt="Шаг 20" size="lg" width="3600" height="1856" data-path="images/use-cases/observability/hyperdx-demo/step_20.png" />

    Подводя итог, изучив логи, трейсы и, наконец, метрики, мы пришли к следующим выводам:

    * Проблема связана с сервисом payment
    * Изменение в поведении сервиса, вероятно вызванное развертыванием, привело к медленному росту кэша visa в течение 4–5 часов — до максимального значения `100,000`.
    * Это привело к росту потребления ресурсов по мере увеличения кэша — вероятно, из-за неудачной реализации
    * По мере роста кэша производительность платежей Visa ухудшалась
    * Достигнув максимального размера, кэш начал отклонять платежи и сообщать о размере `0`.
  </Step>

  <Step>
    ### Использование сеансов

    Сеансы позволяют воспроизводить действия пользователя, наглядно показывая, как именно произошла ошибка с его точки зрения. Хотя их обычно не используют для поиска первопричины, они полезны для подтверждения проблем, о которых сообщает служба поддержки, и могут служить отправной точкой для более глубокого расследования.

    В HyperDX сеансы связаны с трассировками и журналами, что дает полное представление о первопричине.

    Например, если команда поддержки передала адрес электронной почты пользователя, столкнувшегося с проблемой при оплате, `Ronny.Windler@gmail.com`, часто эффективнее начать с его сеанса, а не сразу искать в журналах или трассировках.

    Перейдите на вкладку `Client Sessions` в левом меню, предварительно убедившись, что в качестве источника данных выбрано `Sessions`, а период времени установлен на `Last 1 day`:

    <Image img="https://mintcdn.com/private-7c7dfe99-mintlify-8a08bda2/16jdCy1HTWZ9Bvmz/images/use-cases/observability/hyperdx-demo/step_21.png?fit=max&auto=format&n=16jdCy1HTWZ9Bvmz&q=85&s=a543d31ea24a8e1d5cef01c844409410" alt="Шаг 21" size="lg" width="3600" height="1856" data-path="images/use-cases/observability/hyperdx-demo/step_21.png" />

    Выполните поиск по `SpanAttributes.userEmail: Ronny.Windler`, чтобы найти сеанс нашего клиента. При выборе сеанса слева отобразятся события браузера и связанные спаны для этого сеанса, а справа — заново воспроизведенное поведение пользователя в браузере:

    <Image img="https://mintcdn.com/private-7c7dfe99-mintlify-8a08bda2/16jdCy1HTWZ9Bvmz/images/use-cases/observability/hyperdx-demo/step_22.png?fit=max&auto=format&n=16jdCy1HTWZ9Bvmz&q=85&s=66e4895aa4b490ea853e560c08d24021" alt="Шаг 22" size="lg" width="3600" height="1856" data-path="images/use-cases/observability/hyperdx-demo/step_22.png" />
  </Step>

  <Step>
    ### Повторное воспроизведение сеансов

    Сеансы можно воспроизводить, нажимая кнопку ▶️. Переключение между `Highlighted` и `All Events` позволяет менять степень детализации спанов: в первом режиме выделяются ключевые события и ошибки.

    Если прокрутить список спанов до конца, можно увидеть ошибку `500`, связанную с `/api/checkout`. Нажатие кнопки ▶️ для этого конкретного спана переносит воспроизведение к этой точке сеанса, позволяя нам увидеть, что происходило у клиента: похоже, оплата просто не работает, и при этом никакая ошибка не отображается.

    <Image img="https://mintcdn.com/private-7c7dfe99-mintlify-8a08bda2/16jdCy1HTWZ9Bvmz/images/use-cases/observability/hyperdx-demo/step_23.png?fit=max&auto=format&n=16jdCy1HTWZ9Bvmz&q=85&s=b645b94abb4f2a80ded12e1baa7cbb83" alt="Шаг 23" size="lg" width="3600" height="1856" data-path="images/use-cases/observability/hyperdx-demo/step_23.png" />

    Выбрав этот спан, мы можем убедиться, что причиной была внутренняя ошибка. Перейдя на вкладку `Trace` и прокрутив связанные спаны, мы можем подтвердить, что клиент действительно пострадал из-за нашей проблемы с кэшем.

    <Image img="https://mintcdn.com/private-7c7dfe99-mintlify-8a08bda2/16jdCy1HTWZ9Bvmz/images/use-cases/observability/hyperdx-demo/step_24.png?fit=max&auto=format&n=16jdCy1HTWZ9Bvmz&q=85&s=097c9ba7ccd3360661b9f101eaca873a" alt="Шаг 24" size="lg" width="3600" height="1856" data-path="images/use-cases/observability/hyperdx-demo/step_24.png" />
  </Step>
</Steps>

В этом демо разбирается реальный инцидент со сбоями платежей в приложении интернет-магазина и показывается, как ClickStack помогает находить первопричины с помощью единых логов, трассировок, метрик и воспроизведения сеансов — изучите наши [другие руководства по быстрому старту](/ru/clickstack/example-datasets), чтобы глубже познакомиться с конкретными возможностями.
