> ## 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.

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

> Начало работы с 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/index).

<Image img="https://mintcdn.com/private-7c7dfe99-mintlify-8c05c8a2/RhEK5rhPj_7m6pWY/images/use-cases/observability/hyperdx-demo/architecture.png?fit=max&auto=format&n=RhEK5rhPj_7m6pWY&q=85&s=ba5f23a16dfa13c21a927d662b6f97a3" 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/index), развернули сервисы в 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-8c05c8a2/brNmKxVjpyGdH7Ao/images/use-cases/observability/edit_connection.png?fit=max&auto=format&n=brNmKxVjpyGdH7Ao&q=85&s=76edafd78807d0f700807904b2deefc7" 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-8c05c8a2/RhEK5rhPj_7m6pWY/images/use-cases/observability/hyperdx-demo/edit_demo_connection.png?fit=max&auto=format&n=RhEK5rhPj_7m6pWY&q=85&s=d9ebac1bf901bfa5c7f6096163e59783" 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-8c05c8a2/RhEK5rhPj_7m6pWY/images/use-cases/observability/hyperdx-demo/edit_demo_source.png?fit=max&auto=format&n=RhEK5rhPj_7m6pWY&q=85&s=11a4eda3c902d423a13c29be99997ee9" 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-8c05c8a2/RhEK5rhPj_7m6pWY/images/use-cases/observability/hyperdx-demo/step_2.png?fit=max&auto=format&n=RhEK5rhPj_7m6pWY&q=85&s=5455b88527169cc0b234eafffa2b8e56" 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-8c05c8a2/RhEK5rhPj_7m6pWY/images/use-cases/observability/hyperdx-demo/step_3.png?fit=max&auto=format&n=RhEK5rhPj_7m6pWY&q=85&s=31063af10eb53d28f6e1c34c3dc4b677" 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-8c05c8a2/RhEK5rhPj_7m6pWY/images/use-cases/observability/hyperdx-demo/step_4.png?fit=max&auto=format&n=RhEK5rhPj_7m6pWY&q=85&s=a13d146a2e584e200e057be5e1a6095c" 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-8c05c8a2/RhEK5rhPj_7m6pWY/images/use-cases/observability/hyperdx-demo/step_5.png?fit=max&auto=format&n=RhEK5rhPj_7m6pWY&q=85&s=e42964b7a403a9354033ee8ebbf2aab1" 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-8c05c8a2/RhEK5rhPj_7m6pWY/images/use-cases/observability/hyperdx-demo/step_6.png?fit=max&auto=format&n=RhEK5rhPj_7m6pWY&q=85&s=839100e13689b788326b9107dc72a45a" 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-8c05c8a2/RhEK5rhPj_7m6pWY/images/use-cases/observability/hyperdx-demo/step_7.png?fit=max&auto=format&n=RhEK5rhPj_7m6pWY&q=85&s=6f69fbe532b726168b8f636510d55156" 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-8c05c8a2/RhEK5rhPj_7m6pWY/images/use-cases/observability/hyperdx-demo/step_8.png?fit=max&auto=format&n=RhEK5rhPj_7m6pWY&q=85&s=4c23696050604602ba248ccefbfffd37" 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-8c05c8a2/RhEK5rhPj_7m6pWY/images/use-cases/observability/hyperdx-demo/step_9.png?fit=max&auto=format&n=RhEK5rhPj_7m6pWY&q=85&s=4d617c794297125aa26dc1b33890c52b" 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-8c05c8a2/RhEK5rhPj_7m6pWY/images/use-cases/observability/hyperdx-demo/step_10.png?fit=max&auto=format&n=RhEK5rhPj_7m6pWY&q=85&s=18758ffb7d11f3269aef842c105824a6" 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-8c05c8a2/RhEK5rhPj_7m6pWY/images/use-cases/observability/hyperdx-demo/step_11.png?fit=max&auto=format&n=RhEK5rhPj_7m6pWY&q=85&s=eedd6b490b9bf88d8b721ebb80ab1145" 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-8c05c8a2/RhEK5rhPj_7m6pWY/images/use-cases/observability/hyperdx-demo/step_12.png?fit=max&auto=format&n=RhEK5rhPj_7m6pWY&q=85&s=491057637f8c20772fe7ec39aefe507a" 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-8c05c8a2/RhEK5rhPj_7m6pWY/images/use-cases/observability/hyperdx-demo/step_13.png?fit=max&auto=format&n=RhEK5rhPj_7m6pWY&q=85&s=7bdc13aa0ff8e3d74d749fd946f33dd3" 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-8c05c8a2/RhEK5rhPj_7m6pWY/images/use-cases/observability/hyperdx-demo/step_14.png?fit=max&auto=format&n=RhEK5rhPj_7m6pWY&q=85&s=b5791afca1d7e53d98d6abf86a634ae0" 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-8c05c8a2/RhEK5rhPj_7m6pWY/images/use-cases/observability/hyperdx-demo/step_15.png?fit=max&auto=format&n=RhEK5rhPj_7m6pWY&q=85&s=33a481ff31a5c284b5fafde889aee8cb" 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-8c05c8a2/RhEK5rhPj_7m6pWY/images/use-cases/observability/hyperdx-demo/step_16.png?fit=max&auto=format&n=RhEK5rhPj_7m6pWY&q=85&s=c6e9b4a67633e378f6ece3345698e86d" 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-8c05c8a2/RhEK5rhPj_7m6pWY/images/use-cases/observability/hyperdx-demo/step_17.png?fit=max&auto=format&n=RhEK5rhPj_7m6pWY&q=85&s=a4f31528dd8621e2f8452f2c5f5b5d4e" 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-8c05c8a2/RhEK5rhPj_7m6pWY/images/use-cases/observability/hyperdx-demo/step_18.png?fit=max&auto=format&n=RhEK5rhPj_7m6pWY&q=85&s=a2cfd99c8d95bc3da6b90696d76c810c" 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-8c05c8a2/RhEK5rhPj_7m6pWY/images/use-cases/observability/hyperdx-demo/step_19.png?fit=max&auto=format&n=RhEK5rhPj_7m6pWY&q=85&s=9a9d6a446161fc5e13ceb607eda03a69" 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-8c05c8a2/RhEK5rhPj_7m6pWY/images/use-cases/observability/hyperdx-demo/step_20.png?fit=max&auto=format&n=RhEK5rhPj_7m6pWY&q=85&s=dbe6dee436713b5bc1fbcebeb3d2a585" 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-8c05c8a2/RhEK5rhPj_7m6pWY/images/use-cases/observability/hyperdx-demo/step_21.png?fit=max&auto=format&n=RhEK5rhPj_7m6pWY&q=85&s=0c078466681be37451eb8cf1807e134d" 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-8c05c8a2/RhEK5rhPj_7m6pWY/images/use-cases/observability/hyperdx-demo/step_22.png?fit=max&auto=format&n=RhEK5rhPj_7m6pWY&q=85&s=68ad6155c9bd8a721180d978e050bf1d" 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-8c05c8a2/RhEK5rhPj_7m6pWY/images/use-cases/observability/hyperdx-demo/step_23.png?fit=max&auto=format&n=RhEK5rhPj_7m6pWY&q=85&s=82825a82c04225c8f234bbeef8ce8241" 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-8c05c8a2/RhEK5rhPj_7m6pWY/images/use-cases/observability/hyperdx-demo/step_24.png?fit=max&auto=format&n=RhEK5rhPj_7m6pWY&q=85&s=4a072e8bc886a4c75829cab0c84f57c9" 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/index), чтобы глубже познакомиться с конкретными возможностями.
