Sentry

Sentry Pages Plugin は、Pages Functions の実行チェーンのうち、この Plugin より下で発生した例外をすべてキャプチャして記録します。そのため、アプリケーションのルートにある functions/_middleware.ts に、最初の Plugin としてインストールすることをおすすめします。

インストール

npm i @cloudflare/pages-plugin-sentry

yarn add @cloudflare/pages-plugin-sentry

pnpm add @cloudflare/pages-plugin-sentry

bun add @cloudflare/pages-plugin-sentry

使い方

import sentryPlugin from "@cloudflare/pages-plugin-sentry";

export const onRequest: PagesFunction = sentryPlugin({
	dsn: "https://sentry.io/welcome/xyz",
});

この Plugin は Toucan ↗ を使います。Toucan が受け取れるオプションは、Toucan の README で確認 ↗ してください。context、request、event は自動で設定されるため、手動で設定しないでください。

DSN ↗ を環境変数または KV で保持している場合は、次のようにアクセスできます。

import sentryPlugin from "@cloudflare/pages-plugin-sentry";

export const onRequest: PagesFunction<{
	SENTRY_DSN: string;
}> = (context) => {
	return sentryPlugin({ dsn: context.env.SENTRY_DSN })(context);
};

import sentryPlugin from "@cloudflare/pages-plugin-sentry";

export const onRequest: PagesFunction<{
	KV: KVNamespace;
}> = async (context) => {
	return sentryPlugin({ dsn: await context.env.KV.get("SENTRY_DSN") })(context);
};

追加のコンテキスト

Sentry に追加のコンテキスト（ユーザー情報や追加ログなど）を設定する必要がある場合は、実行チェーンで Plugin より下にある任意の Function で data.sentry インスタンスを使います。

たとえば、data.sentry にアクセスして、次のようにユーザー情報を設定できます。

import type { PluginData } from "@cloudflare/pages-plugin-sentry";

export const onRequest: PagesFunction<unknown, any, PluginData> = async ({
	data,
	next,
}) => {
	// Authenticate the user from the request and extract user's email address
	const email = await getEmailFromRequest(request);

	data.sentry.setUser({ email });

	return next();
};

機能の一覧は、Toucan のドキュメント ↗ にあります。