vercelで”This Edge Function has crashed.”というエラーの対処方法について

こんにちは、フルスタックエンジニアのryuです。

今回の記事では、VercelでNext.jsなどのアプリをデプロイした際に、This Edge Function has crashed. と表示された場合の原因の調べ方と対処方法を解説します。

ローカル環境では正常に動いていたのに、Vercelへデプロイした途端にエラーになると困りますよね。しかも、このエラーメッセージだけを見ても、具体的にどこを修正すればよいのか分かりません。

このような場合に大切なのは、エラー画面だけを見て原因を予想するのではなく、Vercelのログを確認することです。

私の環境では、環境変数がVercel側で正しく読み込まれていなかったことが原因でした。ただし、同じエラーでもコード上の例外や外部APIへの接続失敗など、別の原因で発生することがあります。

この記事では、IT初心者の方でも順番に確認できるように、実際の切り分け方法を紹介していきます。

VercelでThis Edge Function has crashed.と表示された¶

Vercelのエラーの状況¶

VercelでNext.jsをデプロイし、アプリを表示したら、以下のような画面が出ました。

「This Edge Function has crashed.」というエラーが出ていた。

このエラーを翻訳すると、このエッジ機能はクラッシュしました、という意味になります。

ただ、ここで少し困るのが、この画面だけでは何が原因でクラッシュしたのか分からないことです。

Vercel上で動くFunctionでは、コードの実行中に例外が発生したり、必要な設定が不足していたりすると、正常にレスポンスを返せないことがあります。そのため、まずは実際にアプリが出力しているログを確認する必要があります。

This Edge Function has crashed.が出たらログを確認する¶

Vercelのログから原因を探す¶

この「This Edge Function has crashed.」だけでは、どのように対処すれば良いのかが分かりませんでした。しかし、アプリのログにしっかりと原因が記載されていました。

エラーを対処するには、Vercelのログをしっかりと確認しましょう。

現在のVercelでは、プロジェクトのダッシュボードからLogsを開くことで、Runtime Logsを確認できます。画面の構成はアップデートによって変わることがありますが、まずログを見るという考え方は同じです。

ログを確認するためには、タブの[Logs]をクリックします。

次に、ログが表示されている、左側のLevelを”Error”に変更します。

すると、ログの中にエラーの原因となるログが表示されます。

私の環境の場合は、環境変数が読み込めておらずエラーになっていました。

修正をして、再度デプロイするとアプリが正常に表示されるようになりました。

ここで大切なのは、エラー画面に表示されている文言をそのまま検索するだけではなく、Runtime Logsの中にある具体的なエラーメッセージを確認することです。

たとえば、ReferenceErrorやTypeError、外部サービスへの接続エラーなどが表示されていれば、修正する場所をかなり絞り込めます。

ログを見るときに確認したい項目¶

ログを開いたら、最初からすべての文字を細かく読む必要はありません。まずは、エラーが発生した時間とURL、ステータスコード、エラーメッセージを確認してみましょう。

代表的な確認項目をまとめると、次のようになります。

特に複数のログが表示されている場合、関係のないログまで追ってしまうと原因を見つけにくくなります。

一度エラーが出るページへアクセスし、その直後のログを確認すると探しやすいです。

環境変数が原因の場合の対処方法¶

ローカルでは動くのにVercelでは動かない場合¶

私の場合は、環境変数が原因でした。

ローカルでは.env.localなどから値を読み込めていても、そのファイルに書かれた値がVercelへ自動的に登録されるとは限りません。そのため、Vercel側にも必要な環境変数を設定する必要があります。

たとえば、アプリで次のように環境変数を利用しているとします。

const apiUrl = process.env.API_URL;

if (!apiUrl) {
  throw new Error("API_URL is not defined");
}

ローカル環境では、次のように設定しているかもしれません。

API_URL=https://example.com/api

しかし、Vercel側にAPI_URLが設定されていなければ、実行時には値を取得できません。

このようなケースでは、VercelのProject SettingsからEnvironment Variablesを確認し、変数名と値が正しく登録されているかを確認します。

【関連記事】Linuxで環境変数そのものについて確認したい方は、exportコマンドの使い方を解説！環境変数の設定をしようも参考にしてください。

ProductionとPreviewの違いにも注意する¶

環境変数を登録しているのに動かない場合は、適用する環境が合っているかも確認してみてください。

VercelではProductionやPreviewなど、環境ごとに環境変数を設定できます。Previewには値が入っているのにProductionには入っていない、という状態であれば、本番環境だけエラーになることがあります。

また、環境変数を変更しても、すでに作成済みのDeploymentには新しい値が反映されません。

環境変数を追加・変更した後は、新しくデプロイするか再デプロイするところまで行いましょう。

環境変数以外で確認したい原因¶

コード上で例外が発生していないか¶

環境変数に問題がなければ、次はコードそのものを確認します。

たとえば、存在しない値のプロパティへアクセスすると、JavaScriptではエラーになる場合があります。

const user = undefined;

console.log(user.name);

このようなコードがFunctionの実行中に通れば、処理を最後まで実行できません。

ローカル環境では偶然その処理を通っていなかった、Productionだけデータの内容が違った、ということもあります。そのため、ログに表示されたファイル名やエラー内容を手がかりに、該当する処理を確認しましょう。

外部APIやデータベースへの接続を確認する¶

Next.jsのアプリでは、Functionから外部APIやデータベースへ接続することも多いと思います。

接続先のURLが間違っていたり、APIキーが不足していたり、接続先からエラーが返ってきたりすると、Function側の処理が失敗する可能性があります。

APIが正常に応答しているか手元から確認したい場合は、curlコマンドも便利です。

curl -i https://example.com/api

HTTPステータスやレスポンスを確認できるため、Vercel側の問題なのか、接続先の問題なのかを切り分ける材料になります。

【関連記事】curlの基本から確認したい方は、curlコマンドの使い方解説！Webサーバーなどとデータの通信を行うコマンドをご覧ください。

ビルドエラーと実行時エラーを分けて考える¶

Vercelで問題が起きたときは、ビルド時のエラーなのか、デプロイ後の実行時エラーなのかを分けて考えると分かりやすいです。

ビルド自体が失敗しているのであればBuild Logsを確認します。一方、デプロイは成功しているのにページへアクセスするとエラーになる場合は、Runtime Logsを確認するのが基本です。

今回のように、デプロイ後のアプリを開いたときにFunctionが失敗している場合は、まずRuntime Logsから確認してみてください。

Vercelのエラーを切り分ける手順¶

ここまでの内容を、実際にエラーが発生したときの順番に整理します。

難しく考える必要はありません。ログを確認し、原因候補を一つずつ潰していくだけです。

エラー対応では、いきなりコードを大きく変更するよりも、一つずつ原因を切り分ける方が結果的に早く解決できます。

私自身も、Vercelのエラー画面だけを見ていたときは原因が分かりませんでした。しかし、ログを確認したことで環境変数の問題だと分かり、修正できました。

【関連記事】Next.jsを別の環境へデプロイする流れも知りたい方は、AWSのLightsailを使ってNext.jsをデプロイする方法も参考にしてください。

インフラのエラー対応はLinuxやネットワークの知識も役立つ¶

Vercelのようなクラウドサービスを使っていると、普段はサーバーを強く意識しなくてもアプリを公開できます。

ただし、いざエラーが起きると、ログ、環境変数、HTTP通信、DNS、ネットワークなど、インフラの基礎知識が必要になる場面が増えてきます。

InfraAcademyでは、Linuxやネットワーク、AWSをブラウザ上で実際に操作しながら学習できます。

まずLinuxのコマンドやサーバー操作を学びたい方は、Linux入門講座から始めてみてください。

Webアプリがどのように通信しているのか理解したい方には、ネットワーク講座がおすすめです。

さらに、クラウド上でサーバーやネットワークを構築してみたい方は、AWS講座も用意しています。

エラーが発生したときに、どこを見ればよいのか分かるようになると、開発中のトラブルにも対応しやすくなります。

VercelのThis Edge Function has crashed.エラーまとめ¶

今回の記事では、VercelでThis Edge Function has crashed.と表示された場合の対処方法について解説しました。

このメッセージだけでは原因を特定できないため、まずVercelのRuntime Logsを確認することが大切です。

私の環境では、環境変数が読み込めていなかったことが原因でした。しかし、コード上の例外や外部APIへの接続などが原因になることもあります。

ローカルでは動くのにVercelでは動かない場合は、環境変数の設定先やProduction・Previewの違いも確認してみてください。

エラーが発生すると焦ってしまいますが、ログには原因を探すための情報が残っています。

エラー画面だけで判断せず、ログを確認して一つずつ原因を切り分けていきましょう。