Headless स्टेटस पेज।
आपकी UI, हमारा data।
हमारा स्टेटस पेज पसंद नहीं? अपना बनाएं। Hosted version जो byte दिखाती है वो सब public REST API और realtime SSE stream से available है। पूर्ण OpenAPI spec।
Headless क्यों
हर दूसरा status page vendor आपको अपने template में lock करता है। हम आपको data ले जाने देते हैं और फिर भी हमें use करते रहने देते हैं।
आपका brand, आपके pixels
अपनी मुख्य साइट से exactly match करें। Custom fonts, animations, layouts। कोई vendor footer नहीं, कोई branded headers नहीं।
कहीं भी render करें
Next.js server component, Astro island, static HTML, Slack bot, CLI, in-app banner। एक ही endpoint।
अपने domain पर रखें
CNAME की ज़रूरत नहीं। अपने server से fetch करें, अपनी ऐप में render करें। ग्राहक कभी third-party URL नहीं देखते।
Integrate करें, migrate नहीं
अपनी docs, admin panel, या customer portal में status widget जोड़ें — users को site से बाहर redirect किए बिना।
एक fetch। वो सब जो चाहिए।
अपने slug के साथ status endpoint पर GET करें। JSON parse करें। Render करें।
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": [...]
}अपनी stack में जोड़ें
React
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
<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
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)SSE के माध्यम से realtime — polling नहीं
Incident updates, status transitions, और check results को जैसे ही आते हैं subscribe करें।
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)
})Framework-specific guides
अपना stack चुनें — हमारे पास copy-paste code के साथ guide है।
FAQ
Headless स्टेटस पेज क्या है?
Headless स्टेटस पेज data (uptime, components, incidents) को UI से अलग करता है। Vendor के template में lock होने के बजाय, आप API से data fetch करते हैं और जैसे चाहें render करते हैं — अपना React component, server-rendered page, यहां तक कि terminal dashboard भी।
सीधे hosted स्टेटस पेज क्यों नहीं use करें?
कर सकते हैं — यह out of the box काम करता है। लेकिन अगर आपके brand को custom layout, main site के साथ tight integration, या CNAME के बिना अपने domain पर rendering चाहिए, तो headless पूरी आज़ादी देता है। वही data, कोई भी UI।
क्या API rate-limited है?
Public status endpoint heavy read traffic के लिए designed है (यह हमारे hosted स्टेटस पेज और embedded badges को चलाता है)। Reasonable polling ठीक है। बहुत high traffic के लिए responses 10-30 seconds cache करें या live updates के लिए SSE stream subscribe करें।
क्या इसे static site generator के साथ use कर सकता हूं?
हां। Next.js getStaticProps, Astro frontmatter, या equivalent के साथ build time पर हमारी API fetch करें। Live updates के लिए short TTL के साथ ISR/revalidate use करें, या उस page को server-rendered कर दें।
API क्या return करती है?
स्टेटस पेज metadata (title, branding), overall status, per-endpoint status और uptime, components, active incidents, uptime bars के लिए 90-day uptime arrays, और response-time sparkline data। पूर्ण spec api.pulseapi.tech/docs पर।
क्या authentication चाहिए?
Public status endpoint के लिए — नहीं। यह वही URL है जो आपके ग्राहक hosted version पर देखते। Dashboard APIs (endpoints बनाना, incidents लिखना) के लिए API key चाहिए।
क्या polling के बजाय real-time updates subscribe कर सकता हूं?
हां। /sse/status/:slug पर SSE endpoint से connect करें और status changes, नए incidents, और check results तुरंत पाएं।
Private स्टेटस पेज के लिए authentication कैसे handle करूं?
Dashboard में एक org API key generate करें और server से status endpoint fetch करते समय Authorization header में भेजें। Key को browser में कभी expose न करें।
अपनी शर्तों पर स्टेटस पेज ship करें
मुफ्त tier, कोई credit card नहीं। Hosted, headless, या दोनों।