Kurulumnpm install signalbird

signalbird/browser - Tarayıcı

React, Vue, Angular, Svelte ve düz JavaScript aynı istemciyi kullanır. Çatıya özel sarmalayıcı yoktur; gereken tek şey bir fonksiyon çağrısıdır.

Neden ayrı bir paket?

Sebep teknik değil, güvenliktir.

Sunucu anahtarı (sb_secret_live_…) gizlidir ve istemciye gömülemez: bir kez tarayıcıya indiğinde herkesindir. Sunucu bunu bir kural olarak uygular - Origin başlığı taşıyan bir istekte gizli anahtar reddedilir (SECRET_KEY_IN_BROWSER).

Tarayıcı açık anahtar kullanır (sb_public_live_…). Bu anahtar gizli değildir; güvenliği kısıttan gelir:

yalnız panelde tanımladığınız izinli kökenlerden (alan adlarından) yazabilir (anahtar üretilirken alan adınız ve alt alan adları kendiliğinden eklenir),
kritik seviye yazamaz: tarayıcıdan gelen critical kayıt error olarak saklanır (kritik seviye sessiz saatleri deler; istemciye gömülü bir anahtarın ekibin telefonunu gece çaldırması engellenir),
tanımsız bir kanal adına yazınca kanal kendiliğinden ve sessiz açılır; takım başına kendiliğinden açılan kanal sayısının bir tavanı vardır.

İstemci tarafı kod herkesin elindedir. Bildirim kurallarını (kim, push mı e-posta mı) kanal ayarından yönetin; tarayıcıdan gelen hatalar için ayrı bir kanal açmanız önerilir.

Kurulum

bash

npm install signalbird

Kurulum ve kullanım

typescript

import { initSignalbird } from 'signalbird/browser'

const sb = initSignalbird({
  publicKey: 'sb_public_live_…',
  source: 'web',
})

// window.onerror + unhandledrejection
sb.captureErrors('browser')

sb.error('browser', 'sepet güncellenemedi', { cartId })

Kayıtlar tek tek değil toplu gider (varsayılan 3 saniyede bir) ve sekme kapanırken sendBeacon ile boşaltılır - kullanıcının tarayıcısından saniyede onlarca istek çıkarmak hem yavaş hem pahalıdır.

React / Next.js

tsx

'use client'
import { useEffect } from 'react'
import { initSignalbird } from 'signalbird/browser'

export function SignalbirdProvider() {
  useEffect(() => {
    const sb = initSignalbird({
      publicKey: process.env.NEXT_PUBLIC_SIGNALBIRD_DOMAIN_KEY!,
    })
    return sb.captureErrors()
  }, [])

  return null
}

Vue

typescript

import { initSignalbird } from 'signalbird/browser'

const sb = initSignalbird({ publicKey: import.meta.env.VITE_SIGNALBIRD_DOMAIN_KEY })
app.config.errorHandler = (err) => sb.error('browser', String(err))

Angular

typescript

import { ErrorHandler, Injectable } from '@angular/core'
import { initSignalbird } from 'signalbird/browser'

@Injectable()
export class SignalbirdErrorHandler implements ErrorHandler {
  private sb = initSignalbird({ publicKey: environment.signalbirdKey })

  handleError(error: unknown) {
    this.sb.error('browser', String(error))
  }
}

Düz JavaScript

html

<script type="module">
  import { initSignalbird } from 'https://cdn.jsdelivr.net/npm/signalbird/dist/browser.mjs'

  const sb = initSignalbird({ publicKey: 'sb_public_live_…' })
  sb.captureErrors()
</script>

Ayarlar

Alan	Varsayılan	Açıklama
`publicKey`	-	Zorunlu. `sb_public_live_` ile başlamalı
`baseUrl`	`https://signalbird.io/api`	Kendi kurulumunuz varsa
`source`	-	Her kayda eklenen köken adı
`flushIntervalMs`	`3000`	Kuyruğun boşaltılma aralığı
`maxQueue`	`50`	Bellekte tutulacak en fazla kayıt

Metotlar

Metot	Açıklama
`log(key, message, level?, context?)`	Temel çağrı
`info` · `warn` · `error`	Seviye kısayolları
`captureErrors(key?)`	`error` + `unhandledrejection` bağlar
`flush()`	Kuyruğu hemen gönderir
`destroy()`	Zamanlayıcıyı durdurur, son gönderimi yapar

Sürüm bildirimi

SDK her istekte sürümünü bildirir: X-Signalbird-Sdk: browser/<sürüm>. Yeni bir sürüm yayınlandığında API yanıtında Signalbird-Sdk-Status: outdated (ya da artık desteklenmiyorsa unsupported) döner ve SDK süreç başına bir kez uyarı yazar (console.warn). Uyarı hata değildir: isteğin sonucu değişmez.

Panelde Domainler → [domain] → Anahtarlar her anahtarın hangi SDK sürümüyle kullanıldığını gösterir; eski sürümdeki anahtarlar için panelin tepesinde bir uyarı şeridi ve bildirim çıkar. Güncellemek için:

bash

npm i signalbird@latest

Hata kodları

Kod	Anlamı
`ORIGIN_NOT_ALLOWED`	Bu alan adı anahtarın izinli kökenlerinde yok
`ORIGIN_REQUIRED`	Web anahtarı `Origin` başlığı olmadan kullanılamaz
`DOMAIN_KEY_MISSING` · `DOMAIN_KEY_INVALID`	Anahtar yok, yanlış ya da iptal edilmiş
`DOMAIN_INACTIVE` · `TEAM_INACTIVE`	Alan adı ya da takım pasif
`MODULE_DISABLED`	Telsiz paketinizde açık değil
`AUTO_CHANNEL_LIMIT`	Kendiliğinden açılabilecek kanal sayısı doldu; kanalı panelden açın
`LIMIT_REACHED`	Aylık kayıt limitiniz doldu

Sohbet ve push için ayrı yüzey

Bu sayfa tarayıcıdaki Telsiz istemcisini anlatır (log yazma). Ziyaretçiye canlı sohbet göstermek ve push cihazı kaydetmek ayrı bir yüzeydir ve ayrı anahtar kullanır (sb_public_live_…):

Ne istiyorsunuz	Nereye bakın
Kod yazmadan hazır sohbet balonu	Widget
Kendi sohbet arayüzüm (React, Vue, Angular, düz JS)	Uygulama SDK'sı
Mobil uygulamada sohbet	Uygulama SDK'sı - React Native, Swift, Kotlin

typescript

import { SignalbirdApp } from 'signalbird/app'

const chat = new SignalbirdApp({ publicKey: 'sb_public_live_…' })

await chat.startSession({ name: 'Ayşe' })
await chat.startConversation({ body: 'Kargom nerede?' })

İki istemci birbirinden bağımsızdır ve aynı sayfada birlikte çalışır.