ドキュメント

Blipit をインストール

アプリの技術を選ぶと、そのガイドの正確な手順が表示されます。ワンクリックで、あなた自身のキーが入った状態で app.blipit.io に表示されます。

1スタックを選ぶ

任意の Web サイトnpm でバンドルするアプリ（React、Vue、Svelte、Vite）、またはプレーン HTML、WordPress、Shopify、Webflow 向けのスクリプトタグ1つ。Next.js と ReactApp Router でも Pages Router でも：ブラウザ用にコンポーネント1つ、サーバーエラー用に1行。Node.jsExpress、Fastify、NestJS、Koa、ワーカー、スクリプト。PythonDjango、Flask、FastAPI、Celery、スクリプト。PHP と LaravelLaravel、Symfony、WordPress プラグイン、通常の PHP。Ruby と RailsRails、Sinatra、Sidekiq。Gonet/http、Gin、Echo、Fiber、ワーカー。Java と KotlinSpring Boot、通常の Java、Kotlin。.NETASP.NET Core、コンソールアプリ、MAUI。iOS、Android、Flutter、React Nativeネイティブアプリとクロスプラットフォームアプリ。クラッシュも他と同様にグループ化され、「バグを報告」ボタンでスクリーンショット（iOS では画面録画も）を送れます。OdooOdoo の Community と Enterprise、Odoo.sh またはオンプレミス。

2任意の Web サイトの手順

Blipit にサインイン済みですか？キーのページを開くと、プロジェクトのキーが入力済みの手順がそのままコピーできます。

自分のキーを表示

インストール npm install @blipit/browser

1キーを取得

app.blipit.io にサインインし、サイドバーの「APIキー」を開いてプロジェクトを選びます。各プロジェクトには2つのキーがあります。公開キーは blipit_pk_ で始まり、ブラウザやアプリのコードに置くものです。イベントの送信しかできないため、誰に見られても安全です。シークレットキーは blipit_sk_ で始まり、サーバーまたは Odoo に置き、ブラウザには決して置きません。イシューの読み取りや変更もできるためです。シークレットキーは作成直後に一度だけ表示されるので、そのときにコピーしてください。紛失した場合は「新しいシークレットキーを作成」を押すと、古いキーは即座に無効になります。一部の SDK では、同じページに表示されるプロジェクト ID も必要です。

app.blipit.io の API キー：ブラウザコード用の公開キー（blipit_pk_）と、サーバーおよび Odoo 用のシークレットキー（blipit_sk_）。

新しいシークレットキーは一度だけ表示されます。今すぐコピーしてください。ハッシュ化して保存されるため、再表示はできません。

2npm で

アプリの描画前に、エントリーファイルで公開キーを指定して init を1回呼び出します。Vite（React、Vue、Svelte）では、キーを .env に VITE_BLIPIT_KEY として保存します。ブラウザに届くのは VITE_ で始まる変数だけで、開発サーバーは起動時にのみ .env を読み込みます。

npm install @blipit/browser

.env

VITE_BLIPIT_KEY=blipit_pk_your_public_key

src/main.js

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

3バンドラーなし：script タグ1つ

公開キーを書き込んだ状態で、これをすべてのページの <head> か、プラットフォームのカスタムコード欄に貼り付けます。公開キーはイベントの送信しかできないため、これで問題ありません。

html

<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>

4キーを git に含めない

キーは環境変数またはホスティング先のシークレット設定に保管し、コミットするコードには決して書かないでください。また、.env ファイルを .gitignore に追加してください。Web ページに公開キーがあるのは通常のことです。シークレットキーが git、公開ページ、スクリーンショット、チャットなどに漏れた場合は、「APIキー」を開いて「新しいシークレットキーを作成」を押し、古いキーを使っていた箇所すべてに新しいキーを貼り付けてください。古いキーは即座に無効になります。

.gitignore

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

5ユーザーを Blipit に伝える（任意）

サインイン後にユーザーを紐付けると、イシューに影響を受けたユーザーが表示され、リプレイをユーザーで探せるようになります。

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

6React、Vue、Angular、Svelte：捕捉したエラーを報告する

フレームワークはコンポーネント内のエラーをブラウザより先に捕捉するため、それらも Blipit に渡してください。それ以外の場所で捕捉されなかったエラーは自動で報告されます。

React 19 (src/main.tsx)

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

または React 18 以前: エラーバウンダリ

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

Vue (src/main.ts)

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

Angular (app.config.ts)

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

SvelteKit (src/hooks.client.ts)

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

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

7バグレポート：「不具合を報告」ボタン

公開キーで SDK が起動すると、すべてのページの右下に訪問者の言語で「不具合を報告」ボタンが表示されます。クリックするとレポーターが開き、ページのスクリーンショットへの書き込み、要素の選択、任意の画面録画、タイトルと説明の入力ができます。位置、スタイル、テキスト、色、キーボードショートカットは、以下のようにコードで変更するか、app.blipit.io の「プロジェクト設定」→「バグレポートウィジェット」ですべてのサイトに一括で変更できます。コードのオプションが優先されます。バグレポートボタンのガイドでは、すべてのオプションをスクリーンショットとライブデモ付きで紹介しています。

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

8独自のボタンからレポーターを開く

独自のヘッダーやメニューに「不具合を報告」ボタンを置くには、公式ボタンを使います。Blipit.reportButton() は、Blipit アイコンと訪問者の言語の「不具合を報告」が入った完成済みのボタンを返します。React アプリでは @blipit/nextjs/react の <BlipitReportButton /> を表示できます (npm install @blipit/nextjs)。独自のデザインにしたい場合は、任意のクリックハンドラーから openReport() を呼び出すか、attachReport(element) で既存の要素に紐付けます。どちらの場合も、レポーターはフローティングボタンから開いたときとまったく同じように開きます。Blipit アイコンは、公式ボタンのように「不具合を報告」の横でのみ使用できます。

公式ボタン、プレーン HTML

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

公式ボタン、React

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

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

公式ボタン、Vue

<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>

プレーン HTML

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

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

React

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

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

Vue

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

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

ページヘッダーのカスタム Report Issue ボタンで Blipit のレポーターが開きます。

9デフォルトのボタンを隠す

独自のボタンだけを残すには、コードで feedbackWidget: false（<Blipit /> では feedbackWidget={false}）を指定してフローティングボタンをオフにするか、プロジェクトの「バグレポートウィジェット」設定で「バグレポートボタンを表示」をオフにして、このキーを使うすべてのサイトで非表示にします。どちらの場合も openReport() と attachReport() は引き続き動作します。

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

10レポーターへの事前入力とコンテキストの追加

サインイン後に setUser を呼び出すと、報告者の名前とメールアドレスが入力済みになり、返信やステータス変更の際に報告者へメールが届きます。setReportMetadata は、プランやカートのサイズなど独自のフィールドをすべてのレポートに追加します。レポートの送信時に実行されるため、値は常に最新です。

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

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

11すべてのオプションと関数

key：公開キー（blipit_pk_）。必須。
environment と release：すべてのイベントに表示されます。release はリグレッション検出とソースマップに使われます。environment のデフォルトは production です。
debug: true にすると、SDK の動作が [blipit] で始まる行としてコンソールに出力されます。
sampleRate（0〜1）、ignoreErrors（文字列またはパターン）、beforeSend（イベントを編集するか、null を返して破棄）で送信内容を制御します。autoMuteExtensions（デフォルトで有効）は、ブラウザ拡張機能だけから発生したエラーを破棄します。
webVitals（デフォルトで有効）、replay（{ sessionSampleRate, onErrorSampleRate }）、autoSessionTracking（クラッシュフリー率。release が必要）。
feedbackWidget: false で「不具合を報告」ボタンを非表示にし、position、style、text、color、shortcut を含むオブジェクトを渡すとボタンを変更できます。theme: "light"、"dark"、"auto" でレポーターのテーマを設定します。
user（{ id, name, email }）と company（名前または { id, name }）は、レポーターに入力済みになり、レポートにも追加されます。
endpoint：セルフホストの受信サーバーを使う場合のみ指定します。デフォルトは https://in.blipit.io/api/v1/events です。
関数：captureException(error)、captureMessage(text, level)、setUser、setTag(key, value)、addBreadcrumb({ category, message })、openReport()、attachReport(element)、reportButton(options)、updateWidget(options)、setReportMetadata(fn)、showFeedback()、flush()（キュー内のイベントの送信が終わると解決する Promise を返します）。
ダッシュボードで変更したウィジェット設定は、SDK が最大1時間保持するため、1時間以内にブラウザに反映されます。プライベートウィンドウでは変更がすぐに表示されます。

12動作確認

サイトを再読み込みします。右下に「不具合を報告」ボタンが表示され、1分以内に app.blipit.io の「Web Vitals」にページビューが表示されます。次にテストイベントを送信します。コードから captureMessage を1回呼び出すか、スクリプトタグの場合は以下の行をブラウザのコンソールで実行してください。数秒以内に「イシュー」に表示されます。

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

13ボタンやイベントが表示されない場合

ブラウザのコンソールを開き、[blipit] で始まる行を探してください。debug をオンにすると（init で debug: true、または <Blipit /> に debug）、ボタンが表示されたか、コードでオフにされたか、プロジェクトの設定で非表示になったかを確認できます。
Next.js がブラウザに送るのは名前が NEXT_PUBLIC_ で始まる変数だけなので、NEXT_PUBLIC_BLIPIT_KEY を使います。Vite が送るのは VITE_ 変数だけなので、VITE_BLIPIT_KEY を使います。それ以外の名前ではブラウザでキーが空になり、Blipit は起動しません。
.env や .env.local を追加・変更したら開発サーバーを再起動してください。これらは起動時にのみ読み込まれます。
Vercel などのホスティング先では、プロジェクトの環境変数に同じ変数を追加して再度デプロイします。NEXT_PUBLIC_ と VITE_ の値はビルドに書き込まれるため、後から追加した値は実行中のデプロイには反映されません。
公開キー（blipit_pk_）を使ってください。シークレットキー（blipit_sk_）はブラウザでコンソールエラーとともに拒否されます。シークレットキーがページに置かれたことがある場合は、新しいシークレットキーを作成してください。
Next.js では、すべてのページで動作するよう <Blipit /> をルートの app/layout.tsx（または pages/_app.tsx）に置きます。その他のアプリでは、アプリの描画前にエントリーファイルで init を1回呼び出します。
app.blipit.io の「プロジェクト設定」→「バグレポートウィジェット」で「バグレポートボタンを表示」がオンになっていること、またコードで feedbackWidget: false を渡していないことを確認してください。SDK はプロジェクト設定を最大1時間保持するため、変更はプライベートウィンドウでテストしてください。
広告ブロッカーやプライバシー拡張機能が in.blipit.io をブロックすることがあります。拡張機能をオフにしたプライベートウィンドウで試してください。
サイトが Content Security Policy を送信している場合は、script-src https://blipit.io、connect-src https://in.blipit.io、img-src data:、media-src blob: を許可してください。レポーターエディターは初回クリック時に blipit.io/sdk から読み込まれ、スクリーンショットは data: 画像から描画され、画面録画も in.blipit.io にアップロードされます。debug をオンにすると、ポリシーがスクリーンショットをブロックしたときにコンソールに表示されます。画面録画に音声を入れるには、サイトの Permissions-Policy ヘッダーで microphone=(self) を、画面録画には display-capture=(self) を許可してください。microphone=() の場合、録画は音声なしで動作します。
インストールされているバージョンを npm ls @blipit/browser @blipit/nextjs(または pnpm list @blipit/browser @blipit/nextjs)で確認し、変更履歴と比べてください。pnpm 11 は新しいリリースをインストールする前に 1 日待つ(minimum-release-age)ため、リリース当日の pnpm add は何も知らせずに前のバージョンをインストールします。新しいバージョンをすぐに入れるには pnpm add @blipit/browser@<version> @blipit/nextjs@<version> --config.minimum-release-age=0 を実行します。
それでも解決しない場合は、コンソールの [blipit] の行を添えて support@blipit.io までメールしてください。

任意の Web サイトのガイドをすべて開く

2Next.js と React の手順

Blipit にサインイン済みですか？キーのページを開くと、プロジェクトのキーが入力済みの手順がそのままコピーできます。

自分のキーを表示

インストール npm install @blipit/nextjs

1インストール

npm install @blipit/nextjs

2キーを取得

3キーを .env.local に置く

プロジェクトのルートに .env.local を作成し、ブラウザ用の公開キーと、後述のサーバー側を使う場合はサーバー用のシークレットキーを記述します。ブラウザに届くのは NEXT_PUBLIC_ で始まる名前だけなので、シークレットキーには決してこのプレフィックスを付けないでください。ファイルを保存したら npm run dev を再起動します。本番環境では、ホスティング先に同じ変数を追加し（Vercel の場合：Project、Settings、Environment Variables で Production と Preview に追加）、再度デプロイします。NEXT_PUBLIC_ の値はビルドに書き込まれるため、変数を追加する前に作成したデプロイではキーが空になります。

.env.local

NEXT_PUBLIC_BLIPIT_KEY=blipit_pk_your_public_key
BLIPIT_SECRET_KEY=blipit_sk_your_secret_key

4ブラウザ側

ルートレイアウトにコンポーネントを1回追加します。公開キーは NEXT_PUBLIC_BLIPIT_KEY から読み込まれます。変数が空の場合は何も起動せず、その旨をブラウザのコンソールに表示します。

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

5サーバー側

Next.js 15 以降は、サーバーコンポーネント、ルートハンドラー、サーバーアクションのエラーで onRequestError を呼び出します。instrumentation.ts の1行で Blipit に接続できます。@blipit/nextjs 0.2.1 以降は、middleware.ts があるアプリや Edge ルート（runtime = "edge"）でも同じ1行が動作します。アプリはビルドでき、ミドルウェアと Edge のエラーも報告されます。Next.js 14 には onRequestError がないため、2つ目の例のように各ルートハンドラーとサーバーアクションを withBlipit で囲んでください。エラーを報告してから再度スローし、リダイレクトと notFound() は除外します。BLIPIT_SECRET_KEY はサーバー環境に設定し、決して NEXT_PUBLIC_ にしないでください。

instrumentation.ts

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

app/api/orders/route.ts

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

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

6依存サービスとサーバーの状態

@blipit/nextjs 0.3 からは register もエクスポートして、サーバー起動時に Blipit を開始します。データベースや外部サービスへの呼び出しが依存サービスのページに、サーバーの CPU、メモリ、イベントループがサーバーの状態に記録されます。Edge ランタイムでは何もしません。 Vercel では register が受信リクエストを見られないことがあります。@blipit/nextjs 0.4 からは、ルートハンドラーとサーバーアクションを withBlipit でラップすると、それぞれがデータベースや外部サービスの呼び出しとともに Pulse ページのリクエストになり、応答の後に送信されるので応答は遅れません。

instrumentation.ts

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

app/api/orders/route.ts

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

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

7error.tsx で捕捉されたエラー

error.tsx や global-error.tsx の境界で捕捉されたエラーはブラウザのエラーハンドラーに届かないため、境界から報告してください。どちらのファイルもクライアントコンポーネントです。

app/error.tsx

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

app/global-error.tsx

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

8キーを git に含めない

.gitignore

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

9Content Security Policy

サイトが Content Security Policy を送信している場合は、script-src https://blipit.io(script タグと、初回使用時に blipit.io/sdk/<version>/ から読み込まれるレポーターエディターとリプレイアドオン)、connect-src https://in.blipit.io(イベント、スクリーンショット、画面録画はすべて in.blipit.io に送られます)、img-src data:(スクリーンショットはページの画像から描画されます)、media-src blob:(録画はレポーター内で再生されます)を許可してください。スクリーンショットはページの画像とフォントを読み込み直すため、それらのホストも connect-src に含めてください。含めないと空白になります。style-src の変更は不要です。script タグを使う場合は、厳格なポリシーではインラインスクリプトがブロックされるため、Blipit.init を独自の .js ファイルから呼び出すか、インラインスクリプトに nonce を付けてください。画面録画に音声を入れるには、サイトの Permissions-Policy ヘッダーで microphone=(self) を、画面録画には display-capture=(self) を許可してください。microphone=() の場合、録画は音声なしで動作します。

10ソースマップ（任意）

スタックトレースに縮小化されたバンドルではなくソースが表示されるよう、ビルドステップから各 release のマップをアップロードしてください。

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

11バグレポート：「不具合を報告」ボタン

app/layout.tsx

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

12独自のボタンからレポーターを開く

<BlipitReportButton /> で公式ボタンをどこにでも置けます。サーバーコンポーネントでも使えます。Blipit アイコンと訪問者の言語の「不具合を報告」を表示し、レポーターを開きます。独自のデザインにしたい場合、openReport を呼び出すコンポーネントはクライアントコンポーネントである必要があるため、ファイルの先頭に "use client" を記述します。<Blipit /> はあらかじめ app/layout.tsx に置いておく必要があります。Next.js を使わない React アプリでは、ボタンを @blipit/nextjs/react から、openReport を @blipit/browser からインポートします。

app/header.tsx

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

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

Next.js を使わない React

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

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

app/report-issue.tsx

"use client";

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

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

React (@blipit/browser)

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

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

Next.js アプリ：ヘッダーのカスタム Report Issue ボタンで Blipit のレポーターが開いた状態。

13デフォルトのボタンを隠す

app/layout.tsx

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

14レポーターへの事前入力とコンテキストの追加

app/blipit-user.tsx

"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動作確認

アプリを再読み込みします。右下に「不具合を報告」ボタンが表示され、1分以内に app.blipit.io の「Web Vitals」にページビューが表示されます。次に captureMessage を呼び出すボタンか例外をスローするボタンを追加してクリックすると、数秒以内に「イシュー」にイベントが表示されます。

tsx

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

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

16ボタンやイベントが表示されない場合

ブラウザのコンソールを開き、[blipit] で始まる行を探してください。debug をオンにすると（init で debug: true、または <Blipit /> に debug）、ボタンが表示されたか、コードでオフにされたか、プロジェクトの設定で非表示になったかを確認できます。
Next.js がブラウザに送るのは名前が NEXT_PUBLIC_ で始まる変数だけなので、NEXT_PUBLIC_BLIPIT_KEY を使います。Vite が送るのは VITE_ 変数だけなので、VITE_BLIPIT_KEY を使います。それ以外の名前ではブラウザでキーが空になり、Blipit は起動しません。
.env や .env.local を追加・変更したら開発サーバーを再起動してください。これらは起動時にのみ読み込まれます。
Vercel などのホスティング先では、プロジェクトの環境変数に同じ変数を追加して再度デプロイします。NEXT_PUBLIC_ と VITE_ の値はビルドに書き込まれるため、後から追加した値は実行中のデプロイには反映されません。
公開キー（blipit_pk_）を使ってください。シークレットキー（blipit_sk_）はブラウザでコンソールエラーとともに拒否されます。シークレットキーがページに置かれたことがある場合は、新しいシークレットキーを作成してください。
Next.js では、すべてのページで動作するよう <Blipit /> をルートの app/layout.tsx（または pages/_app.tsx）に置きます。その他のアプリでは、アプリの描画前にエントリーファイルで init を1回呼び出します。
app.blipit.io の「プロジェクト設定」→「バグレポートウィジェット」で「バグレポートボタンを表示」がオンになっていること、またコードで feedbackWidget: false を渡していないことを確認してください。SDK はプロジェクト設定を最大1時間保持するため、変更はプライベートウィンドウでテストしてください。
広告ブロッカーやプライバシー拡張機能が in.blipit.io をブロックすることがあります。拡張機能をオフにしたプライベートウィンドウで試してください。
サイトが Content Security Policy を送信している場合は、script-src https://blipit.io、connect-src https://in.blipit.io、img-src data:、media-src blob: を許可してください。レポーターエディターは初回クリック時に blipit.io/sdk から読み込まれ、スクリーンショットは data: 画像から描画され、画面録画も in.blipit.io にアップロードされます。debug をオンにすると、ポリシーがスクリーンショットをブロックしたときにコンソールに表示されます。画面録画に音声を入れるには、サイトの Permissions-Policy ヘッダーで microphone=(self) を、画面録画には display-capture=(self) を許可してください。microphone=() の場合、録画は音声なしで動作します。
インストールされているバージョンを npm ls @blipit/browser @blipit/nextjs(または pnpm list @blipit/browser @blipit/nextjs)で確認し、変更履歴と比べてください。pnpm 11 は新しいリリースをインストールする前に 1 日待つ(minimum-release-age)ため、リリース当日の pnpm add は何も知らせずに前のバージョンをインストールします。新しいバージョンをすぐに入れるには pnpm add @blipit/browser@<version> @blipit/nextjs@<version> --config.minimum-release-age=0 を実行します。
それでも解決しない場合は、コンソールの [blipit] の行を添えて support@blipit.io までメールしてください。

Next.js と React のガイドをすべて開く

2Node.js の手順

Blipit にサインイン済みですか？キーのページを開くと、プロジェクトのキーが入力済みの手順がそのままコピーできます。

自分のキーを表示

インストール npm install @blipit/node

1インストール

npm install @blipit/node

2キーを取得

3キーを環境変数に保管する

Node ではシークレットキーを使います。キーはコードではなく環境変数に置いてください。ローカルでは Node 20.6 以降が --env-file で読み込む .env ファイルに、本番環境ではホスティング先の環境変数またはシークレット設定（Fly secrets、Docker、systemd、Render、Vercel）に置きます。変更後はプロセスを再起動してください。

.env

BLIPIT_SECRET_KEY=blipit_sk_your_secret_key

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

4キーを git に含めない

.gitignore

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

5最初に初期化

アプリより先に実行されるファイルにこれを置き、最初にインポートしてください。

instrument.mjs

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、NestJS

ルートの後にハンドラーを追加すると、処理済み・未処理のエラーの両方が、リクエストのメソッド、URL、ユーザーエージェント付きで Blipit に届きます。 Koa、Hono、NestJS はそれぞれ 1 行です。Koa のミドルウェアは最初に、Hono のものはルートの前に置きます。ステータス 500 以上のエラーを報告します。これにより、リクエストは Pulse ページで URL ごとではなく GET /users/:id のようにルート単位で表示されます。

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

Fastify

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

Koa

app.use(Blipit.koaMiddleware());

Hono

app.use(Blipit.honoMiddleware());

NestJS

app.useGlobalInterceptors(Blipit.nestInterceptor());

7サーバーレス: AWS Lambda と Vercel

サーバーレス環境は応答した直後に関数を一時停止し、Lambda は Node の HTTP サーバーを動かしません。そのためハンドラーをラップします。wrapHandler はリクエストを記録し (API Gateway、関数 URL、ロードバランサーのイベントはメソッドとルートで、その他のイベントは関数名で)、エラーを報告し、ハンドラーが戻る前にすべてを送信します。待つのは送るものがあるときだけで、最大 2 秒です。traceRequest は Request を受け取るあらゆるハンドラーで同じことを行います。Vercel ではデータは応答の後に waitUntil で送られるため、何も遅れません。Next.js では withBlipit を使います (Next.js ガイドを参照)。

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

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

traceRequest

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

8手動キャプチャ、ログ、ログイン試行

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

9依存サービスとサーバーの状態

0.2 からは、データベースや外部サービスへの呼び出しと、サーバーの CPU、メモリ、イベントループも記録します。依存サービスとサーバーの状態のガイドを参照してください。tracesSampleRate、tracing: false、metrics: false で制御できます。

10動作確認

app.blipit.io で「イシュー」を開きます。数秒以内に最初のイベントがイシューにまとめられて表示され、担当者にメールが届きます。

Blipit.captureMessage("Hello from Node");

Node.js のガイドをすべて開く

2Python の手順

Blipit にサインイン済みですか？キーのページを開くと、プロジェクトのキーが入力済みの手順がそのままコピーできます。

自分のキーを表示

インストール pip install blipit

1インストール

pip install blipit

2起動時に初期化

Django では settings.py の先頭に、Flask や FastAPI ではアプリを作成する前に置きます。キーはプロジェクトのキーのページにあります。キーが空の場合、init は例外を投げずに警告をログに出して False を返すため、キーがなくてもアプリの起動が止まることはありません。

python

import blipit

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

3キーを取得

4キーを環境変数に保管する

この SDK は、プロジェクトの「APIキー」ページにある公開キーで送信します。キーは環境変数に置いてください。ローカルではフレームワークまたは python-dotenv が読み込む .env ファイルに、本番ではホストの設定に置きます。シークレットキーはログイン試行を送信する場合にのみ使います。

.env

BLIPIT_KEY=blipit_pk_your_public_key

python

import os
import blipit

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

5キーを git に含めない

.gitignore

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

6手動キャプチャとログイン試行

ログイン試行にはシークレットキーが必要です。サーバーでは公開キーではなくシークレットキーで初期化してください。そうしないと受信側が 403 security_needs_secret_key で拒否します。Scale プラン。

python

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動作確認

app.blipit.io で「イシュー」を開きます。数秒以内に最初のイベントがイシューにまとめられて表示され、担当者にメールが届きます。

python

blipit.capture_message("Hello from Python")

Python のガイドをすべて開く

2PHP と Laravel の手順

Blipit にサインイン済みですか？キーのページを開くと、プロジェクトのキーが入力済みの手順がそのままコピーできます。

自分のキーを表示

インストール composer require blipit/blipit

1インストール

composer require blipit/blipit

2起動時に初期化

素の PHP：リクエストを処理する前に、フロントコントローラーの先頭で呼び出します。Laravel では、次の手順のとおり設定から Blipit が起動します。キーはプロジェクトのキーのページにあります。キーが空の場合、init は例外を投げずにエラーログに警告を書き込み、false を返します。

php

use Blipit\Blipit;

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

3キーを取得

4キーを環境変数に保管する

この SDK は公開キーで送信します。Laravel：キーを .env と config/services.php に追加します。Blipit のサービスプロバイダーは自動で検出され、その設定から Blipit を起動するため、ほかに必要なものはありません。設定をキャッシュすると、アプリのコードで env() は何も返さなくなるため、値は config 経由で読み取ってください。素の PHP：サーバーの環境から getenv() でキーを読み取ります。

.env

BLIPIT_KEY=blipit_pk_your_public_key

config/services.php

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

5キーを git に含めない

.gitignore

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

6Laravel と Symfony

Laravel：例外ハンドラーが報告する例外はすべて Blipit に届くため、404 やバリデーションエラーは含まれません。クエリ、ログ行、HTTP クライアントの呼び出しはブレッドクラムになり、キューのジョブはトレースされます。bootstrap/app.php にすでにある Blipit::captureException の行は残しても構いません。同じ例外が二重に送信されることはありません。Symfony：config/services.yaml にリスナーを登録し、public/index.php と bin/console の早い段階で Blipit::init を呼び出します。

config/services.yaml

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 }

7手動キャプチャとログイン試行

php

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動作確認

app.blipit.io で「イシュー」を開きます。数秒以内に最初のイベントがイシューにまとめられて表示され、担当者にメールが届きます。

php

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

PHP と Laravel のガイドをすべて開く

2Ruby と Rails の手順

Blipit にサインイン済みですか？キーのページを開くと、プロジェクトのキーが入力済みの手順がそのままコピーできます。

自分のキーを表示

インストール gem install blipit

1Gemfile

ruby

gem "blipit"

2起動時に初期化

Rails：config/initializers/blipit.rb に置きます。Blipit が Rack ミドルウェア、Active Job、Rails.error の報告を自動で追加するため、ほかにインストールするものはありません。Rack と Sinatra のアプリでは use Blipit::Rack を追加します。スクリプト：コードが実行される前に呼び出します。キーはプロジェクトのキーのページにあります。キーが空の場合、init は例外を投げずに警告を表示して false を返します。

ruby

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

3キーを取得

4キーを Rails credentials に保管する

この SDK は公開キーで送信します。Rails では暗号化された credentials に保存してイニシャライザーで読み取り、それ以外では環境変数を使ってください。

bin/rails credentials:edit

credentials

blipit:
  key: blipit_pk_your_public_key

config/initializers/blipit.rb

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

5キーを git に含めない

.gitignore

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

6手動キャプチャとログイン試行

ruby

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動作確認

app.blipit.io で「イシュー」を開きます。数秒以内に最初のイベントがイシューにまとめられて表示され、担当者にメールが届きます。

ruby

Blipit.capture_message("Hello from Rails")

Ruby と Rails のガイドをすべて開く

2Go の手順

Blipit にサインイン済みですか？キーのページを開くと、プロジェクトのキーが入力済みの手順がそのままコピーできます。

自分のキーを表示

インストール go get github.com/blipit-io/blipit-go

1インストール

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

2main で初期化

Init が panic することはありません。キーまたはプロジェクト ID が空の場合はエラーを返し、Blipit はオフのままになります。終了せずに、そのエラーをログに出してください。

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

3キーを取得

4キーを環境変数に保管する

この SDK は公開キーとプロジェクト ID で送信します。ホスティング先、systemd ユニット、または docker run -e で設定した環境変数から読み込みます。

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

5キーを git に含めない

.gitignore

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

6手動キャプチャとログイン試行

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 と net/http

main や任意の goroutine の先頭で defer blipit.Recover() を使うと、panic をスタック付きで報告し、送信を済ませてから再び panic します。提供するハンドラーを blipit.Handler で包むと、panic をリクエスト付きで報告し、各リクエストを ServeMux のパターン名で Pulse 上で計測します。Gin、Echo、Fiber では、パッケージの README にある StartRequest、SetRoute、End を使います。

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

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

8動作確認

app.blipit.io で「イシュー」を開きます。数秒以内に最初のイベントがイシューにまとめられて表示され、担当者にメールが届きます。

blipit.CaptureMessage("Hello from Go")

Go のガイドをすべて開く

2Java と Kotlin の手順

Blipit にサインイン済みですか？キーのページを開くと、プロジェクトのキーが入力済みの手順がそのままコピーできます。

自分のキーを表示

インストール com.github.blipit-io:blipit-java

1リポジトリと依存関係を追加

build.gradle.kts

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

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

pom.xml

<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>

2起動時に初期化

Spring Boot：main の先頭（SpringApplication.run の前）、または @Configuration クラスの @PostConstruct メソッド内で呼び出します。どのスレッドで捕捉されなかった例外も、アプリが止まる前にディスク上のキューに書き込まれてから送信されるため、ネットワークが落ちていてもクラッシュは報告されます。残ったものは次回の起動時に送られます。

java

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

3キーを取得

4キーを環境変数に保管する

この SDK は公開キーとプロジェクト ID で送信します。環境変数から読み込むか、Spring Boot では環境変数から値を設定した application.properties から読み込みます。

application.properties

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

java

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

5キーを git に含めない

.gitignore

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

6手動キャプチャとログイン試行

java

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動作確認

app.blipit.io で「イシュー」を開きます。数秒以内に最初のイベントがイシューにまとめられて表示され、担当者にメールが届きます。

java

Blipit.captureMessage("Hello from Java");

Java と Kotlin のガイドをすべて開く

2.NET の手順

Blipit にサインイン済みですか？キーのページを開くと、プロジェクトのキーが入力済みの手順がそのままコピーできます。

自分のキーを表示

インストール dotnet add package Blipit

1インストール

dotnet add package Blipit

2起動時に初期化

返されたハンドルはプロセスの存続中保持してください。両方の値はプロジェクトのキーページにあります。

Program.cs

using Blipit;

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

3キーを取得

4キーを構成に保管する

この SDK は公開キーとプロジェクト ID で送信します。開発中はユーザーシークレットに、本番環境では環境変数（Blipit__Key と Blipit__Project）に保管し、構成から読み込みます。

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

Program.cs

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

5キーを git に含めない

.gitignore

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

6ASP.NET Core とログ

追加するものはありません。Program.cs の先頭で Init を呼び出すだけです。エンドポイント、コントローラー、ミドルウェアからの例外は、UseExceptionHandler が処理した場合も含めてリクエスト付きで報告されます。TracesSampleRate を設定すると、サンプリングされた各リクエストがルートごとに Pulse で計測されます。BlipitLoggerProvider は Information 以上をブレッドクラムに、Error 以上をイベントにします。

Program.cs

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

7手動キャプチャとログイン試行

csharp

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動作確認

app.blipit.io で「イシュー」を開きます。数秒以内に最初のイベントがイシューにまとめられて表示され、担当者にメールが届きます。

csharp

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

.NET のガイドをすべて開く

2iOS、Android、Flutter、React Native の手順

Blipit にサインイン済みですか？キーのページを開くと、プロジェクトのキーが入力済みの手順がそのままコピーできます。

自分のキーを表示

インストール one package per platform

1キーを取得

2React Native

このパッケージは、ネイティブクラッシュ用に Blipit 独自の Android と iOS の SDK を起動する小さなネイティブモジュールをリンクします。その Gradle ファイルが JitPack リポジトリを自動で追加します。レンダリングエラーも報告されるよう、ルートコンポーネントを包んでください。

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

tsx

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 の runApp を Blipit.init に置き換えます。プラグインがネイティブクラッシュ用に Blipit 独自の Android と iOS の SDK を起動し、Flutter フレームワークのエラーと捕捉されなかった非同期エラーは自動で報告されます。

flutter pub add blipit_flutter

main.dart

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 と macOS（Swift Package）

Xcode で File、Add Package Dependencies を選んでリポジトリの URL を入力するか、Package.swift に追加してターゲットに BlipitSwift を加えます。CocoaPods では BlipitSwift の pod を使います。その後、起動時に start を一度呼び出します。キーまたはプロジェクト ID が空の場合、start はアプリをクラッシュさせずに警告を表示して false を返します。

Package.swift

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

Podfile

pod "BlipitSwift", "~> 0.6.0"

swift

import BlipitSwift

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

5Android

settings.gradle.kts の repositories に JitPack を、app モジュールに依存関係を追加し、Application.onCreate で init を呼び出します。

settings.gradle.kts

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

build.gradle.kts (app)

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

kotlin

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"
        }
    }
}

6アプリでのキーの置き場所

アプリには公開キーとプロジェクト ID が組み込まれますが、問題ありません。公開キーはイベントの送信しかできないためです。シークレットキーは決してアプリに入れないでください。リポジトリに含めないよう、ビルド時に渡してください。

Flutter

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

main.dart

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

Expo (.env)

EXPO_PUBLIC_BLIPIT_KEY=blipit_pk_your_public_key
EXPO_PUBLIC_BLIPIT_PROJECT=12

Android build.gradle.kts

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

iOS xcconfig

BLIPIT_KEY = blipit_pk_your_public_key

7アプリでのバグレポート

独自のメニュー項目から showReport を呼ぶか、フローティングの「バグを報告」ボタンを有効にします。レポーターはまず問題の見せ方を尋ねます：スクリーンショットを撮る、画面を録画する（iOS）、または説明だけ。スクリーンショットは全画面で開き、ツールは画像の上下に表示され、画像に重なりません。ピンチまたはダブルタップで拡大し、問題に印を付け、タイトルと何が起きたかを入力して送信します。レポートはデバイス情報付きで「バグレポート」に届きます。React Native ではスクリーンショットに react-native-view-shot が必要です。

React Native

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

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

Blipit.showReport();

Flutter

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

Blipit.showReport();

iOS

Blipit.showReportButton()

Blipit.showReport()

Android

Blipit.showReportButton()

Blipit.showReport()

8不具合のある画面から報告

プロフィールなどのメニューに置いた「不具合を報告」は、問題ではなくメニューを写してしまいます。画面そのものから始める方法をオンにしてください。いずれも既定でオフで、権限の確認は出ません。shakeToReport は端末を振ると報告画面を開きます。screenshotToReport は通常のスクリーンショットの後に「この画面で不具合を報告しますか？」と尋ね、Blipit 自身のキャプチャを添付します（iOS と Android 14 以降）。twoFingerReport は 2 本指で約 1 秒長押しすると開き、アプリ自身のタッチは妨げません。reportAfterCrash はクラッシュ後の最初の起動で何をしていたかを尋ね、報告をそのクラッシュにひも付けます。既定でオンの screenPicker は、メニューから報告を開いた人が、不具合が最近のどの画面にあるかを選べるようにします。スナップショットは端末のメモリにだけ置かれ、選んだものだけがアップロードされます。Jetpack Compose と SwiftUI のアプリは setScreen で画面に名前を付けます。

Android

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

iOS

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

React Native

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

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

Flutter

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()))),
);

9テスター専用のフローティングボタン

app.blipit.io でプロジェクトを開き、不具合報告ボタンの設定で「スマートフォンアプリのフローティングボタン」を「全員」または「テスターのみ」にし、テスターごとにユーザー ID かメールアドレスを入力します。アプリは setUser で設定した人を送り、Blipit は「はい」か「いいえ」だけを返すので、テスターのリストがアプリに含まれることはありません。showReportButton（React Native と Flutter では showButton）を呼べば、これまでどおり全員にボタンが表示されます。

Android

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

iOS

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

React Native

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

Flutter

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

10止まったままのアプリを検知する

クラッシュしない障害もあります。スプラッシュ画面が回り続ける、サインインが戻ってこない、などです。waitForReady をオンにし、最初に使える画面が表示されたら reportReady を呼んでください。サインインなどのフローを startFlow と endFlow で囲み、flowStep で手順を記録します。時間内に完了しないと、Blipit が最後の手順とそこまでの経過を付けて「停止」の Issue を作成します。数えるのは画面に表示されている時間だけで、制限時間は Blipit が決めます。名前は書いたとおりに送信されるため、固定の名前を使い、メールアドレスなどのユーザーデータは決して使わないでください。

Android

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")

iOS

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")

React Native

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

Flutter

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動作確認

app.blipit.io で「イシュー」を開きます。数秒以内に最初のイベントがイシューにまとめられて表示され、担当者にメールが届きます。

iOS、Android、Flutter、React Native のガイドをすべて開く

2Odoo の手順

Blipit にサインイン済みですか？キーのページを開くと、プロジェクトのキーが入力済みの手順がそのままコピーできます。

自分のキーを表示

インストール Blipit Error Monitoring on the Odoo Apps store

1モジュールをインストール

お使いの Odoo バージョン用に apps.odoo.com からダウンロードし（blipit_monitor、無料）、通常のモジュールと同様にインストールします：アプリ → アプリリストを更新 → Blipit Error Monitoring をインストール。Odoo Online はサードパーティアプリを許可していません。Odoo.sh とオンプレミスは可能です。

2キーを取得

3接続

設定 → Blipit：プロジェクトのシークレットキーを貼り付け、利用規約とモジュールライセンスへの同意にチェックを入れ、「保存」を押します。自動で接続され、「<project> に接続済み」と表示されます。公開キーや、既に別のデータベースに紐付いたキーは理由付きで拒否されます。

4担当者

メールを受け取る人を選びます。複数の会社がある場合は会社ごとに設定できます。各担当者はプランのシートを1つ消費し、保存時に Blipit が人数を確認します。

5Odoo からのバグレポート

このモジュールが Odoo に「不具合を報告」ボタンを自動で追加するため、コードを書く必要はありません。「設定」→「Blipit」→「Bug reports」→「Shown to」で、表示する対象を「Internal users」「Website visitors」「Both」「Nobody」から選び、必要に応じて内部ユーザーを1つのグループに限定できます。レポートには、その人が開いていたモデル、レコード、フィールドが含まれ、サインイン中のユーザーの名前とメールアドレスが入力済みになります。位置、色、テキスト、スタイルは app.blipit.io の「プロジェクト設定」→「バグレポートウィジェット」に従います。すべてのオプションはバグレポートボタンのガイドを参照してください。

6動作確認

Odoo で Blipit アプリを開きます。次のエラーがそこと担当者の受信トレイに表示されます。すぐに確認するには「Blipit から更新」をクリックしてください。

Odoo のガイドをすべて開く

Blipit をインストール

1スタックを選ぶ

2任意の Web サイト の手順

1キーを取得

2npm で

3バンドラーなし：script タグ1つ

4キーを git に含めない

5ユーザーを Blipit に伝える（任意）

6React、Vue、Angular、Svelte：捕捉したエラーを報告する

7バグレポート：「不具合を報告」ボタン

8独自のボタンからレポーターを開く

9デフォルトのボタンを隠す

10レポーターへの事前入力とコンテキストの追加

11すべてのオプションと関数

12動作確認

13ボタンやイベントが表示されない場合

2Next.js と React の手順

1インストール

2キーを取得

3キーを .env.local に置く

4ブラウザ側

5サーバー側

6依存サービスとサーバーの状態

7error.tsx で捕捉されたエラー

8キーを git に含めない

9Content Security Policy

10ソースマップ（任意）

11バグレポート：「不具合を報告」ボタン

12独自のボタンからレポーターを開く

13デフォルトのボタンを隠す

14レポーターへの事前入力とコンテキストの追加

15動作確認

16ボタンやイベントが表示されない場合

2Node.js の手順

1インストール

2キーを取得

3キーを環境変数に保管する

4キーを git に含めない

5最初に初期化

6Express、Fastify、Koa、Hono、NestJS

7サーバーレス: AWS Lambda と Vercel

8手動キャプチャ、ログ、ログイン試行

9依存サービスとサーバーの状態

10動作確認

2Python の手順

1インストール

2起動時に初期化

3キーを取得

4キーを環境変数に保管する

5キーを git に含めない

6手動キャプチャとログイン試行

7動作確認

2PHP と Laravel の手順

1インストール

2起動時に初期化

3キーを取得

4キーを環境変数に保管する

5キーを git に含めない

6Laravel と Symfony

7手動キャプチャとログイン試行

8動作確認

2Ruby と Rails の手順

1Gemfile

2起動時に初期化

3キーを取得

4キーを Rails credentials に保管する

5キーを git に含めない

6手動キャプチャとログイン試行

7動作確認

2Go の手順

1インストール

2main で初期化

3キーを取得

4キーを環境変数に保管する

5キーを git に含めない

6手動キャプチャとログイン試行

7panic と net/http

8動作確認

2Java と Kotlin の手順

1リポジトリと依存関係を追加

2任意の Web サイトの手順