API-first

Headless страница статуса.
Ваша UI, наши данные.

Не нравится наша страница статуса? Соберите свою. Каждый байт, что показывает хостед-версия, доступен через публичный REST API и realtime SSE-стрим. Полная OpenAPI-спека.

Почему headless

Все остальные вендоры страниц статуса запирают вас в свой шаблон. Мы позволяем забрать данные и продолжать нами пользоваться.

Ваш бренд, ваши пиксели

Точное совпадение с основным сайтом. Кастомные шрифты, анимации, раскладки. Никакого вендорского футера и брендированных хедеров.

Рендерите где угодно

Server-компонент Next.js, Astro island, статический HTML, Slack-бот, CLI, in-app баннер. Один эндпоинт.

Оставьте на своём домене

CNAME не нужен. Забирайте с своего сервера, рендерите внутри приложения. Клиенты никогда не видят third-party URL.

Интегрируйте, а не мигрируйте

Добавьте виджет статуса в доки, админ-панель или клиент-портал без редиректа пользователей за пределы сайта.

Один запрос. Всё, что нужно.

GET на status-эндпоинт со своим slug. Парсим JSON. Рендерим.

curl
curl https://api.pulseapi.tech/status/acme
Ответ (фрагмент)
{
  "page": {
    "id": "acme",
    "title": "Acme API Status",
    "language": "en",
    "customDomain": "status.acme.com"
  },
  "overallStatus": "operational",
  "endpoints": [
    {
      "id": "ep_1",
      "name": "API",
      "status": "operational",
      "uptime24h": 99.98,
      "avgResponseTime": 127,
      "sparkline": [120, 118, 131, 127, 125],
      "uptime90d": [100, 100, 99.9, 100, ...]
    }
  ],
  "components": [...],
  "incidents": [...]
}

Добавьте в свой стек

React

app/status/page.tsx
export default async function Status() {
  const res = await fetch('https://api.pulseapi.tech/status/acme', {
    next: { revalidate: 30 },
  })
  const data = await res.json()

  return (
    <section>
      <h1>{data.page.title}</h1>
      <StatusBanner status={data.overallStatus} />
      {data.endpoints.map((ep) => (
        <EndpointRow key={ep.id} endpoint={ep} />
      ))}
    </section>
  )
}

Vue / Nuxt

pages/status.vue
<script setup lang="ts">
const { data } = await useFetch('https://api.pulseapi.tech/status/acme', {
  key: 'status',
  server: true,
})
</script>

<template>
  <h1>{{ data.page.title }}</h1>
  <p>Status: {{ data.overallStatus }}</p>
  <ul>
    <li v-for="ep in data.endpoints" :key="ep.id">
      {{ ep.name }} — {{ ep.status }} ({{ ep.uptime24h }}%)
    </li>
  </ul>
</template>

Vanilla JS

status.js
async function renderStatus() {
  const res = await fetch('https://api.pulseapi.tech/status/acme')
  const data = await res.json()
  document.getElementById('status').innerHTML = `
    <h2>${data.page.title}</h2>
    <p>${data.overallStatus}</p>
  `
}
renderStatus()
setInterval(renderStatus, 30_000)

Realtime через SSE — без polling

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

live-обновления статуса
const es = new EventSource('https://api.pulseapi.tech/sse/status/acme')

es.addEventListener('status:changed', (e) => {
  const payload = JSON.parse(e.data)
  updateBanner(payload.status)
})

es.addEventListener('incident:created', (e) => {
  showNotification(JSON.parse(e.data))
})

es.addEventListener('check:completed', (e) => {
  const check = JSON.parse(e.data)
  appendToSparkline(check.endpointId, check.responseTime)
})

Гайды по фреймворкам

Выберите свой стек — у нас есть гайд с copy-paste кодом.

FAQ

Что такое headless страница статуса?

Headless страница статуса отделяет данные (uptime, компоненты, инциденты) от UI. Вместо лок-ина в шаблон вендора вы забираете данные по API и рендерите как хотите — свой React-компонент, server-rendered страницу, даже терминальный дашборд.

Почему не использовать просто хостед-версию?

Можно — работает из коробки. Но если бренду нужна кастомная вёрстка, тесная интеграция с основным сайтом или рендеринг на своём домене без CNAME — headless даёт полную свободу. Те же данные, любая UI.

У API есть rate-limit?

Публичный status-эндпоинт рассчитан на тяжёлый read-траффик (на нём работают наши собственные хостед-страницы и бейджи). Разумный polling — норм. При очень высоком трафике кешируйте ответы 10–30 секунд или подписывайтесь на SSE-стрим.

Можно использовать со статическим генератором?

Да. Забирайте наш API на этапе билда через Next.js getStaticProps, Astro frontmatter или аналог. Для live-обновлений используйте ISR/revalidate с коротким TTL или переведите страницу в server-rendered.

Что возвращает API?

Метаданные страницы (заголовок, брендинг), общий статус, эндпоинты со статусом и uptime, компоненты, активные инциденты, массивы uptime за 90 дней для полос, данные sparkline по времени отклика. Полная спека на api.pulseapi.tech/docs.

Нужна аутентификация?

Для публичного status-эндпоинта — нет. Это тот же URL, который клиенты видят на хостед-версии. Для dashboard API (создание эндпоинтов, запись инцидентов) нужен API-ключ.

Можно подписаться на realtime-обновления вместо polling?

Да. Подключайтесь к SSE-эндпоинту /sse/status/:slug — получайте изменения статуса, новые инциденты и результаты проверок live.

Как делать аутентификацию для приватных страниц статуса?

Сгенерируйте org API-ключ в дашборде и отправляйте его в заголовке Authorization, когда вызываете status-эндпоинт со своего сервера. Не экспозируйте ключ в браузер.

Запустите страницу статуса на своих условиях

Бесплатный тариф, без карты. Хостед, headless или оба.