Sitenize Durumu Gömme

Durum sayfanızın canlı durumunu SVG rozetiyle gömün ya da herkese açık JSON API ile kendi görünümünüzü kurun. Tek satırlık script bileşeni yol haritasında.

"Site ayakta mı?" sorusunun cevabını müşterilerin zaten bulunduğu yerde, README'nizde, ana sayfanızda, dokümantasyonunuzda göstermek istersiniz. Bugün bunun iki yolu var:

Durum rozeti: tek bir <img> etiketiyle ya da tek satır Markdown ile gömdüğünüz küçük bir SVG görsel. Script yok, kurulacak bir şey yok.
Herkese açık durum API'si: sayfanın salt okunur JSON görüntüsü; kendi görünümünüzü çizmek istediğinizde.

Durum rozeti

Her herkese açık durum sayfasının bir rozeti vardır:

GET /api/public/status/:slug/badge.svg

Slug'ı acme-status olan bir sayfa için:

https://app.uptimewarden.online/api/public/status/acme-status/badge.svg

Parçacıkları almanın en kısa yolu, yayındaki bir durum sayfasını düzenlerken açılan Badge bölümüdür: canlı önizlemeyi gösterir ve Markdown, HTML ya da çıplak URL'yi sizin için kopyalar.

Parçacıklar

Markdown (GitHub, GitLab ve çoğu dokümantasyon aracı):

[![Acme status](https://app.uptimewarden.online/api/public/status/acme-status/badge.svg)](https://app.uptimewarden.online/public-status/acme-status)

HTML:

<a href="https://app.uptimewarden.online/public-status/acme-status">
  <img src="https://app.uptimewarden.online/api/public/status/acme-status/badge.svg" alt="Acme status">
</a>

Sayfanız doğrulanmış bir özel alan adındaysa bağlantıyı o alan adına verin (https://status.acme.com). Rozet URL'si iki adreste de çalışır.

Parametreler

Parametre	Değerler	Varsayılan	Ne yapar
`metric`	`status`, `uptime`	`status`	Sağ tarafta ne gösterileceği.
`label`	en fazla 30 karakterlik metin	`status` ya da `uptime`	Sol taraftaki metin. Kontrol karakterleri atılır, boşluklar teke indirilir.
`style`	`flat`, `flat-square`	`flat`	Yuvarlak ya da köşeli kenarlar.

Bilinmeyen bir metric ya da style değeri 400 döner.

Örnekler:

/api/public/status/acme-status/badge.svg?metric=uptime
/api/public/status/acme-status/badge.svg?label=api&style=flat-square

`metric=status` ne gösterir

Rozet, herkese açık sayfayla aynı veriyi ve aynı kuralları okur. Rozet metni İngilizcedir:

Değer	Renk	Ne zaman
Operational	yeşil	Tüm bileşenler çalışıyor ve açık bir şey yok.
Degraded	kehribar	Bir bileşen yavaş ya da sertifika uyarısı veriyor; bileşenlerin en fazla dörtte biri düşmüş; ya da açık bir olay var (`minor` bir duyuru veya bir monitörün açtığı herhangi bir olay).
Partial outage	kırmızı	Bileşenlerin dörtte birinden fazlası düşmüş ya da `major` bir olay açık.
Major outage	kırmızı	Bileşenlerin yarısından fazlası düşmüş ya da `critical` bir olay açık.
Maintenance	kehribar	Bir bileşen bakım penceresinde ya da açık bir `maintenance` duyurusu var, ve yukarıdakilerin hiçbiri geçerli değil.
Unknown	gri	Bir bileşen henüz hiç kontrol edilmemiş ve yukarıdakilerin hiçbiri geçerli değil.

Bakım penceresindeki bir bileşen düşmüş sayılmaz: planlı çalışma kesinti değildir. Birden fazla durum geçerliyse en kötüsü gösterilir.

`metric=uptime` ne gösterir

Sayfadaki tüm monitörlerin son 30 gündeki çalışma süresi; GET /api/status/:id/system?days=30 ile aynı rakam. Ürünün gösterim kuralına uyar: 100% yalnızca gerçekten 100 olduğunda; altındaki her değer iki ondalığa kesilir (asla yuvarlanmaz) ve sondaki sıfırlar atılır. Yani 99.996 değeri 99.99%, 99.70 değeri 99.7% olarak görünür.

%99 ve üzeri yeşil, %95 ve üzeri kehribar, altı kırmızıdır. Pencerede hiç kontrol yoksa rozet no data, sayfada Show uptime seçeneğini kapattıysanız n/a der: rozet, sayfanın kendisinin gizlediği bir şeyi asla yayınlamaz.

Ön bellek ve sınırlar

Rozet 60 saniye ön belleğe alınır (Cache-Control: public, max-age=60, s-maxage=60) ve bir ETag taşır. Sayfanızdaki bir değişiklik yaklaşık bir dakika içinde rozete yansır. GitHub'ınki gibi görsel vekil sunucular biraz daha uzun tutabilir.
İstekler herkese açık sayfayla aynı ön bellekten karşılanır; yoğun bir sitede rozet göstermek monitörlerinize yük bindirmez.
Her istemci IP'si dakikada en fazla 600 rozet isteyebilir.

Görünürlük

Rozet, sayfanın kendi görünürlüğünü izler. Taslak bir sayfa, parola korumalı bir sayfa ya da var olmayan bir slug için uç nokta 404 ile gri bir unknown rozeti döner. Üç durum birebir aynı görünür; rozet, yayınlamadığınız bir sayfa hakkında hiçbir şey açığa çıkarmaz.

Parola korumalı bir sayfanın çalışan bir rozeti yoktur: bir <img> sayfa parolasını gönderemez, parolayı URL'ye koymak da onu rozeti gömen her README'de yayınlamak olurdu. Rozet istiyorsanız parolayı kaldırın.

Güvenlik

Yanıt image/svg+xml türündedir; X-Content-Type-Options: nosniff ve Content-Security-Policy: default-src 'none'; style-src 'unsafe-inline' başlıklarını taşır. Rozette script yoktur ve başka hiçbir şey yüklemez. label değeriniz çizilmeden önce kaçışlanır.

Herkese açık durum API'si

Her herkese açık durum sayfasının JSON görüntüsü şu adreste sunulur:

GET /api/public/status/:slug

Burada :slug, sayfayı oluştururken verdiğiniz slug'dır. Herkese açık sayfalar için kimlik doğrulama gerekmez. Ürün içindeki durum sayfası arayüzünü besleyen veriyle aynısıdır.

Örnek:

curl https://app.uptimewarden.online/api/public/status/acme-status | jq

Yanıt biçimi (kısaltılmış):

{
  "page": {
    "slug": "acme-status",
    "domain": "status.acme.com",
    "title": "Acme Status",
    "description": "Acme platformu için canlı durum",
    "logoUrl": "https://...",
    "theme": { "primaryColor": "#3b82f6", "darkMode": false },
    "allowSubscriptions": true,
    "showHistory": true,
    "historyDays": 30
  },
  "monitors": [
    {
      "monitor": {
        "name": "API Gateway",
        "type": "http",
        "status": "up",
        "responseTime": 142,
        "uptime": 100,
        "lastCheckedAt": "2026-04-27T08:30:00.000Z"
      }
    }
  ],
  "incidents": [
    {
      "title": "API'de yüksek gecikme",
      "severity": "minor",
      "status": "monitoring",
      "startedAt": "2026-04-27T07:15:00.000Z",
      "updates": [
        { "message": "Kök neden araştırılıyor", "status": "investigating", "createdAt": "2026-04-27T07:15:00.000Z" }
      ]
    }
  ],
  "passwordProtected": false
}

Uç nokta birkaç saniye ön belleğe alınır, bu yüzden tarayıcıdan periyodik olarak istek atmak güvenlidir ve sunucuyu zorlamaz.

Parola korumalı sayfalar

Sayfa parola korumalıysa uç nokta, parolayı x-status-page-password başlığı ile gönderene kadar 401 döner:

GET /api/public/status/:slug
x-status-page-password: <ortak-parola>

Özel alan adları

Sayfa doğrulanmış bir özel alan adına bağlandığında alan adı çözücüsünü çağırabilirsiniz; slug'ı gömmek istemediğinizde işe yarar:

GET /api/public/status/by-domain/current?domain=status.acme.com

Çözücü aynı yanıtı döner, ancak yalnızca alan adı doğrulanmış duruma geçtiyse.

Kendi görünümünüzü kurmak

Rozet tasarımınıza uymuyorsa API'den kendi görünümünüzü çizin. Küçük bir React örneği:

import { useEffect, useState } from 'react'

type Status = 'operational' | 'degraded' | 'outage' | 'unknown'

function deriveOverallStatus(monitors: Array<{ monitor: { status: string } }>): Status {
  if (!monitors.length) return 'unknown'
  const states = monitors.map((m) => m.monitor.status)
  if (states.every((s) => s === 'up')) return 'operational'
  if (states.every((s) => s === 'down')) return 'outage'
  return 'degraded'
}

export function StatusBadge({ slug }: { slug: string }) {
  const [status, setStatus] = useState<Status>('unknown')

  useEffect(() => {
    let cancelled = false
    async function load() {
      const res = await fetch(`https://app.uptimewarden.online/api/public/status/${slug}`)
      if (!res.ok) return
      const data = await res.json()
      if (!cancelled) setStatus(deriveOverallStatus(data.monitors || []))
    }
    load()
    const id = setInterval(load, 60_000)
    return () => {
      cancelled = true
      clearInterval(id)
    }
  }, [slug])

  const label = {
    operational: 'Tüm sistemler çalışıyor',
    degraded: 'Kısmi sorun',
    outage: 'Aktif kesinti',
    unknown: 'Durum alınamıyor',
  }[status]

  return (
    <a
      href={`https://app.uptimewarden.online/public-status/${slug}`}
      data-status={status}
      className="uw-status-badge"
    >
      {label}
    </a>
  )
}

data-status değerine göre renklendirmek için küçük bir CSS dosyası ekleyin. Bu örnek SVG rozetinden daha basit bir kural kullanır (bakım pencerelerini ve açık olayları hesaba katmaz); sayfanın tam durumunu istiyorsanız rozeti kullanın.

Aynı yaklaşım düz JS, Vue, Svelte veya sunucu tarafında render edilen HTML için de geçerlidir: yalnızca fetch ve bir DOM güncellemesi yeterlidir.

Monitör başına durum trendi

Üründeki sayfadaki gibi son N günü gösteren çubuk veya nokta grafikleri çizmek istiyorsanız monitör başına geçmiş verisini çekebilirsiniz:

GET /api/public/status/:slug/monitors/:monitorPublicId/status-trend?days=30

Yanıt, kontrol panelinin kullandığı trend verisinin aynısıdır ve sunucu tarafında 5 dakika ön belleğe alınır.

Güvenlik ve CORS

Herkese açık durum API'si ve rozet salt okunurdur. Veriyi değiştiren bir POST muadili yoktur.
Herkese açık uç nokta için CORS açıktır: her kaynaktan istek atılabilir. Rozet her siteye gömülebilir.
Sayfa özele alındıysa JSON uç noktası 403, rozet 404 döner.
Parola korumalı sayfalarda doğrulama her istekte yapılır: kimlik doğrulamak için tek yol x-status-page-password başlığıdır (çerez veya oturum yoktur). Rozet bu başlığı kabul etmez.

Yol haritası

Gömülebilir script bileşeni: tek satırlık <script src="…"> kurulumu, data-* öznitelikleriyle yapılandırma (tema, konum, etiket).
Yerinde zaman çizelgesi gömme: iframe gerektirmeyen, tam olay geçmişini bileşen olarak gömme.

Bunlar yayınlandığında bu sayfa resmi snippet ile güncellenecek.

İlgili konular

Durum Sayfası Oluşturma: tam kurulum rehberi
Özel Alan Adı Kurulumu: durum sayfasını status.acme.com adresinde barındırma
Durum Sayfası Aboneleri: ziyaretçilerin e-posta ile abone olması