Embed widget rehberi

Hazır React bileşenleri, Errorbird verisini müşterinizin kendi panelinde göstermenizi sağlar. Ajans kullanımında asıl değer buradadır: son müşteri Errorbird'ü görmez, kendi panelinde kendi markasıyla görür.

npm install @errorbird/client @errorbird/react

Kurulum

Bileşenler ortak bir sağlayıcı içinde çalışır. Sağlayıcı hem istemciyi hem de marka ayarlarını (renk, logo, white-label) sunucudan okuyup bileşenlere dağıtır:

import { ErrorbirdProvider, ErrorbirdIssueList, ErrorbirdUptimeBadge } from '@errorbird/react'

export function MusteriPaneli() {
  return (
    <ErrorbirdProvider apiKey="ebrd_pub_…" projectId="01a01b…">
      <ErrorbirdUptimeBadge monitorId="01a01c…" days={30} />
      <ErrorbirdIssueList limit={5} title="Son hatalar" />
    </ErrorbirdProvider>
  )
}

Bileşenler

Bileşen	Prop'lar	Gösterdiği
`ErrorbirdIssueList`	`limit`, `title`	Açık Issue listesi, sayaç ve son görülme
`ErrorbirdUptimeBadge`	`monitorId`, `days`	Uptime yüzdesi ve durum
`ErrorbirdSslCountdown`	`monitorId`	Sertifikanın kalan gün sayısı
`ErrorbirdDomainBadge`	`monitorId`	Alan adı bitiş tarihi ve registrar

Bileşenler kendi verisini çeker ve söküldüklerinde isteği iptal eder; ayrıca bir veri katmanı kurmanız gerekmez.

White-label

ErrorbirdProvider, projenin bağlı olduğu ClientWorkspace'in marka ayarlarını otomatik okur:

Vurgu rengi bileşenlerin vurgu renginde kullanılır.
Logo ve workspace adı başlıklarda görünür.
White-label açıksa Errorbird markası hiçbir bileşende görünmez.

Marka ayarları panelde Ajans konsolu → Marka ayarları altından değiştirilir; bileşen kodunuzda renk sabiti tutmayın — müşteri markasını değiştirdiğinde yeniden dağıtım gerekirdi.

Güvenlik

Bileşenler tarayıcıda çalışır ve publishable anahtar kullanır. Bu anahtar:

yalnızca okuma yapar,
yalnızca izinli alan adı listesindeki origin'lerden kabul edilir,
yalnızca kendi projesinin verisine erişir.

Anahtarın paket dosyanıza girmesi beklenen durumdur; tasarım bunu varsayar. Buna karşılık secret anahtarı asla istemci koduna koymayın.

Kendi bileşeninizi yazmak

Hazır bileşenler @errorbird/client üzerine kuruludur ve ayrıcalıklı bir API kullanmazlar. İhtiyacınız farklıysa aynı istemciyle kendi bileşeninizi yazın:

import { useErrorbird } from '@errorbird/react'

function KotaGostergesi() {
  const { client } = useErrorbird()
  const [usage, setUsage] = useState(null)

  useEffect(() => {
    const controller = new AbortController()
    client.getUsage(controller.signal).then(setUsage).catch(() => {})
    return () => controller.abort()
  }, [client])

  return <span>{usage?.eventsThisMonth ?? '—'}</span>
}

Çerçeve bağımsız kullanım

React kullanmıyorsanız @errorbird/client tek başına yeterlidir; bileşenler onun ince bir kabuğudur. Vue, Svelte veya sade JavaScript ile aynı veriyi çekip kendi görünümünüzü kurabilirsiniz.