Blipit'i kurun

1Anahtarlarınızı alın

app.blipit.io'da oturum açın ve kenar çubuğunda API anahtarları'nı, ardından projenizi açın. Her projenin iki anahtarı vardır. Public key blipit_pk_ ile başlar: tarayıcı ve uygulama koduna gider, yalnızca olay gönderebilir ve herkesin görmesi güvenlidir. Secret key blipit_sk_ ile başlar: sunucunuzda ya da Odoo'da kalır, asla tarayıcıda olmaz, çünkü sorunları okuyup değiştirebilir de. Secret key yalnızca bir kez, oluşturulduktan hemen sonra gösterilir, bu yüzden o anda kopyalayın; kaybederseniz Yeni bir secret key oluştur'a basın, eskisi hemen çalışmayı durdurur. Bazı SDK'lar ayrıca aynı sayfada gösterilen proje id'sine ihtiyaç duyar.

2npm ile

Giriş dosyanızda, uygulama render edilmeden önce init'i public key ile bir kez çağırın. Vite ile (React, Vue, Svelte) anahtarı .env içinde VITE_BLIPIT_KEY olarak tutun; tarayıcıya yalnızca VITE_ değişkenleri ulaşır ve dev sunucusu .env'i yalnızca başlarken okur.

npm install @blipit/browser

VITE_BLIPIT_KEY=blipit_pk_your_public_key

import * as Blipit from "@blipit/browser";

Blipit.init({
  key: import.meta.env.VITE_BLIPIT_KEY,
  environment: import.meta.env.MODE,
  release: "2026.09.28",
  replay: { onErrorSampleRate: 1 },
});

3Bundler olmadan: tek script etiketi

Bunu, public key'iniz yazılı olarak her sayfanın <head> bölümüne ya da platformunuzun özel kod alanına yapıştırın. Bu sorun değildir: public key yalnızca olay gönderebilir.

<script src="https://blipit.io/sdk/blipit.js"></script>
<script>
  Blipit.init({ key: "blipit_pk_your_public_key", environment: "production", release: "2026.09.28", replay: { onErrorSampleRate: 1 } });
</script>

4Anahtarları git'ten uzak tutun

Anahtarları ortam değişkenlerinde ya da barındırma ortamınızın gizli ayarlarında tutun, asla commit ettiğiniz kodda tutmayın ve .env dosyalarınızı .gitignore'a ekleyin. Bir web sayfasında public key bulunması normaldir. Bir secret key git'e, herkese açık bir sayfaya, bir ekran görüntüsüne ya da bir sohbete düşerse API anahtarları'nı açın, Yeni bir secret key oluştur'a basın ve yeni anahtarı eskisinin kullanıldığı her yere yapıştırın: eski anahtar hemen çalışmayı durdurur.

.env
.env.local
.env.*.local

5Blipit'e kullanıcının kim olduğunu söyleyin (isteğe bağlı)

Girişten sonra kullanıcıyı ekleyin; böylece sorunlar kimin etkilendiğini gösterir ve kayıtlar kullanıcıya göre bulunabilir.

Blipit.setUser({ id: "42", email: "ana@example.com" });

6React, Vue, Angular ve Svelte: yakalanan hataları raporlayın

Framework'ler bileşenlerin içindeki hataları tarayıcı görmeden yakalar, bu yüzden onları da Blipit'e iletin. Başka her yerdeki yakalanmamış hatalar kendiliğinden raporlanır.

createRoot(document.getElementById("root")!, {
  onCaughtError: (error) => Blipit.captureException(error),
  onUncaughtError: (error) => Blipit.captureException(error),
}).render(<App />);

class ErrorBoundary extends React.Component<{ children: React.ReactNode }, { failed: boolean }> {
  state = { failed: false };
  static getDerivedStateFromError() {
    return { failed: true };
  }
  componentDidCatch(error: Error) {
    Blipit.captureException(error);
  }
  render() {
    return this.state.failed ? <p>Something went wrong.</p> : this.props.children;
  }
}

const app = createApp(App);
app.config.errorHandler = (err) => Blipit.captureException(err);
app.mount("#app");

import { ErrorHandler } from "@angular/core";
import * as Blipit from "@blipit/browser";

class BlipitErrorHandler implements ErrorHandler {
  handleError(error: unknown) {
    Blipit.captureException(error);
    console.error(error);
  }
}

export const appConfig = { providers: [{ provide: ErrorHandler, useClass: BlipitErrorHandler }] };

import * as Blipit from "@blipit/browser";
import type { HandleClientError } from "@sveltejs/kit";

export const handleError: HandleClientError = ({ error }) => {
  Blipit.captureException(error);
};

7Hata raporları: Hata bildir düğmesi

SDK public key'inizle başlar başlamaz, her sayfanın sağ alt köşesinde ziyaretçinin dilinde bir Hata bildir düğmesi görünür. Bir tıklama bildirim formunu açar: işaretlenecek bir sayfa ekran görüntüsü, bir öğe seçici, isteğe bağlı bir ekran kaydı, bir başlık ve açıklama. Konumu, stili, metni, rengi ve klavye kısayolunu aşağıdaki gibi kodda ya da tüm siteler için tek seferde app.blipit.io'da Proje ayarları, Hata raporu widget'ı altında değiştirin; koddaki seçenekler önceliklidir. Hata bildir düğmesi kılavuzu her seçeneği ekran görüntüleri ve canlı bir demoyla gösterir.

Blipit.init({
  key: import.meta.env.VITE_BLIPIT_KEY,
  feedbackWidget: {
    position: "bottom-left",
    style: "icon",
    text: "Report Issue",
    color: "#E11D48",
    shortcut: "ctrl+shift+b",
  },
});

8Bildirim formunu kendi düğmenizden açın

Kendi başlığınıza veya menünüze bir Hata bildir düğmesi koymak için resmi düğmeyi kullanın: Blipit.reportButton(), Blipit simgesi ve ziyaretçinin dilinde Hata bildir yazısıyla hazır bir düğme döndürür; React uygulamaları da @blipit/nextjs/react içinden <BlipitReportButton /> gösterebilir (npm install @blipit/nextjs). Kendi tasarımınızı mı tercih edersiniz? Herhangi bir tıklama işleyicisinden openReport() çağırın ya da var olan bir öğeyi bağlamak için attachReport(element) kullanın. Her iki durumda da bildirim penceresi, yüzen düğmeden açıldığı gibi açılır. Blipit simgesi yalnızca Hata bildir yazısının yanında kullanılabilir; resmi düğme bunu gösterir.

<nav id="help-menu"></nav>
<script>
  document.getElementById("help-menu").append(Blipit.reportButton());
</script>

import { BlipitReportButton } from "@blipit/nextjs/react";

export function Header() {
  return (
    <header>
      <a href="/">Acme</a>
      <BlipitReportButton variant="outline" size="sm" />
    </header>
  );
}

<script setup>
import { onMounted, ref } from "vue";
import { reportButton } from "@blipit/browser";

const slot = ref();
onMounted(() => slot.value.append(reportButton({ variant: "outline", size: "sm" })));
</script>

<template>
  <span ref="slot"></span>
</template>

<button id="report-issue">Report Issue</button>
<script>
  Blipit.attachReport(document.getElementById("report-issue"));
</script>

<button onclick="Blipit.openReport()">Report Issue</button>

import { openReport } from "@blipit/browser";

export function ReportIssue() {
  return <button onClick={() => openReport()}>Report Issue</button>;
}

<script setup>
import { openReport } from "@blipit/browser";
</script>

<template>
  <button @click="openReport()">Report Issue</button>
</template>

9Varsayılan düğmeyi gizleyin

Yalnızca kendi düğmenizi bırakmak için yüzen düğmeyi kodda feedbackWidget: false ile (<Blipit /> üzerinde feedbackWidget={false}) kapatın ya da anahtarı kullanan her sitede gizlemek için projenin Hata raporu widget'ı ayarlarında Hata raporu düğmesini göster'i kapatın. openReport() ve attachReport() her iki durumda da çalışmaya devam eder.

Blipit.init({ key: import.meta.env.VITE_BLIPIT_KEY, feedbackWidget: false });

10Bildirim formunu önceden doldurun ve bağlam ekleyin

Girişten sonra setUser'ı çağırın: bildiren kişinin adı ve e-postası doldurulur ve yanıt verdiğinizde ya da durumu değiştirdiğinizde e-posta alır. setReportMetadata, plan ya da sepet büyüklüğü gibi kendi alanlarınızı her bildirime ekler; bildirim gönderildiğinde çalıştığı için değerler günceldir.

Blipit.setUser({ id: "42", username: "Ana Lima", email: "ana@example.com" });

Blipit.setReportMetadata(() => ({ plan: "pro", cartItems: cart.length }));

11Tüm seçenekler ve fonksiyonlar

• key: public key (blipit_pk_). Zorunlu.
• environment ve release: her olayda gösterilir; release regresyonları ve source map'leri besler. environment varsayılan olarak production'dır.
• debug: true, SDK'nın yaptıklarını [blipit] ile başlayan satırlarla konsola yazar.
• sampleRate (0 ile 1 arası), ignoreErrors (metinler ya da desenler) ve beforeSend (bir olayı düzenleyin ya da düşürmek için null döndürün) neyin gönderileceğini kontrol eder. autoMuteExtensions (varsayılan olarak açık) yalnızca tarayıcı eklentilerinden gelen hataları düşürür.
• webVitals (varsayılan olarak açık), replay ({ sessionSampleRate, onErrorSampleRate }) ve autoSessionTracking (çökmesiz oranlar, release gerektirir).
• feedbackWidget: false Hata bildir düğmesini gizler; position, style, text, color ve shortcut içeren bir nesne ise onu değiştirir. theme: "light", "dark" ya da "auto" bildirim formunun temasını ayarlar.
• user ({ id, name, email }) ve company (bir ad ya da { id, name }) bildirim formunu doldurur ve bildirimlere eklenir.
• endpoint: yalnızca kendi barındırdığınız bir ingest için; varsayılan https://in.blipit.io/api/v1/events'tir.
• Fonksiyonlar: captureException(error), captureMessage(text, level), setUser, setTag(key, value), addBreadcrumb({ category, message }), openReport(), attachReport(element), reportButton(options), updateWidget(options), setReportMetadata(fn), showFeedback() ve kuyruktaki olaylar gönderildiğinde çözülen bir promise döndüren flush().
• Panelde değiştirilen widget ayarları tarayıcılara bir saat içinde ulaşır, çünkü SDK onları o kadar süre saklar; gizli bir pencere değişikliği hemen gösterir.

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

Sitenizi yeniden yükleyin. Hata bildir düğmesi sağ alt köşede görünür ve bir dakika içinde sayfa görüntülemesi app.blipit.io'da Web vitals altında görünür. Ardından bir test olayı gönderin: kodunuzdan captureMessage'ı bir kez çağırın ya da script etiketiyle aşağıdaki satırı tarayıcı konsolunda çalıştırın. Olay birkaç saniye içinde Sorunlar altında görünür.

Blipit.captureMessage("Hello from " + location.host, "info");

13Düğme ya da olaylar görünmüyorsa

• Tarayıcı konsolunu açın ve [blipit] ile başlayan satırlara bakın. Düğmenin gösterilip gösterilmediğini, kodda kapatılıp kapatılmadığını ya da proje ayarıyla gizlenip gizlenmediğini görmek için debug'ı açın (init içinde debug: true ya da <Blipit /> üzerinde debug).
• Next.js tarayıcıya yalnızca adı NEXT_PUBLIC_ ile başlayan değişkenleri gönderir, bu yüzden NEXT_PUBLIC_BLIPIT_KEY kullanın. Vite yalnızca VITE_ değişkenlerini gönderir, bu yüzden VITE_BLIPIT_KEY kullanın. Başka bir adla anahtar tarayıcıda boş olur ve Blipit başlamaz.
• .env ya da .env.local dosyasını ekledikten veya değiştirdikten sonra dev sunucusunu yeniden başlatın. Sunucu bunları yalnızca başlarken okur.
• Vercel'de ya da başka bir barındırma ortamında aynı değişkeni projenin ortam değişkenlerine ekleyin ve yeniden deploy edin. NEXT_PUBLIC_ ve VITE_ değerleri build'e yazılır, bu yüzden çalışan bir deployment sonradan eklenen bir değeri asla görmez.
• Public key'i (blipit_pk_) kullanın. Secret key (blipit_sk_) tarayıcıda bir konsol hatasıyla reddedilir; bir secret key bir sayfada bulunduysa yeni bir secret key oluşturun.
• Next.js'te <Blipit />, her sayfada çalışması için kök app/layout.tsx (ya da pages/_app.tsx) dosyasına konur. Diğer uygulamalarda init'i giriş dosyasında, uygulama render edilmeden önce bir kez çağırın.
• app.blipit.io'da Proje ayarları, Hata raporu widget'ı altında Hata raporu düğmesini göster açık olmalı ve kodunuz feedbackWidget: false geçirmemelidir. SDK proje ayarlarını en fazla bir saat saklar, bu yüzden bir değişikliği gizli bir pencerede test edin.
• Reklam engelleyiciler ve gizlilik eklentileri in.blipit.io'yu engelleyebilir. Eklentiler kapalıyken gizli bir pencerede deneyin.
• Siteniz bir Content Security Policy gönderiyorsa script-src https://blipit.io, connect-src https://in.blipit.io, img-src data: ve media-src blob: izinlerini verin. Bildirim düzenleyicisi ilk tıklamada blipit.io/sdk adresinden yüklenir, ekran görüntüsü bir data: görüntüsünden çizilir ve ekran kayıtları da in.blipit.io adresine yüklenir. debug açıkken konsol, politikanın ekran görüntüsünü ne zaman engellediğini söyler. Ekran kayıtlarında ses olması için sitenizin Permissions-Policy başlığı microphone=(self) değerine, ekran kaydı için de display-capture=(self) değerine izin vermelidir; microphone=() ile kayıtlar sessiz çalışır.
• Kurulu sürümü npm ls @blipit/browser @blipit/nextjs (veya pnpm list @blipit/browser @blipit/nextjs) ile kontrol edin ve değişiklik günlüğüyle karşılaştırın. pnpm 11 yeni bir sürümü kurmadan önce bir gün bekler (minimum-release-age), bu yüzden yayın günü pnpm add hiçbir uyarı vermeden önceki sürümü kurar. Yenisini hemen almak için: pnpm add @blipit/browser@<version> @blipit/nextjs@<version> --config.minimum-release-age=0.
• Hâlâ takıldınız mı? Konsoldaki [blipit] satırlarıyla birlikte support@blipit.io adresine e-posta gönderin.

1Kurulum

npm install @blipit/nextjs

2Anahtarlarınızı alın

app.blipit.io'da oturum açın ve kenar çubuğunda API anahtarları'nı, ardından projenizi açın. Her projenin iki anahtarı vardır. Public key blipit_pk_ ile başlar: tarayıcı ve uygulama koduna gider, yalnızca olay gönderebilir ve herkesin görmesi güvenlidir. Secret key blipit_sk_ ile başlar: sunucunuzda ya da Odoo'da kalır, asla tarayıcıda olmaz, çünkü sorunları okuyup değiştirebilir de. Secret key yalnızca bir kez, oluşturulduktan hemen sonra gösterilir, bu yüzden o anda kopyalayın; kaybederseniz Yeni bir secret key oluştur'a basın, eskisi hemen çalışmayı durdurur. Bazı SDK'lar ayrıca aynı sayfada gösterilen proje id'sine ihtiyaç duyar.

3Anahtarları .env.local içine koyun

Proje kök dizininde, tarayıcı için public key'i ve aşağıdaki sunucu tarafını kullanıyorsanız sunucu için secret key'i içeren .env.local dosyasını oluşturun. Tarayıcıya yalnızca NEXT_PUBLIC_ ile başlayan adlar ulaşır; bu yüzden secret key'e asla bu öneki vermeyin. Dosyayı kaydettikten sonra npm run dev'i yeniden başlatın. Production için aynı değişkenleri barındırma ortamınıza ekleyin (Vercel'de: Project, Settings, Environment Variables, Production ve Preview için) ve yeniden deploy edin: NEXT_PUBLIC_ değerleri build'e yazılır, bu yüzden onları eklemeden önce yapılmış bir deployment'ın anahtarı boştur.

NEXT_PUBLIC_BLIPIT_KEY=blipit_pk_your_public_key
BLIPIT_SECRET_KEY=blipit_sk_your_secret_key

4Tarayıcı tarafı

Bileşeni kök layout'a bir kez ekleyin. Public key'i NEXT_PUBLIC_BLIPIT_KEY'den okur. Değişken boşsa hiçbir şey başlatmaz ve bunu tarayıcı konsolunda belirtir.

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>
  );
}

5Sunucu tarafı

Next.js 15 ve sonrası, server component, route handler ve server action hataları için onRequestError'ı çağırır. instrumentation.ts içindeki tek satır bunu Blipit'e bağlar. @blipit/nextjs 0.2.1 sürümünden itibaren aynı satır middleware.ts bulunan uygulamalarda ve Edge rotalarında (runtime = "edge") da çalışır: uygulama derlenir, middleware ve Edge hataları da bildirilir. Next.js 14'te onRequestError yoktur; bu yüzden ikinci örnekteki gibi her route handler ve server action'ı withBlipit ile sarın: hatayı bildirir, yeniden fırlatır ve yönlendirmeleri ile notFound()'u atlar. BLIPIT_SECRET_KEY'i sunucu ortamında ayarlayın, asla NEXT_PUBLIC_ olarak değil.

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

import { withBlipit } from "@blipit/nextjs/server";

export const GET = withBlipit(async (request: Request) => {
  return Response.json(await loadOrders());
});

6Bağımlılıklar ve sunucu sağlığı

@blipit/nextjs 0.3'ten itibaren register'ı da dışa aktarın; böylece Blipit sunucu açılırken başlar. Ardından veritabanı ve dış hizmet çağrıları Bağımlılıklar sayfasında, sunucunun CPU, bellek ve olay döngüsü Sunucu sağlığı sayfasında görünür. Edge çalışma zamanında hiçbir şey yapmaz. Vercel'de register gelen isteği göremeyebilir: @blipit/nextjs 0.4'ten itibaren route handler ve server action'ları withBlipit ile sarmalayın; her biri veritabanı ve dış hizmet çağrılarıyla birlikte Pulse sayfasında bir istek olur ve yanıttan sonra, onu geciktirmeden gönderilir.

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

import { withBlipit } from "@blipit/nextjs/server";

export const GET = withBlipit(async (request: Request) => Response.json(await loadOrders()));

7error.tsx tarafından yakalanan hatalar

Bir error.tsx ya da global-error.tsx sınırının yakaladığı hatalar tarayıcının hata handler'ına hiç ulaşmaz, bu yüzden onları sınırın içinden raporlayın. Her iki dosya da client component'tir.

"use client";

import { useEffect } from "react";
import { captureException } from "@blipit/nextjs";

export default function Error({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
  useEffect(() => {
    captureException(error);
  }, [error]);
  return (
    <div>
      <p>Something went wrong.</p>
      <button onClick={() => reset()}>Try again</button>
    </div>
  );
}

"use client";

import { useEffect } from "react";
import { captureException } from "@blipit/nextjs";

export default function GlobalError({ error }: { error: Error & { digest?: string } }) {
  useEffect(() => {
    captureException(error);
  }, [error]);
  return (
    <html>
      <body>
        <p>Something went wrong.</p>
      </body>
    </html>
  );
}

8Anahtarları git'ten uzak tutun

Anahtarları ortam değişkenlerinde ya da barındırma ortamınızın gizli ayarlarında tutun, asla commit ettiğiniz kodda tutmayın ve .env dosyalarınızı .gitignore'a ekleyin. Bir web sayfasında public key bulunması normaldir. Bir secret key git'e, herkese açık bir sayfaya, bir ekran görüntüsüne ya da bir sohbete düşerse API anahtarları'nı açın, Yeni bir secret key oluştur'a basın ve yeni anahtarı eskisinin kullanıldığı her yere yapıştırın: eski anahtar hemen çalışmayı durdurur.

.env
.env.local
.env.*.local

9Content Security Policy

Siteniz bir Content Security Policy gönderiyorsa script-src https://blipit.io (script etiketi ile ilk kullanımda blipit.io/sdk/<version>/ adresinden yüklenen bildirim düzenleyicisi ve replay eklentisi), connect-src https://in.blipit.io (olaylar, ekran görüntüleri ve ekran kayıtlarının hepsi in.blipit.io adresine gider), img-src data: (ekran görüntüsü sayfanın bir görüntüsünden çizilir) ve media-src blob: (kayıtlar bildirim penceresinde oynatılır) izinlerini verin. Ekran görüntüsü sayfanın görsellerini ve yazı tiplerini yeniden yükler; bu yüzden onların sunucuları da connect-src içinde olmalıdır, yoksa boş kalırlar. style-src'de değişiklik gerekmez. Script etiketiyle Blipit.init'i kendi .js dosyanızdan çağırın ya da satır içi scripte bir nonce verin, çünkü katı bir politika satır içi scriptleri engeller. Ekran kayıtlarında ses olması için sitenizin Permissions-Policy başlığı microphone=(self) değerine, ekran kaydı için de display-capture=(self) değerine izin vermelidir; microphone=() ile kayıtlar sessiz çalışır.

10Source 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"

11Hata raporları: Hata bildir düğmesi

SDK public key'inizle başlar başlamaz, her sayfanın sağ alt köşesinde ziyaretçinin dilinde bir Hata bildir düğmesi görünür. Bir tıklama bildirim formunu açar: işaretlenecek bir sayfa ekran görüntüsü, bir öğe seçici, isteğe bağlı bir ekran kaydı, bir başlık ve açıklama. Konumu, stili, metni, rengi ve klavye kısayolunu aşağıdaki gibi kodda ya da tüm siteler için tek seferde app.blipit.io'da Proje ayarları, Hata raporu widget'ı altında değiştirin; koddaki seçenekler önceliklidir. Hata bildir düğmesi kılavuzu her seçeneği ekran görüntüleri ve canlı bir demoyla gösterir.

<Blipit
  publicKey={process.env.NEXT_PUBLIC_BLIPIT_KEY!}
  feedbackWidget={{
    position: "bottom-left",
    style: "icon",
    text: "Report Issue",
    color: "#E11D48",
    shortcut: "ctrl+shift+b",
  }}
/>

12Bildirim formunu kendi düğmenizden açın

Resmi düğmeyi <BlipitReportButton /> ile her yere koyun, server component'lerde de: Blipit simgesini ve ziyaretçinin dilinde Hata bildir yazısını gösterir ve bildirim penceresini açar. Kendi tasarımınızı mı tercih edersiniz? openReport çağıran bileşen bir client component olmalıdır, bu yüzden dosyasının en üstüne "use client" yazın. <Blipit /> zaten app/layout.tsx içinde olmalıdır. Next.js kullanmayan React uygulamaları düğmeyi @blipit/nextjs/react, openReport'u ise @blipit/browser içinden içe aktarır.

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

export function Header() {
  return (
    <header>
      <a href="/">Acme</a>
      <BlipitReportButton />
    </header>
  );
}

import { BlipitReportButton } from "@blipit/nextjs/react";

<BlipitReportButton variant="outline" size="sm" />

"use client";

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

export function ReportIssue() {
  return <button onClick={() => openReport()}>Report Issue</button>;
}

import { openReport } from "@blipit/browser";

export function ReportIssue() {
  return <button onClick={() => openReport()}>Report Issue</button>;
}

13Varsayılan düğmeyi gizleyin

Yalnızca kendi düğmenizi bırakmak için yüzen düğmeyi kodda feedbackWidget: false ile (<Blipit /> üzerinde feedbackWidget={false}) kapatın ya da anahtarı kullanan her sitede gizlemek için projenin Hata raporu widget'ı ayarlarında Hata raporu düğmesini göster'i kapatın. openReport() ve attachReport() her iki durumda da çalışmaya devam eder.

<Blipit publicKey={process.env.NEXT_PUBLIC_BLIPIT_KEY!} feedbackWidget={false} />

14Bildirim formunu önceden doldurun ve bağlam ekleyin

Girişten sonra setUser'ı çağırın: bildiren kişinin adı ve e-postası doldurulur ve yanıt verdiğinizde ya da durumu değiştirdiğinizde e-posta alır. setReportMetadata, plan ya da sepet büyüklüğü gibi kendi alanlarınızı her bildirime ekler; bildirim gönderildiğinde çalıştığı için değerler günceldir.

"use client";

import { useEffect } from "react";
import { setReportMetadata, setUser } from "@blipit/nextjs";

export function BlipitUser({ user }: { user: { id: string; name: string; email: string; plan: string } }) {
  useEffect(() => {
    setUser({ id: user.id, username: user.name, email: user.email });
    setReportMetadata(() => ({ plan: user.plan }));
  }, [user]);
  return null;
}

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

Uygulamayı yeniden yükleyin. Hata bildir düğmesi sağ alt köşede görünür ve bir dakika içinde sayfa görüntülemesi app.blipit.io'da Web vitals altında görünür. Ardından captureMessage çağıran ya da hata fırlatan bir düğme ekleyip tıklayın: olay birkaç saniye içinde Sorunlar altında görünür.

"use client";
import { captureMessage } from "@blipit/nextjs";

export function TestBlipit() {
  return <button onClick={() => captureMessage("Hello from Next.js")}>Send a test event</button>;
}

16Düğme ya da olaylar görünmüyorsa

• Tarayıcı konsolunu açın ve [blipit] ile başlayan satırlara bakın. Düğmenin gösterilip gösterilmediğini, kodda kapatılıp kapatılmadığını ya da proje ayarıyla gizlenip gizlenmediğini görmek için debug'ı açın (init içinde debug: true ya da <Blipit /> üzerinde debug).
• Next.js tarayıcıya yalnızca adı NEXT_PUBLIC_ ile başlayan değişkenleri gönderir, bu yüzden NEXT_PUBLIC_BLIPIT_KEY kullanın. Vite yalnızca VITE_ değişkenlerini gönderir, bu yüzden VITE_BLIPIT_KEY kullanın. Başka bir adla anahtar tarayıcıda boş olur ve Blipit başlamaz.
• .env ya da .env.local dosyasını ekledikten veya değiştirdikten sonra dev sunucusunu yeniden başlatın. Sunucu bunları yalnızca başlarken okur.
• Vercel'de ya da başka bir barındırma ortamında aynı değişkeni projenin ortam değişkenlerine ekleyin ve yeniden deploy edin. NEXT_PUBLIC_ ve VITE_ değerleri build'e yazılır, bu yüzden çalışan bir deployment sonradan eklenen bir değeri asla görmez.
• Public key'i (blipit_pk_) kullanın. Secret key (blipit_sk_) tarayıcıda bir konsol hatasıyla reddedilir; bir secret key bir sayfada bulunduysa yeni bir secret key oluşturun.
• Next.js'te <Blipit />, her sayfada çalışması için kök app/layout.tsx (ya da pages/_app.tsx) dosyasına konur. Diğer uygulamalarda init'i giriş dosyasında, uygulama render edilmeden önce bir kez çağırın.
• app.blipit.io'da Proje ayarları, Hata raporu widget'ı altında Hata raporu düğmesini göster açık olmalı ve kodunuz feedbackWidget: false geçirmemelidir. SDK proje ayarlarını en fazla bir saat saklar, bu yüzden bir değişikliği gizli bir pencerede test edin.
• Reklam engelleyiciler ve gizlilik eklentileri in.blipit.io'yu engelleyebilir. Eklentiler kapalıyken gizli bir pencerede deneyin.
• Siteniz bir Content Security Policy gönderiyorsa script-src https://blipit.io, connect-src https://in.blipit.io, img-src data: ve media-src blob: izinlerini verin. Bildirim düzenleyicisi ilk tıklamada blipit.io/sdk adresinden yüklenir, ekran görüntüsü bir data: görüntüsünden çizilir ve ekran kayıtları da in.blipit.io adresine yüklenir. debug açıkken konsol, politikanın ekran görüntüsünü ne zaman engellediğini söyler. Ekran kayıtlarında ses olması için sitenizin Permissions-Policy başlığı microphone=(self) değerine, ekran kaydı için de display-capture=(self) değerine izin vermelidir; microphone=() ile kayıtlar sessiz çalışır.
• Kurulu sürümü npm ls @blipit/browser @blipit/nextjs (veya pnpm list @blipit/browser @blipit/nextjs) ile kontrol edin ve değişiklik günlüğüyle karşılaştırın. pnpm 11 yeni bir sürümü kurmadan önce bir gün bekler (minimum-release-age), bu yüzden yayın günü pnpm add hiçbir uyarı vermeden önceki sürümü kurar. Yenisini hemen almak için: pnpm add @blipit/browser@<version> @blipit/nextjs@<version> --config.minimum-release-age=0.
• Hâlâ takıldınız mı? Konsoldaki [blipit] satırlarıyla birlikte support@blipit.io adresine e-posta gönderin.

1Kurulum

npm install @blipit/node

2Anahtarlarınızı alın

app.blipit.io'da oturum açın ve kenar çubuğunda API anahtarları'nı, ardından projenizi açın. Her projenin iki anahtarı vardır. Public key blipit_pk_ ile başlar: tarayıcı ve uygulama koduna gider, yalnızca olay gönderebilir ve herkesin görmesi güvenlidir. Secret key blipit_sk_ ile başlar: sunucunuzda ya da Odoo'da kalır, asla tarayıcıda olmaz, çünkü sorunları okuyup değiştirebilir de. Secret key yalnızca bir kez, oluşturulduktan hemen sonra gösterilir, bu yüzden o anda kopyalayın; kaybederseniz Yeni bir secret key oluştur'a basın, eskisi hemen çalışmayı durdurur. Bazı SDK'lar ayrıca aynı sayfada gösterilen proje id'sine ihtiyaç duyar.

3Anahtarı ortam değişkenlerinde tutun

Node secret key'i kullanır. Onu kodda değil, bir ortam değişkeninde tutun: yerelde Node 20.6 ve sonrasının --env-file ile yüklediği bir .env dosyasında, production'da barındırma ortamınızın ortam değişkenlerinde ya da gizli ayarlarında (Fly secrets, Docker, systemd, Render, Vercel). Değiştirdikten sonra süreci yeniden başlatın.

BLIPIT_SECRET_KEY=blipit_sk_your_secret_key

node --env-file=.env --import ./instrument.mjs server.mjs

4Anahtarları git'ten uzak tutun

Anahtarları ortam değişkenlerinde ya da barındırma ortamınızın gizli ayarlarında tutun, asla commit ettiğiniz kodda tutmayın ve .env dosyalarınızı .gitignore'a ekleyin. Bir web sayfasında public key bulunması normaldir. Bir secret key git'e, herkese açık bir sayfaya, bir ekran görüntüsüne ya da bir sohbete düşerse API anahtarları'nı açın, Yeni bir secret key oluştur'a basın ve yeni anahtarı eskisinin kullanıldığı her yere yapıştırın: eski anahtar hemen çalışmayı durdurur.

.env
.env.local
.env.*.local

5Önce başlatın

Bunu uygulamanızdan önce çalışan bir dosyaya koyun ve ilk olarak import edin.

import * as Blipit from "@blipit/node";

Blipit.init({
  key: process.env.BLIPIT_SECRET_KEY,
  environment: process.env.NODE_ENV,
  release: process.env.RELEASE,
  serverName: "api",
});

6Express, Fastify, Koa, Hono veya NestJS

Handler'ı route'larınızdan sonra ekleyin; böylece işlenmiş ve işlenmemiş hatalar isteğin metodu, URL'si ve user agent'ı ile Blipit'e ulaşır. Koa, Hono ve NestJS birer satır ister: Koa'nın middleware'i en başa, Hono'nunki rotalardan önce gelir. Durumu 500 ve üzeri olan hataları bildirirler. İstekler bundan sonra Pulse sayfasında her URL için ayrı satır yerine GET /users/:id gibi rotaya göre görünür.

import "./instrument.mjs";
import * as Blipit from "@blipit/node";
import express from "express";

const app = express();
app.get("/", (req, res) => res.send("ok"));
app.use(Blipit.expressErrorHandler());
app.listen(3000);

await app.register(Blipit.fastifyPlugin());

app.use(Blipit.koaMiddleware());

app.use(Blipit.honoMiddleware());

app.useGlobalInterceptors(Blipit.nestInterceptor());

7Sunucusuz: AWS Lambda ve Vercel

Sunucusuz ortamlar fonksiyonu yanıt verir vermez duraklatır ve Lambda, Node'un HTTP sunucusunu çalıştırmaz; bu yüzden handler'ı sarmalayın. wrapHandler isteği kaydeder (API Gateway, fonksiyon URL'si ve yük dengeleyici olaylarını yöntem ve rotaya göre, diğer olayları fonksiyon adına göre), hataları bildirir ve handler dönmeden önce her şeyi gönderir; yalnızca gönderilecek bir şey olduğunda, en fazla 2 saniye bekler. traceRequest, Request alan her handler için aynısını yapar. Vercel'de veriler yanıttan sonra waitUntil ile gider, böylece hiçbir şey gecikmez. Next.js'te withBlipit kullanın (Next.js rehberine bakın).

import * as Blipit from "@blipit/node";

export const handler = Blipit.wrapHandler(async (event, context) => {
  return { statusCode: 200, body: "ok" };
});

export default { fetch: (request) => Blipit.traceRequest(request, () => app.fetch(request)) };

8Manuel yakalama, loglar ve giriş denemeleri

Blipit.captureException(err);
Blipit.captureMessage("cache miss rate above 50%", "warning");
Blipit.setUser({ id: "user-42" });
Blipit.log.info("order placed", { order_id: 42 });
Blipit.captureSecurity({ kind: "login_failed", actor: email, ip, userAgent, outcome: "bad_password" });
await Blipit.flush();

9Bağımlılıklar ve sunucu sağlığı

0.2'den itibaren SDK veritabanı ve dış hizmet çağrılarınızı, ayrıca sunucunuzun CPU, bellek ve olay döngüsünü de kaydeder. Bağımlılıklar ve Sunucu sağlığı rehberlerine bakın; tracesSampleRate, tracing: false ve metrics: false ile kontrol edilir.

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

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.

Blipit.captureMessage("Hello from Node");

1Kurulum

pip install blipit

2Başlangıçta başlatın

Django için settings.py dosyasının en üstüne koyun. Flask ya da FastAPI için uygulama oluşturulmadan önce. Anahtar, projenin Anahtarlar sayfasındadır. Anahtar boşsa init hata fırlatmak yerine bir uyarı loglar ve False döndürür; böylece eksik bir anahtar uygulamanın başlamasını asla engellemez.

import blipit

blipit.init(
    key="<public key>",
    environment="production",
    release="myapp@1.4.2",
)

3Anahtarlarınızı alın

app.blipit.io'da oturum açın ve kenar çubuğunda API anahtarları'nı, ardından projenizi açın. Her projenin iki anahtarı vardır. Public key blipit_pk_ ile başlar: tarayıcı ve uygulama koduna gider, yalnızca olay gönderebilir ve herkesin görmesi güvenlidir. Secret key blipit_sk_ ile başlar: sunucunuzda ya da Odoo'da kalır, asla tarayıcıda olmaz, çünkü sorunları okuyup değiştirebilir de. Secret key yalnızca bir kez, oluşturulduktan hemen sonra gösterilir, bu yüzden o anda kopyalayın; kaybederseniz Yeni bir secret key oluştur'a basın, eskisi hemen çalışmayı durdurur. Bazı SDK'lar ayrıca aynı sayfada gösterilen proje id'sine ihtiyaç duyar.

4Anahtarı ortam değişkenlerinde tutun

Bu SDK, projenin API anahtarları sayfasındaki public key ile gönderir. Onu bir ortam değişkeninde tutun: yerelde framework'ünüzün ya da python-dotenv'in yüklediği bir .env dosyasında, production'da barındırma ortamınızın ayarlarında. Secret key'i yalnızca giriş denemeleri gönderiyorsanız kullanın.

BLIPIT_KEY=blipit_pk_your_public_key

import os
import blipit

blipit.init(key=os.environ.get("BLIPIT_KEY"))

5Anahtarları git'ten uzak tutun

Anahtarları ortam değişkenlerinde ya da barındırma ortamınızın gizli ayarlarında tutun, asla commit ettiğiniz kodda tutmayın ve .env dosyalarınızı .gitignore'a ekleyin. Bir web sayfasında public key bulunması normaldir. Bir secret key git'e, herkese açık bir sayfaya, bir ekran görüntüsüne ya da bir sohbete düşerse API anahtarları'nı açın, Yeni bir secret key oluştur'a basın ve yeni anahtarı eskisinin kullanıldığı her yere yapıştırın: eski anahtar hemen çalışmayı durdurur.

.env
.env.local
.env.*.local

6Manuel yakalama ve giriş denemeleri

Giriş denemeleri gizli anahtar gerektirir: sunucuda genel anahtar yerine gizli anahtarla başlatın, aksi halde alım bunları 403 security_needs_secret_key ile reddeder. Scale planı.

blipit.capture_exception(err)
blipit.capture_message("cache miss rate above 50%", level="warning")
blipit.set_user({"id": "42", "email": "ana@example.com"})
blipit.set_context("order", {"id": 1042, "total": 99.5})
blipit.capture_security("login_failed", actor=email, ip=request.META.get("REMOTE_ADDR"), outcome="bad_password")

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

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.

blipit.capture_message("Hello from Python")

1Kurulum

composer require blipit/blipit

2Başlangıçta başlatın

Düz PHP: front controller'ınızın en üstünde, herhangi bir istek işlenmeden önce. Laravel, sonraki adımdaki gibi Blipit'i kendi config'inden başlatır. Anahtar, projenin Anahtarlar sayfasındadır. Anahtar boşsa init istisna fırlatmak yerine hata loguna bir uyarı yazar ve false döndürür.

use Blipit\Blipit;

Blipit::init([
    "key" => "<public key>",
    "environment" => "production",
    "release" => "myapp@1.4.2",
]);

3Anahtarlarınızı alın

app.blipit.io'da oturum açın ve kenar çubuğunda API anahtarları'nı, ardından projenizi açın. Her projenin iki anahtarı vardır. Public key blipit_pk_ ile başlar: tarayıcı ve uygulama koduna gider, yalnızca olay gönderebilir ve herkesin görmesi güvenlidir. Secret key blipit_sk_ ile başlar: sunucunuzda ya da Odoo'da kalır, asla tarayıcıda olmaz, çünkü sorunları okuyup değiştirebilir de. Secret key yalnızca bir kez, oluşturulduktan hemen sonra gösterilir, bu yüzden o anda kopyalayın; kaybederseniz Yeni bir secret key oluştur'a basın, eskisi hemen çalışmayı durdurur. Bazı SDK'lar ayrıca aynı sayfada gösterilen proje id'sine ihtiyaç duyar.

4Anahtarı ortam değişkenlerinde tutun

Bu SDK public key ile gönderir. Laravel: onu .env dosyasına ve config/services.php'ye ekleyin; Blipit service provider'ı kendiliğinden bulunur ve Blipit'i bu config'den başlatır, başka bir şey gerekmez. Değerleri config üzerinden okuyun, çünkü config önbelleğe alındıktan sonra env() uygulama kodunda hiçbir şey döndürmez. Düz PHP: anahtarı sunucunun ortamından getenv() ile okuyun.

BLIPIT_KEY=blipit_pk_your_public_key

'blipit' => [
    'key' => env('BLIPIT_KEY'),
    'environment' => env('APP_ENV'),
    'release' => env('GIT_SHA'),
],

5Anahtarları git'ten uzak tutun

Anahtarları ortam değişkenlerinde ya da barındırma ortamınızın gizli ayarlarında tutun, asla commit ettiğiniz kodda tutmayın ve .env dosyalarınızı .gitignore'a ekleyin. Bir web sayfasında public key bulunması normaldir. Bir secret key git'e, herkese açık bir sayfaya, bir ekran görüntüsüne ya da bir sohbete düşerse API anahtarları'nı açın, Yeni bir secret key oluştur'a basın ve yeni anahtarı eskisinin kullanıldığı her yere yapıştırın: eski anahtar hemen çalışmayı durdurur.

.env
.env.local
.env.*.local

6Laravel ve Symfony

Laravel: handler'ının raporladığı her istisna Blipit'e ulaşır; böylece 404'ler ve doğrulama hataları dışarıda kalır. Sorgular, log satırları ve HTTP istemci çağrıları breadcrumb olur, kuyruğa alınan işler trace edilir. bootstrap/app.php'de zaten bulunan bir Blipit::captureException satırı kalabilir: aynı istisna asla iki kez gönderilmez. Symfony: listener'ı config/services.yaml içinde kaydedin ve Blipit::init'i public/index.php ile bin/console'da erkenden çağırın.

Blipit\Symfony\BlipitListener:
    arguments: ['@router']
    tags:
        - { name: kernel.event_listener, event: kernel.exception, method: onKernelException }
        - { name: kernel.event_listener, event: kernel.request, method: onKernelRequest }
        - { name: kernel.event_listener, event: kernel.terminate, method: onKernelTerminate }
        - { name: kernel.event_listener, event: console.error, method: onConsoleError }

7Manuel yakalama ve giriş denemeleri

Giriş denemeleri gizli anahtar gerektirir: sunucuda genel anahtar yerine gizli anahtarla başlatın, aksi halde alım bunları 403 security_needs_secret_key ile reddeder. Scale planı.

Blipit::captureException($e);
Blipit::captureMessage("cache miss rate above 50%", "warning");
Blipit::setUser(["id" => "42", "email" => "ana@example.com"]);
Blipit::captureSecurity("login_failed", $email, "bad_password", null, $request->ip(), $request->userAgent());

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

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.

Blipit::captureMessage("Hello from PHP");

1Gemfile

gem "blipit"

2Başlangıçta başlatın

Rails: config/initializers/blipit.rb; başka bir şey kurmanız gerekmez, çünkü Blipit Rack middleware'ini, Active Job ve Rails.error raporlamasını kendisi ekler. Rack ve Sinatra uygulamaları use Blipit::Rack ekler. Betikler: kodunuz çalışmadan önce. Anahtar, projenin Anahtarlar sayfasındadır. Anahtar boşsa init hata fırlatmak yerine bir uyarı yazdırır ve false döndürür.

Blipit.init(
  key: "<public key>",
  environment: Rails.env,
  release: ENV["RELEASE"],
)

3Anahtarlarınızı alın

app.blipit.io'da oturum açın ve kenar çubuğunda API anahtarları'nı, ardından projenizi açın. Her projenin iki anahtarı vardır. Public key blipit_pk_ ile başlar: tarayıcı ve uygulama koduna gider, yalnızca olay gönderebilir ve herkesin görmesi güvenlidir. Secret key blipit_sk_ ile başlar: sunucunuzda ya da Odoo'da kalır, asla tarayıcıda olmaz, çünkü sorunları okuyup değiştirebilir de. Secret key yalnızca bir kez, oluşturulduktan hemen sonra gösterilir, bu yüzden o anda kopyalayın; kaybederseniz Yeni bir secret key oluştur'a basın, eskisi hemen çalışmayı durdurur. Bazı SDK'lar ayrıca aynı sayfada gösterilen proje id'sine ihtiyaç duyar.

4Anahtarı Rails credentials içinde tutun

Bu SDK public key ile gönderir. Rails'te onu şifreli credentials içinde tutun ve initializer'da okuyun; başka yerlerde bir ortam değişkeni kullanın.

bin/rails credentials:edit

blipit:
  key: blipit_pk_your_public_key

Blipit.init(
  key: Rails.application.credentials.dig(:blipit, :key),
  environment: Rails.env,
)

5Anahtarları git'ten uzak tutun

Anahtarları ortam değişkenlerinde ya da barındırma ortamınızın gizli ayarlarında tutun, asla commit ettiğiniz kodda tutmayın ve .env dosyalarınızı .gitignore'a ekleyin. Bir web sayfasında public key bulunması normaldir. Bir secret key git'e, herkese açık bir sayfaya, bir ekran görüntüsüne ya da bir sohbete düşerse API anahtarları'nı açın, Yeni bir secret key oluştur'a basın ve yeni anahtarı eskisinin kullanıldığı her yere yapıştırın: eski anahtar hemen çalışmayı durdurur.

.env
.env.local
.env.*.local

6Manuel yakalama ve giriş denemeleri

Giriş denemeleri gizli anahtar gerektirir: sunucuda genel anahtar yerine gizli anahtarla başlatın, aksi halde alım bunları 403 security_needs_secret_key ile reddeder. Scale planı.

Blipit.capture_exception(e)
Blipit.capture_message("cache miss rate above 50%", level: :warning)
Blipit.set_user(id: "42", email: "ana@example.com")
Blipit.capture_security("login_failed", email, outcome: "bad_password", ip: request.remote_ip, user_agent: request.user_agent)

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

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.

Blipit.capture_message("Hello from Rails")

1Kurulum

go get github.com/blipit-io/blipit-go

2main içinde başlatın

Init asla panic etmez: anahtar ya da proje id'si boşsa bir hata döndürür ve Blipit kapalı kalır; bu yüzden çıkmak yerine hatayı loglayın.

import (
    "log"
    "time"

    "github.com/blipit-io/blipit-go"
)

func main() {
    if err := blipit.Init(blipit.Options{
        Key:         "<public key>",
        Project:     "<project id>",
        Environment: "production",
        Release:     "myapp@1.4.2",
    }); err != nil {
        log.Printf("blipit: %v", err)
    }
    defer blipit.Flush(2 * time.Second)
}

3Anahtarlarınızı alın

app.blipit.io'da oturum açın ve kenar çubuğunda API anahtarları'nı, ardından projenizi açın. Her projenin iki anahtarı vardır. Public key blipit_pk_ ile başlar: tarayıcı ve uygulama koduna gider, yalnızca olay gönderebilir ve herkesin görmesi güvenlidir. Secret key blipit_sk_ ile başlar: sunucunuzda ya da Odoo'da kalır, asla tarayıcıda olmaz, çünkü sorunları okuyup değiştirebilir de. Secret key yalnızca bir kez, oluşturulduktan hemen sonra gösterilir, bu yüzden o anda kopyalayın; kaybederseniz Yeni bir secret key oluştur'a basın, eskisi hemen çalışmayı durdurur. Bazı SDK'lar ayrıca aynı sayfada gösterilen proje id'sine ihtiyaç duyar.

4Anahtarı ortam değişkenlerinde tutun

Bu SDK public key ve proje id'si ile gönderir. Bunları barındırma ortamınızın, bir systemd unit'inin ya da docker run -e'nin ayarladığı ortam değişkenlerinden okuyun.

blipit.Init(blipit.Options{
    Key:     os.Getenv("BLIPIT_KEY"),
    Project: os.Getenv("BLIPIT_PROJECT"),
})

5Anahtarları git'ten uzak tutun

Anahtarları ortam değişkenlerinde ya da barındırma ortamınızın gizli ayarlarında tutun, asla commit ettiğiniz kodda tutmayın ve .env dosyalarınızı .gitignore'a ekleyin. Bir web sayfasında public key bulunması normaldir. Bir secret key git'e, herkese açık bir sayfaya, bir ekran görüntüsüne ya da bir sohbete düşerse API anahtarları'nı açın, Yeni bir secret key oluştur'a basın ve yeni anahtarı eskisinin kullanıldığı her yere yapıştırın: eski anahtar hemen çalışmayı durdurur.

.env
.env.local
.env.*.local

6Manuel yakalama ve giriş denemeleri

Giriş denemeleri gizli anahtar gerektirir: sunucuda genel anahtar yerine gizli anahtarla başlatın, aksi halde alım bunları 403 security_needs_secret_key ile reddeder. Scale planı.

blipit.CaptureException(err)
blipit.CaptureMessage("cache miss rate above 50%")
blipit.SetUser(blipit.User{ID: "42", Email: "ana@example.com"})
blipit.CaptureSecurity(blipit.Security{Kind: "login_failed", Actor: email, IP: ip, UserAgent: agent, Outcome: "bad_password"})

7Panic'ler ve net/http

main'in ya da herhangi bir goroutine'in en üstündeki defer blipit.Recover(), bir panic'i stack'iyle birlikte raporlar, flush eder ve yeniden panic eder. Panic'leri istekle birlikte raporlamak ve her isteğin süresini ServeMux kalıbıyla adlandırılmış olarak Pulse'ta ölçmek için sunduğunuz handler'ı blipit.Handler ile sarın. Gin, Echo ve Fiber, paketin README'sinde gösterildiği gibi StartRequest, SetRoute ve End kullanır.

go func() {
    defer blipit.Recover()
    work()
}()

mux := http.NewServeMux()
mux.HandleFunc("GET /items/{id}", item)
http.ListenAndServe(":8080", blipit.Handler(mux))

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

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.

blipit.CaptureMessage("Hello from Go")

1Depoyu ve bağımlılığı ekleyin

repositories {
    mavenCentral()
    maven("https://jitpack.io")
}

dependencies {
    implementation("com.github.blipit-io:blipit-java:v0.2.1")
}

<repositories>
  <repository>
    <id>jitpack.io</id>
    <url>https://jitpack.io</url>
  </repository>
</repositories>

<dependency>
  <groupId>com.github.blipit-io</groupId>
  <artifactId>blipit-java</artifactId>
  <version>v0.2.1</version>
</dependency>

2Başlangıçta başlatın

Spring Boot: main'in en üstünde, SpringApplication.run'dan önce ya da bir @Configuration sınıfının @PostConstruct metodunda. Herhangi bir thread'deki yakalanmamış istisnalar, uygulama durmadan önce diskteki bir kuyruğa yazılır ve ardından gönderilir; böylece ağ kapalı olsa bile çökme raporlanır, geride kalan her şey bir sonraki başlangıçta gönderilir.

import io.blipit.Blipit;
import io.blipit.BlipitOptions;

Blipit.init(BlipitOptions.builder()
    .key("<public key>")
    .project(<project id>)
    .environment("production")
    .release("myapp@1.4.2")
    .build());

3Anahtarlarınızı alın

app.blipit.io'da oturum açın ve kenar çubuğunda API anahtarları'nı, ardından projenizi açın. Her projenin iki anahtarı vardır. Public key blipit_pk_ ile başlar: tarayıcı ve uygulama koduna gider, yalnızca olay gönderebilir ve herkesin görmesi güvenlidir. Secret key blipit_sk_ ile başlar: sunucunuzda ya da Odoo'da kalır, asla tarayıcıda olmaz, çünkü sorunları okuyup değiştirebilir de. Secret key yalnızca bir kez, oluşturulduktan hemen sonra gösterilir, bu yüzden o anda kopyalayın; kaybederseniz Yeni bir secret key oluştur'a basın, eskisi hemen çalışmayı durdurur. Bazı SDK'lar ayrıca aynı sayfada gösterilen proje id'sine ihtiyaç duyar.

4Anahtarı ortam değişkenlerinde tutun

Bu SDK public key ve proje id'si ile gönderir. Bunları ortam değişkenlerinden ya da Spring Boot'ta ortamdan doldurulan application.properties'ten okuyun.

blipit.key=${BLIPIT_KEY}
blipit.project=${BLIPIT_PROJECT}

Blipit.init(BlipitOptions.builder()
    .key(System.getenv("BLIPIT_KEY"))
    .project(Long.parseLong(System.getenv("BLIPIT_PROJECT")))
    .build());

5Anahtarları git'ten uzak tutun

Anahtarları ortam değişkenlerinde ya da barındırma ortamınızın gizli ayarlarında tutun, asla commit ettiğiniz kodda tutmayın ve .env dosyalarınızı .gitignore'a ekleyin. Bir web sayfasında public key bulunması normaldir. Bir secret key git'e, herkese açık bir sayfaya, bir ekran görüntüsüne ya da bir sohbete düşerse API anahtarları'nı açın, Yeni bir secret key oluştur'a basın ve yeni anahtarı eskisinin kullanıldığı her yere yapıştırın: eski anahtar hemen çalışmayı durdurur.

.env
.env.local
.env.*.local

6Manuel yakalama ve giriş denemeleri

Giriş denemeleri gizli anahtar gerektirir: sunucuda genel anahtar yerine gizli anahtarla başlatın, aksi halde alım bunları 403 security_needs_secret_key ile reddeder. Scale planı.

Blipit.captureException(err);
Blipit.captureMessage("cache miss rate above 50%");
Blipit.captureMessage("disk almost full", Level.WARNING);
Blipit.setUser("42", "ana@example.com");
Blipit.addBreadcrumb("GET /api/cart 500", "http", Level.ERROR);
Blipit.captureSecurity("login_failed", email, "bad_password", null, ip, userAgent, null);

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

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.

Blipit.captureMessage("Hello from Java");

1Kurulum

dotnet add package Blipit

2Başlangıçta başlatın

Döndürülen handle'ı süreç boyunca canlı tutun. Her iki değer de projenin Anahtarlar sayfasındadır.

using Blipit;

using var blipit = Blipit.Blipit.Init(new BlipitOptions
{
    Key = "<public key>",
    Project = "<project id>",
    Environment = "production",
    Release = "myapp@1.4.2",
});

3Anahtarlarınızı alın

app.blipit.io'da oturum açın ve kenar çubuğunda API anahtarları'nı, ardından projenizi açın. Her projenin iki anahtarı vardır. Public key blipit_pk_ ile başlar: tarayıcı ve uygulama koduna gider, yalnızca olay gönderebilir ve herkesin görmesi güvenlidir. Secret key blipit_sk_ ile başlar: sunucunuzda ya da Odoo'da kalır, asla tarayıcıda olmaz, çünkü sorunları okuyup değiştirebilir de. Secret key yalnızca bir kez, oluşturulduktan hemen sonra gösterilir, bu yüzden o anda kopyalayın; kaybederseniz Yeni bir secret key oluştur'a basın, eskisi hemen çalışmayı durdurur. Bazı SDK'lar ayrıca aynı sayfada gösterilen proje id'sine ihtiyaç duyar.

4Anahtarı yapılandırmada tutun

Bu SDK public key ve proje id'si ile gönderir. Geliştirme sırasında bunları user secrets içinde, production'da ortam değişkenlerinde (Blipit__Key ve Blipit__Project) tutun, ardından yapılandırmadan okuyun.

dotnet user-secrets set "Blipit:Key" "blipit_pk_your_public_key"
dotnet user-secrets set "Blipit:Project" "12"

using var blipit = Blipit.Blipit.Init(new BlipitOptions
{
    Key = builder.Configuration["Blipit:Key"],
    Project = builder.Configuration["Blipit:Project"],
});

5Anahtarları git'ten uzak tutun

Anahtarları ortam değişkenlerinde ya da barındırma ortamınızın gizli ayarlarında tutun, asla commit ettiğiniz kodda tutmayın ve .env dosyalarınızı .gitignore'a ekleyin. Bir web sayfasında public key bulunması normaldir. Bir secret key git'e, herkese açık bir sayfaya, bir ekran görüntüsüne ya da bir sohbete düşerse API anahtarları'nı açın, Yeni bir secret key oluştur'a basın ve yeni anahtarı eskisinin kullanıldığı her yere yapıştırın: eski anahtar hemen çalışmayı durdurur.

.env
.env.local
.env.*.local

6ASP.NET Core ve loglama

Eklenecek başka bir şey yok: Program.cs'nin en üstünde Init'i çağırın. Endpoint'lerden, controller'lardan ve middleware'den gelen istisnalar, UseExceptionHandler onları işlese bile istekle birlikte raporlanır; TracesSampleRate ayarlıyken örneklenen her istek rotasına göre Pulse'ta ölçülür. BlipitLoggerProvider, Information ve üstünü breadcrumb'a, Error ve üstünü olaya dönüştürür.

var builder = WebApplication.CreateBuilder(args);
using var blipit = Blipit.Blipit.Init(new BlipitOptions
{
    Key = builder.Configuration["Blipit:Key"],
    Project = builder.Configuration["Blipit:Project"],
    TracesSampleRate = 0.2,
});
builder.Logging.AddProvider(new BlipitLoggerProvider());

7Manuel yakalama ve giriş denemeleri

Giriş denemeleri gizli anahtar gerektirir: sunucuda genel anahtar yerine gizli anahtarla başlatın, aksi halde alım bunları 403 security_needs_secret_key ile reddeder. Scale planı.

Blipit.Blipit.CaptureException(ex);
Blipit.Blipit.CaptureMessage("cache miss rate above 50%", BlipitLevel.Warning);
Blipit.Blipit.SetUser(id: "42", email: "ana@example.com");
Blipit.Blipit.CaptureSecurity("login_failed", email, "bad_password", null, ip, userAgent, null);

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

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.

Blipit.Blipit.CaptureMessage("Hello from .NET");

1Anahtarlarınızı alın

app.blipit.io'da oturum açın ve kenar çubuğunda API anahtarları'nı, ardından projenizi açın. Her projenin iki anahtarı vardır. Public key blipit_pk_ ile başlar: tarayıcı ve uygulama koduna gider, yalnızca olay gönderebilir ve herkesin görmesi güvenlidir. Secret key blipit_sk_ ile başlar: sunucunuzda ya da Odoo'da kalır, asla tarayıcıda olmaz, çünkü sorunları okuyup değiştirebilir de. Secret key yalnızca bir kez, oluşturulduktan hemen sonra gösterilir, bu yüzden o anda kopyalayın; kaybederseniz Yeni bir secret key oluştur'a basın, eskisi hemen çalışmayı durdurur. Bazı SDK'lar ayrıca aynı sayfada gösterilen proje id'sine ihtiyaç duyar.

2React Native

Paket, native çökmeler için Blipit'in kendi Android ve iOS SDK'larını başlatan küçük bir native modül bağlar; Gradle dosyası JitPack deposunu kendisi ekler. Render hatalarının da raporlanması için kök bileşeni sarın.

npm install @blipit/react-native
npx pod-install

import * as Blipit from "@blipit/react-native";

Blipit.init({ key: "<public key>", project: <project id>, environment: "production", release: "myapp@1.4.2" });

export default Blipit.wrap(App);

3Flutter

main.dart içinde runApp'i Blipit.init ile değiştirin. Eklenti, native çökmeler için Blipit'in kendi Android ve iOS SDK'larını başlatır; Flutter framework hataları ve yakalanmamış async hatalar kendiliğinden raporlanır.

flutter pub add blipit_flutter

import 'package:blipit_flutter/blipit_flutter.dart';

Future<void> main() async {
  await Blipit.init(
    key: '<public key>',
    project: <project id>,
    environment: 'production',
    release: 'myapp@1.4.2',
    appRunner: () => runApp(const MyApp()),
  );
}

4iOS ve macOS (Swift Package)

Xcode'da File, Add Package Dependencies'e gidin ve depo URL'sini girin; ya da Package.swift'e ekleyin ve BlipitSwift'i hedefinize ekleyin. CocoaPods ile BlipitSwift pod'unu kullanın. Ardından açılışta start'ı bir kez çağırın. Anahtar ya da proje id'si boşsa start uygulamayı çökertmek yerine bir uyarı yazdırır ve false döndürür.

.package(url: "https://github.com/blipit-io/blipit-swift", from: "0.6.0")

pod "BlipitSwift", "~> 0.6.0"

import BlipitSwift

Blipit.start(key: "<public key>", project: "<project id>", environment: "production", release: "myapp@1.4.2")

5Android

settings.gradle.kts içindeki repositories'e JitPack'i, uygulama modülüne bağımlılığı ekleyin ve Application.onCreate içinde init'i çağırın.

dependencyResolutionManagement {
    repositories {
        google()
        mavenCentral()
        maven("https://jitpack.io")
    }
}

implementation("com.github.blipit-io:blipit-android:v0.6.0")

import io.blipit.android.Blipit

class App : Application() {
    override fun onCreate() {
        super.onCreate()
        Blipit.init(this) {
            key = "<public key>"
            project = "<project id>"
            environment = "production"
            release = "myapp@1.4.2"
        }
    }
}

6Anahtar bir uygulamada nereye konur

Uygulamalar public key'i ve proje id'sini uygulamanın içinde taşır; bu sorun değildir: public key yalnızca olay gönderebilir. Secret key'i asla bir uygulamaya koymayın. Depo dışında kalmaları için bunları derleme sırasında verin.

flutter run --dart-define=BLIPIT_KEY=blipit_pk_your_public_key --dart-define=BLIPIT_PROJECT=12

const key = String.fromEnvironment('BLIPIT_KEY');
const project = int.fromEnvironment('BLIPIT_PROJECT');

EXPO_PUBLIC_BLIPIT_KEY=blipit_pk_your_public_key
EXPO_PUBLIC_BLIPIT_PROJECT=12

buildConfigField("String", "BLIPIT_KEY", ""${project.findProperty("blipitKey")}"")

BLIPIT_KEY = blipit_pk_your_public_key

7Uygulamalarda hata raporları

showReport'u kendi menü öğenizden çağırın veya kayan Hata bildir düğmesini açın. Bildirici önce sorunu nasıl göstereceğinizi sorar: ekran görüntüsü almak, ekranı kaydetmek (iOS) ya da yalnızca anlatmak. Ekran görüntüsü tam ekran açılır; araçlar görüntünün üstünde ve altındadır, asla üzerinde değildir. Yakınlaştırmak için iki parmakla sıkıştırın veya çift dokunun, sorunu işaretleyin, ardından başlık ve ne olduğunu ekleyip gönderin. Bildirimler cihaz bilgileriyle Hata bildirimleri bölümüne gelir. React Native ekran görüntüsü için react-native-view-shot gerektirir.

import * as Blipit from "@blipit/react-native";

export default function Root() {
  return (
    <Blipit.BlipitReporter showButton>
      <App />
    </Blipit.BlipitReporter>
  );
}

Blipit.showReport();

appRunner: () => runApp(const BlipitReporter(showButton: true, child: MyApp())),

Blipit.showReport();

Blipit.showReportButton()

Blipit.showReport()

Blipit.showReportButton()

Blipit.showReport()

8Hatanın olduğu ekrandan bildirin

Profil gibi bir menüdeki Hata bildir öğesi sorunu değil menüyü yakalar. Ekranın kendisinden başlayan yolları açın; hepsi varsayılan olarak kapalıdır ve izin istemez. shakeToReport telefon sallandığında bildirim formunu açar. screenshotToReport normal bir ekran görüntüsünden sonra "Bu ekranla bir hata bildirilsin mi?" diye sorar ve Blipit'in kendi görüntüsünü ekler (iOS ile Android 14 ve sonrası). twoFingerReport, uygulamanın kendi dokunuşlarını engellemeden yaklaşık bir saniyelik iki parmakla basılı tutmadan sonra açar. reportAfterCrash bir çökmeden sonraki ilk açılışta kişinin ne yaptığını sorar ve raporu o çökmeye bağlar. Varsayılan olarak açık olan screenPicker, formu menüden açan kişinin hatanın son ekranlardan hangisinde olduğunu seçmesini sağlar: anlık görüntüler cihazın belleğinde kalır ve yalnızca seçilen yüklenir. Jetpack Compose ve SwiftUI uygulamaları ekranlarını setScreen ile adlandırır.

Blipit.init(this) {
    key = "<public key>"
    project = "<project id>"
    shakeToReport = true
    screenshotToReport = true
    twoFingerReport = true
    reportAfterCrash = true
}

navController.addOnDestinationChangedListener { _, destination, _ ->
    Blipit.setScreen(destination.route ?: "screen")
}

Blipit.start(key: "<public key>", project: "<project id>") { options in
    options.shakeToReport = true
    options.screenshotToReport = true
    options.twoFingerReport = true
    options.reportAfterCrash = true
}

CartView().onAppear { Blipit.setScreen("Cart") }

Blipit.init({
  key: "<public key>",
  project: <project id>,
  shakeToReport: true,
  screenshotToReport: true,
  twoFingerReport: true,
  reportAfterCrash: true,
});

<NavigationContainer ref={navigation} onReady={() => Blipit.trackNavigation(navigation)}>

await Blipit.init(
  key: '<public key>',
  project: <project id>,
  shakeToReport: true,
  screenshotToReport: true,
  twoFingerReport: true,
  reportAfterCrash: true,
  appRunner: () => runApp(BlipitReporter(child: MaterialApp(navigatorObservers: [BlipitNavigatorObserver()], home: const Home()))),
);

9Yalnızca test kullanıcıları için yüzen düğme

app.blipit.io'da projeyi açın ve hata raporu düğmesi ayarlarında Telefon uygulamalarında yüzen düğme seçeneğini Herkes veya Yalnızca test kullanıcıları yapın; her test kullanıcısı için bir kullanıcı kimliği veya e-posta girin. Uygulama setUser ile ayarladığı kişiyi gönderir ve Blipit yalnızca evet ya da hayır yanıtı verir, bu yüzden test kullanıcısı listesi asla uygulamanın içinde gönderilmez. showReportButton çağırmak (React Native ve Flutter'da showButton) düğmeyi yine herkese gösterir.

Blipit.setUser(id = user.id, email = user.email)

Blipit.setUser(id: user.id, email: user.email)

Blipit.setUser({ id: user.id, email: user.email });

Blipit.setUser(BlipitUser(id: user.id, email: user.email));

10Takılan bir uygulamayı yakalamak

Bazı hatalar hiç çökme yaratmaz: açılış ekranı dönmeye devam eder ya da giriş hiç geri dönmez. waitForReady'yi açın ve ilk kullanılabilir ekran göründüğünde reportReady'yi çağırın. Giriş gibi akışları startFlow ve endFlow arasına alın, adımları flowStep ile işaretleyin. Biri zamanında bitmezse Blipit son adım ve öncesindeki izle birlikte Takıldı türünde bir sorun açar. Yalnızca ekranda geçen süre sayılır ve süre sınırlarını Blipit belirler. Adlar yazıldığı gibi gönderilir; sabit adlar kullanın, asla e-posta ya da başka kullanıcı verisi kullanmayın.

Blipit.init(this) {
    key = "<public key>"
    project = "<project id>"
    waitForReady = true
}

Blipit.reportReady()

Blipit.startFlow("sign-in")
Blipit.flowStep("sign-in", "google-picker")
Blipit.endFlow("sign-in")

Blipit.start(key: "<public key>", project: "<project id>", waitForReady: true)

Blipit.reportReady()

Blipit.startFlow("sign-in")
Blipit.flowStep("sign-in", "apple-sheet")
Blipit.endFlow("sign-in")

Blipit.init({ key: "<public key>", project: <project id>, waitForReady: true });

Blipit.reportReady();

Blipit.startFlow("sign-in");
Blipit.flowStep("sign-in", "google-picker");
Blipit.endFlow("sign-in");

await Blipit.init(key: '<public key>', project: <project id>, waitForReady: true, appRunner: () => runApp(const MyApp()));

Blipit.reportReady();

Blipit.startFlow('sign-in');
Blipit.flowStep('sign-in', 'google-picker');
Blipit.endFlow('sign-in');

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

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.

1Modülü kurun

Odoo sürümünüz için apps.odoo.com adresinden indirin (blipit_monitor, ücretsiz) ve herhangi bir modül gibi kurun: Uygulamalar, Uygulama Listesini Güncelle, Blipit Error Monitoring'i kurun. Odoo Online üçüncü taraf uygulamalara izin vermez; Odoo.sh ve on-premise verir.

2Anahtarlarınızı alın

app.blipit.io'da oturum açın ve kenar çubuğunda API anahtarları'nı, ardından projenizi açın. Her projenin iki anahtarı vardır. Public key blipit_pk_ ile başlar: tarayıcı ve uygulama koduna gider, yalnızca olay gönderebilir ve herkesin görmesi güvenlidir. Secret key blipit_sk_ ile başlar: sunucunuzda ya da Odoo'da kalır, asla tarayıcıda olmaz, çünkü sorunları okuyup değiştirebilir de. Secret key yalnızca bir kez, oluşturulduktan hemen sonra gösterilir, bu yüzden o anda kopyalayın; kaybederseniz Yeni bir secret key oluştur'a basın, eskisi hemen çalışmayı durdurur. Bazı SDK'lar ayrıca aynı sayfada gösterilen proje id'sine ihtiyaç duyar.

3Bağlanın

Ayarlar, Blipit: projenin secret key'ini yapıştırın, Koşullar ve modül lisansı onay kutusunu işaretleyin ve Kaydet'e basın. Kendiliğinden bağlanır ve Connected to <project> gösterir. Bir public key ya da zaten başka bir veritabanına bağlı bir anahtar nedeniyle birlikte reddedilir.

4Sorumlu kişiler

Kime e-posta gideceğini seçin; birden fazla şirketiniz varsa şirket başına. Her kişi planınızdan bir kullanıcı hakkı alır; Blipit kaydettiğinizde sayıyı kontrol eder.

5Odoo'dan hata raporları

Modül Hata bildir düğmesini Odoo'ya sizin yerinize ekler; yazılacak kod yoktur. Ayarlar, Blipit, Hata raporları, Gösterildiği kişiler altında kimin göreceğini seçin: Dahili kullanıcılar, Web sitesi ziyaretçileri, Her ikisi ya da Hiç kimse; isterseniz dahili kullanıcıları tek bir grupla sınırlayın. Bildirimler kişinin bulunduğu modeli, kaydı ve alanı taşır; oturum açmış kullanıcının adı ve e-postası doldurulur. Konum, renk, metin ve stil app.blipit.io'da Proje ayarları, Hata raporu widget'ı altından gelir. Her seçenek için Hata bildir düğmesi kılavuzuna bakın.

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

Odoo'da Blipit uygulamasını açın. Sonraki hata orada ve sorumlu kişilerin gelen kutusunda görünür. Hemen kontrol etmek için Blipit'ten Yenile'ye tıklayın.