0Pricing
Sveltejs Academy · レッスン

カスタムエラーページの+error.svelte

ステータスコードとメッセージを表示するカスタムエラーUIを作成します。

「カスタムエラーページの+error.svelte」はCoddyKit上の無料Sveltejs Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSveltejs Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Sveltejs Academyコースには全4レッスンが含まれています。

カスタムエラーUI

任意のルートフォルダーに+error.svelteを作成すると、目的に合わせたエラーページを表示できます。

ルートエラーページ

src/routes/+error.svelteは、ネストされたエラーバウンダリで捕捉されなかったあらゆる場所のエラーを処理します。

<!-- +error.svelte -->
<script>
  import { page } from "$app/stores";
</script>
<h1>{$page.status}: {$page.error?.message}</h1>

ステータスへのアクセス

$page.statusからHTTPステータス（404、500など）を取得できます。

メッセージへのアクセス

$page.error.messageから、error()に渡したメッセージ、またはhandleErrorによる一般的なメッセージを取得できます。

プリレンダリング時の違い

静的なエラーページはプリレンダリングできますが、動的なエラーページはリクエストごとにレンダリングされます。

ネストされたバウンダリ

サブフォルダーに+error.svelteを配置すると、特定のセクションだけにエラーUIを限定できます。

分かりやすいメッセージ

メッセージを状況に合わせてください。404では別の場所への移動を案内し、500では謝罪してサポートへのリンクを示します。

追跡ID

handleErrorから返された追跡IDを表示すると、ユーザーがサポートにそのIDを伝えられます。

復帰用リンク

ホームへのリンク、検索ボックス、再読み込みボタンなど、必ず戻る方法を用意してください。

ブランディング

エラーページもアプリの他の部分と統一したデザインにしてください。エラーページもユーザーエクスペリエンスの一部です。

リアクティブな更新

ユーザーがエラーコンテキスト内で移動すると、$pageが更新され、UIに最新の状態が反映されます。

確認問題

エラーのステータスにはどのようにアクセスしますか？

まとめ

フォルダーごとに+error.svelteを配置して、エラーUIの範囲を限定します。$page.statusと$page.errorを読み取ります。

よくある質問

「カスタムエラーページの+error.svelte」レッスンは無料ですか？

はい。「カスタムエラーページの+error.svelte」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Sveltejs Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Sveltejs Academyコースには全4レッスンが含まれています。

「カスタムエラーページの+error.svelte」で何を学びますか？

ステータスコードとメッセージを表示するカスタムエラーUIを作成します。 ブラウザで直接実行するハンズオンコードでSveltejs Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Sveltejs Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのSveltejs Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。

「カスタムエラーページの+error.svelte」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このSveltejs Academyレッスンでコードを書いて実行できますか？

はい。すべてのSveltejs Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. カスタムエラーページの+error.svelte
  2. 想定内エラーと想定外エラー
  3. error()とredirect()ヘルパー
  4. ネストしたレイアウトのエラーページ
← Sveltejs Academyに戻る