Platforma göre kurulum

Next.js ve React

Kurulum npm install @blipit/nextjs

@blipit/nextjs, layout'unuzdaki tek bir bileşenle tarayıcı hatalarını, web vitals'ı ve session replay'i; instrumentation.ts içindeki tek bir satırla da server component, route handler ve server action hatalarını sağlar. Düz React uygulamaları @blipit/browser kullanır.

1Kurulum

npm install @blipit/nextjs

2Tarayıcı tarafı

Bileşeni kök layout'a bir kez ekleyin. Tarayıcı kodunda güvenli olan public key'i kullanır; onu NEXT_PUBLIC_BLIPIT_KEY içine koyun.

app/layout.tsx

import { Blipit } from "@blipit/nextjs";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <Blipit
          publicKey={process.env.NEXT_PUBLIC_BLIPIT_KEY!}
          environment={process.env.NEXT_PUBLIC_VERCEL_ENV ?? "development"}
          release={process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA}
          replay={{ onErrorSampleRate: 1 }}
        />
        {children}
      </body>
    </html>
  );
}

3Sunucu tarafı

Next.js 15 ve sonrası, server component, route handler ve server action hataları için onRequestError'ı çağırır. Tek satır bunu Blipit'e bağlar. BLIPIT_SECRET_KEY'i sunucu ortamında ayarlayın, asla NEXT_PUBLIC_ olarak değil.

instrumentation.ts

export { captureRequestError as onRequestError } from "@blipit/nextjs/server";

4Content Security Policy

Uygulamanız bir CSP ayarlıyorsa connect-src içine https://in.blipit.io ekleyin. SDK kodunuzla birlikte paketlendiğinden script-src için yeni host ya da nonce gerekmez.

5Source map'ler (isteğe bağlı)

Stack trace'lerin küçültülmüş bundle yerine kaynağınızı göstermesi için her release'in map'lerini build adımınızdan yükleyin.

BLIPIT_KEY=<secret key> npx @blipit/cli sourcemaps upload .next/static --release "$VERCEL_GIT_COMMIT_SHA"

6Çalıştığını kontrol edin

Hata fırlatan bir düğme ekleyin ya da bunu tarayıcı konsolunda çalıştırın. app.blipit.io içinde Sorunlar'ı açın. İlk olay birkaç saniye içinde bir sorun altında gruplanmış olarak görünür ve sorumlu kişilere e-posta gider.

import { captureMessage } from "@blipit/nextjs";
captureMessage("Hello from Next.js");

Bilmekte fayda var

Next.js olmadan düz React: npm install @blipit/browser çalıştırın ve render'dan önce Blipit.init'i çağırın; bkz. Herhangi bir web sitesi.
Boş bıraktığınızda ortam ve release, sunucuda varsayılan olarak VERCEL_ENV ve VERCEL_GIT_COMMIT_SHA değerlerini alır.
Zaten bir Sentry SDK'sında mısınız? @sentry/nextjs, https://<public key>@in.blipit.io/<project id> DSN'i ile değişiklik yapılmadan çalışır; source map'leri Sentry'ye yükleyen withSentryConfig'i atlayın.

Takıldınız mı? support@blipit.io adresine e-posta gönderin. Her projenin anahtarları ve tam DSN'i app.blipit.io içindeki API anahtarları altındadır.