Svelte入門:リファレンス Types -Vol.6-

スポンサーリンク
Svelte入門:リファレンス Types -Vol.6- 用語解説
Svelte入門:リファレンス Types -Vol.6-
この記事は約5分で読めます。
よっしー
よっしー

こんにちは。よっしーです(^^)

今日は、SvelteKitのリファレンスについて解説して います。

スポンサーリンク

背景

SvelteKitのリファレンスについて調査する機会がありましたので、その時の内容を備忘として記事に残しました。

Types

Error

期待されるエラーと予期せぬエラーの共通の形状を定義します。期待されるエラーはerror関数を使用して投げられます。予期せぬエラーはhandleErrorフックによって処理され、このフックはこの形状を返すべきです。

interface Error {…}
message: string;

解説

SvelteKitのErrorインターフェースは、アプリケーション全体でのエラー処理の一貫性を確保するための重要な型定義です。これについて詳しく説明します:

Error型の目的

App.Errorインターフェースは、SvelteKitアプリケーション内のエラーオブジェクトの構造を標準化します。これには2つの主要なケースがあります:

  1. 期待されるエラー:開発者が意図的に投げるエラー(例:認証エラー、不正なリクエストなど)
  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のリファレンスについて解説しました。

よっしー
よっしー

何か質問や相談があれば、コメントをお願いします。また、エンジニア案件の相談にも随時対応していますので、お気軽にお問い合わせください。

それでは、また明日お会いしましょう(^^)

コメント

タイトルとURLをコピーしました