
よっしー
こんにちは。よっしーです(^^)
今日は、SvelteKitのリファレンスについて解説して います。
背景
SvelteKitのリファレンスについて調査する機会がありましたので、その時の内容を備忘として記事に残しました。
Types
Error
期待されるエラーと予期せぬエラーの共通の形状を定義します。期待されるエラーはerror
関数を使用して投げられます。予期せぬエラーはhandleError
フックによって処理され、このフックはこの形状を返すべきです。
interface Error {…}
message: string;
解説
SvelteKitのError
インターフェースは、アプリケーション全体でのエラー処理の一貫性を確保するための重要な型定義です。これについて詳しく説明します:
Error型の目的
App.Error
インターフェースは、SvelteKitアプリケーション内のエラーオブジェクトの構造を標準化します。これには2つの主要なケースがあります:
- 期待されるエラー:開発者が意図的に投げるエラー(例:認証エラー、不正なリクエストなど)
- 予期せぬエラー:アプリケーション実行中に予期せず発生するエラー(例:データベース接続の失敗など)
基本構造
最も基本的な形では、Error
インターフェースは少なくともmessage
プロパティを含む必要があります:
// src/app.d.ts
declare global {
namespace App {
interface Error {
message: string;
}
}
}
export {};
カスタマイズ例
実際のアプリケーションでは、よりリッチなエラー情報を提供するために拡張されることが多いです:
// src/app.d.ts
declare global {
namespace App {
interface Error {
message: string;
code?: string; // エラーコード(例: 'AUTH_FAILED')
status?: number; // HTTPステータスコード
stack?: string; // 本番環境では通常非表示
details?: unknown; // 追加のエラー詳細
}
}
}
export {};
期待されるエラーの投げ方
// src/routes/protected/+page.server.js
import { error } from '@sveltejs/kit';
export function load({ locals }) {
if (!locals.user) {
throw error(401, {
message: 'ログインが必要です',
code: 'AUTH_REQUIRED'
});
}
// ...
}
予期せぬエラーの処理
// src/hooks.server.js
export function handleError({ error, event }) {
// エラーをログに記録
console.error(error);
// クライアントに安全に返すエラーオブジェクトを整形
return {
message: 'サーバーで問題が発生しました',
code: 'SERVER_ERROR',
// オリジナルのエラーメッセージは本番環境では隠す場合も
...(import.meta.env.DEV ? { details: error.message } : {})
};
}
エラー表示の例
Error
インターフェースで定義されたエラーは、SvelteKitのエラーページで表示されます:
<!-- src/routes/+error.svelte -->
<script>
import { page } from '$app/stores';
</script>
<h1>エラーが発生しました</h1>
<p>{$page.error.message}</p>
{#if $page.error.code}
<p>エラーコード: {$page.error.code}</p>
{/if}
<a href="/">ホームに戻る</a>
利点
- 一貫性のあるエラー処理: アプリケーション全体で統一されたエラー形式
- 型安全性: TypeScriptによるエラーオブジェクトの型チェック
- ユーザーエクスペリエンスの向上: 適切にフォーマットされたエラーメッセージの提供
- デバッグの容易さ: 開発環境では詳細なエラー情報を表示、本番環境では適切に制限可能
App.Error
インターフェースをカスタマイズすることで、アプリケーションのニーズに合わせたエラー処理システムを構築できます。
おわりに
今日は、 SvelteKitのリファレンスについて解説しました。

よっしー
何か質問や相談があれば、コメントをお願いします。また、エンジニア案件の相談にも随時対応していますので、お気軽にお問い合わせください。
それでは、また明日お会いしましょう(^^)
コメント