Svelte入門：SvelteKitでのエラー処理 -Vol.2-

今日は、SvelteKitでのエラー処.理について解説しています。

背景

SvelteKitでのエラー処理について調査する機会がありましたので、その時の内容を備忘として記事に残しました。

エラー処理

エラーはソフトウェア開発において避けられない事実です。SvelteKit は、エラーの発生場所、エラーの種類、受信したリクエストの性質に応じて、エラーを異なる方法で処理します。

Expected errors

予期されるエラーは、@sveltejs/kitからインポートされたerrorヘルパーを使用して作成されます：

src/routes/blog/[slug]/+page.server.js

import { error } from '@sveltejs/kit';
import * as db from '$lib/server/database';

/** @type {import('./$types').PageServerLoad} */
export async function load({ params }) {
  const post = await db.getPost(params.slug);
  if (!post) {
    error(404, {
      message: 'Not found'
    });
  }
  return { post };
}

これはSvelteKitがキャッチする例外を投げ、レスポンスのステータスコードを404に設定し、+error.svelteコンポーネントをレンダリングします。この時、$page.errorはerror(...)の第2引数として提供されたオブジェクトになります。

src/routes/+error.svelte

<script>
  import { page } from '$app/stores';
</script>

<h1>{$page.error.message}</h1>

必要に応じて、エラーオブジェクトに追加のプロパティを加えることができます：

error(404, {
  message: 'Not found',
  code: 'NOT_FOUND'
});

それ以外の場合、便宜上、第2引数として文字列を渡すこともできます：

error(404, { message: 'Not found' });
error(404, 'Not found');

SvelteKit 1.xでは、errorを自分でthrowする必要がありました。

これらの予期されるエラーを使用することで、アプリケーションの様々な部分で一貫したエラーハンドリングを実装できます。例えば、404 Not Foundエラー、認証エラー、バリデーションエラーなどを統一的に扱うことができます。また、これらのエラーは+error.svelteコンポーネントでカスタマイズされたエラーページを表示するのに使用でき、ユーザーエクスペリエンスを向上させることができます。

コード解説

src/routes/blog/[slug]/+page.server.js

このコードは、SvelteKitのサーバーサイドロード関数を定義しています。特定のブログ記事（または類似のコンテンツ）をデータベースから取得し、ページにデータを提供するものです。以下に詳細を説明します：

1. インポート文:

import { error } from '@sveltejs/kit';
import * as db from '$lib/server/database';

• error 関数を SvelteKit からインポートしています。これはエラーを発生させるために使用します。
• データベース操作のための関数を $lib/server/database からインポートしています。

1. 型定義:

/** @type {import('./$types').PageServerLoad} */

この行は、以下の load 関数が SvelteKit の PageServerLoad 型に準拠していることを示しています。

3. load 関数の定義:

export async function load({ params }) {
  // ...
}

• これはサーバーサイドの load 関数です。ページがリクエストされたときに実行されます。
• params オブジェクトを引数として受け取ります。これにはURLパラメータが含まれます。

1. データベースからの記事取得:

const post = await db.getPost(params.slug);

• db.getPost() 関数を使用して、指定された slug に対応する記事をデータベースから非同期で取得しています。
• params.slug は、URLから抽出されたスラッグ（記事の一意識別子）です。

1. エラーハンドリング:

if (!post) {
  error(404, {
    message: 'Not found'
  });
}

• 記事が見つからなかった場合（post が null または undefined の場合）、404エラーを発生させます。
• error 関数は SvelteKit の機能で、HTTPステータスコードとエラーメッセージを指定できます。

1. データの返却:

return { post };

• 取得した記事データをオブジェクトとして返します。
• この返却値は、対応するSvelteコンポーネントで data.post としてアクセスできるようになります。

この load 関数の主な目的と動作は以下の通りです：

1. URLパラメータから記事のスラッグを取得する。
2. そのスラッグを使用してデータベースから記事を取得する。
3. 記事が存在しない場合、404エラーを発生させる。
4. 記事が存在する場合、それをページコンポーネントに提供する。

この実装により、動的なコンテンツ取得と適切なエラーハンドリングが可能になり、ユーザーに適切なコンテンツまたはエラーメッセージを表示することができます。

おわりに

今日は、 SvelteKitでのエラー処理について解説しました。