Web SDK
Create the client
Section titled “Create the client”Create the client in browser code after your application has authenticated the user. Your backend endpoint returns a structured user-bound credential.
import { StreaklineWebClient } from "@streakline/sdk/web";
const streakline = new StreaklineWebClient({ baseUrl: "https://api.qa.streakline.dev", cacheNamespace: "my-product:qa", userId: currentUser.internalId, storage: { getItem: (key) => localStorage.getItem(key), setItem: (key, value) => localStorage.setItem(key, value), removeItem: (key) => localStorage.removeItem(key), }, getCredential: async () => { const response = await fetch("/api/streakline/credential", { method: "POST", credentials: "same-origin", }); if (!response.ok) throw new Error("Unable to obtain a Streakline credential"); return response.json(); },});await streakline.start();/api/streakline/credential is an endpoint you implement in your own backend, including your normal session and request protections. It is not a Streakline route. The /web entrypoint has no React dependency. If you omit storage, state is held in memory.
Subscribe and track
Section titled “Subscribe and track”const unsubscribe = streakline.subscribe(() => { const profile = streakline.getProfileSnapshot(); renderProgress(profile); // your UI function});
const prediction = await streakline.track("lesson.completed", { idempotencyKey: `lesson:${completionId}`,});const committedBatch = await streakline.flush();The result of track() is a local prediction and enqueue result. It is not proof that the API accepted the event. Use authoritative batch results and subsequent profile updates for reconciliation.
Clean up
Section titled “Clean up”Call unsubscribe() and streakline.stop() when the integration unmounts. stop() stops background work without erasing the persisted queue.
After logout, account erasure, or a user switch, call await streakline.clearUserData() to clear the previous user’s local state. Create a new client for the new identity. Do not reuse a previous user’s credential.
See events and retries for failure and quarantine handling.