プラットフォーム別インストール

Next.js と React

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

@blipit/nextjs を使うと、レイアウトのコンポーネント1つでブラウザエラー、Web Vitals、セッションリプレイが、instrumentation.ts の1行でサーバーコンポーネント、ルートハンドラー、サーバーアクションのエラーが取得できます。通常の React アプリは @blipit/browser を使います。

1インストール

npm install @blipit/nextjs

2ブラウザ側

ルートレイアウトにコンポーネントを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>
  );
}

3サーバー側

Next.js 15 以降は、サーバーコンポーネント、ルートハンドラー、サーバーアクションのエラーで onRequestError を呼び出します。1行で Blipit に接続できます。BLIPIT_SECRET_KEY はサーバー環境に設定し、決して NEXT_PUBLIC_ にしないでください。

instrumentation.ts

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

4Content Security Policy

アプリで CSP を設定している場合、connect-src に https://in.blipit.io を追加してください。SDK はコードと一緒にバンドルされるため、script-src に新しいホストや nonce は不要です。

5ソースマップ（任意）

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

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

6動作確認

例外を投げるボタンを追加するか、ブラウザコンソールでこれを実行します。app.blipit.io で「イシュー」を開きます。数秒以内に最初のイベントがイシューにまとめられて表示され、担当者にメールが届きます。

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

知っておくと便利

Next.js を使わない通常の React：npm install @blipit/browser を実行し、レンダリング前に Blipit.init を呼び出します。「任意の Web サイト」を参照してください。
environment と release を省略すると、サーバーでは VERCEL_ENV と VERCEL_GIT_COMMIT_SHA がデフォルトになります。
既に Sentry SDK を使っていますか？@sentry/nextjs は DSN https://<public key>@in.blipit.io/<project id> でそのまま動作します。ソースマップを Sentry にアップロードする withSentryConfig は省略してください。

お困りですか？support@blipit.io までメールしてください。各プロジェクトのキーと正確な DSN は app.blipit.io の「APIキー」にあります。