Next.js + Vercel + Supabase構成の個人開発サービスで、本番環境だけ500エラーが発生した。
ローカルでは再現せず、最終的な原因はVercel側の環境変数が未設定だったことだった。ただ、それ以上に気になったのは、コード側で使っていたTypeScriptのNon-null assertion(!)が、原因の特定を遅らせていたことだった。
概要
// このような書き方をしていた
const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!;
const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!;
!は型チェック上「nullやundefinedではない」と伝えるための記法だが、実行時の値の存在は保証しない。環境変数が実際にundefinedだった場合、型エラーにならず素通りしてしまい、その後のSupabaseクライアント初期化処理が内部でクラッシュしていた。
対応としては、明示的な存在チェックを入れるFail-Fastパターンに修正した。
const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
if (!supabaseUrl || !supabaseKey) {
throw new Error('Supabase environment variables are missing in server/client!');
}
これにより、環境変数が欠落している場合は起動時点で明確なエラーとともに処理が止まるようになり、原因特定にかかる時間を短縮できる構造になった。
学んだこと
- TypeScriptのNon-null assertion(
!)は型チェック上の約束であり、実行時の値の存在を保証しない - 環境変数のように外部要因で欠落しうる値には
!を使わない方が安全 - 本番障害はコードだけでなく、デプロイ環境側の設定差分も併せて疑う必要がある
調査の経緯やローカルで再現しなかった理由、障害対応をきっかけに進めた運用改善(CI/CD・障害記録の整備等)については、詳しくはZennにまとめている。