hyskl - frontend tz

Что это

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

Также можно дебажить сложные сценарии, полезно для QA и аналитиков чтобы проверять воронки, флоу, онбординги и так далее

Как это работает

Слева фронтенд отображает категории логов - например, Auth, User, Onboarding

При нажатии на категорию открывается то что по середине, вызовы функций/логи отсортированные по порядку и идущие друг за другом. Если у нескольких логов один и тот же родитель, от родителя отходит раздваивающаяся линия как на картинке.

Справа внизу отображаются дополнительные метаданные лога, например, параметры в JSON

В правом верхнем углу будет input, который позволяет писать ИИ-ассистенту, чтобы отфильтровал данные или совершил какие-либо действия с логами

Что нужно сделать сейчас

Нужно сделать категории и граф с логами, примерно как на скриншоте, используя бесплатные компоненты react-flow. Нужно сделать минималистичный дизайн с shadcn/ui и 21st.dev компонентами, в идеале не писать кастомных, а использовать то что уже имеется.

Нужно сделать отображение метаданных логов справа, отображать красивый JSON с подсветкой и возможностью свернуть/развернуть объекты

page.tsx нужно сделать server-side, тк он будет забирать данные с бекенда.

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

state менеджеры типа Redux тут не нужны, обычных useState должно хватить

Формат данных

Лог:

{
  id: "123",
  parent_id: "1234",
  category: "123",
  category_id: "123",
  title: "getUsers(organizationId)",
  type: "function|function_result|log|error|warning",
  stacktrace: {
    path: "/Users/me/index.js:123",
    source: "getUsers()"
  },
  metadata: {
    payload: {}
  }
}