React SDK

@tracio/react paketi, çekirdek @tracio/sdk paketini sarmalar ve deyimsel React ilkelerini sunar: agent'ı mount eden bir provider ve size ziyaretçi kimliğini ve tanımlama sonucunu yükleme ile hata durumuyla birlikte veren hook'lar.

Kurulum

npm install @tracio/react @tracio/sdk

react (18 veya 19) bir peer dependency'dir ve uygulamanızda halihazırda kurulu olması beklenir.

Yapılandırma

Uygulamanızı <TracioProvider> ile sarmalayın. İlk render'da TRACIO agent'ını mount eder ve provider unmount olduğunda tracio.destroy() metodunu otomatik olarak çağırır.

import { TracioProvider } from "@tracio/react"

function Root() {
  return (
    <TracioProvider publicKey={process.env.NEXT_PUBLIC_TRACIO_KEY!}>
      <App />
    </TracioProvider>
  )
}

Provider prop'ları

Ya publicKey ile birlikte düz skalerleri ya da tam bir config nesnesi geçirin. İkisi birden verildiğinde config kazanır.

Hook'lar

useVisitorId()

Kararlı ziyaretçi tanımlayıcısını yükleme ve hata durumuyla birlikte döndürür.

const { data, isLoading, error, isFetched, getId } = useVisitorId()
// data: string | undefined — the visitorId

getId(), ziyaretçi kimliğini imperatif olarak yeniden getirir.

useTracioResult(opts?)

Tam TracioResult değerini döndürür (ziyaretçi kimliği artı bot tespiti).

const { data, isLoading, error, isFetched, getData } = useTracioResult()
// data: TracioResult | undefined

opts.immediate varsayılan olarak true'dur. Getirme işlemini getData() metodunu kendiniz çağırana kadar ertelemek için { immediate: false } geçirin — bir onay geçidinin (consent gate) arkasında kullanışlıdır:

const { data, getData } = useTracioResult({ immediate: false })

function onConsent() {
  getData() // identify only after the user opts in
}

useTracio()

Gelişmiş kullanım için altta yatan örneği döndüren kaçış kapağı (escape hatch).

const { tracio } = useTracio()

Tam örnek

import { TracioProvider, useVisitorId } from "@tracio/react"
function App() {
  return (
    <TracioProvider publicKey={process.env.NEXT_PUBLIC_TRACIO_KEY!}>
      <Page />
    </TracioProvider>
  )
}
function Page() {
  const { data: visitorId, isLoading, error } = useVisitorId()
  if (isLoading) return <span>Loading…</span>
  if (error) return <span>Error: {error.message}</span>
  return <span>Visitor: {visitorId}</span>
}

Sonraki adımlar

• JavaScript SDK Referansı — hook'ların üzerine inşa edildiği çekirdek @tracio/sdk API'si
• Hata Yönetimi — hata kodları ve yeniden deneme stratejileri
• SDK'lara genel bakış — her framework paketi bir bakışta