SvelteKitのエラーハンドリングについて

2024.08.06Update

添野隼矢

はじめに

こんにちは。ニフティ株式会社の添野隼矢です。

最近、開発業務でSvelteKitに触れる機会がありました。そのシンプルさと学習コストの低さから、未経験者の私でもすぐに開発に活かせることを実感しました。

今回は、そのSvelteKitのエラーハンドリングについてご紹介します。

基本的なエラーハンドリング

まずSvelteKitには、エラーをスローするための方法が以下の2つの方法があります。

error（SvelteKit 1.x系ではthrowが必要です。）
throw new Error

これらの違いについて、説明していきます。

error

こちらは、アプリケーション内で発生することが予想されるエラーに使用されます。

例えば、以下のエラーの場合です。

403（アクセス権限がない場合などのエラーコード）
404（ユーザーが存在しない場合やリソースが見つからない場合などのエラーコード）
409（クライアントからのリクエストがサーバー上の現在の状態と競合しているときに発生するエラーコード）
500（サーバー側に発生した問題でリクエストが処理されなかったことを示すエラーコード）

利用例は以下のようになります。

import { error } from '@sveltejs/kit';

export const load = async () => {

const user = await getUser();

if (!user) {

throw error(404, {

message: 'ユーザ情報が見つかりませんでした',

code: 'USER_NOT_FOUND'

});

}

const permissions = await getUserPermissions();

if (!permissions.includes('ACCESS_RESOURCE')) {

throw error(403, {

message: 'アクセス権限がありません',

code: 'FORBIDDEN'

});

}

return { user, permissions };

};

throw new Error

こちらは、想定外エラーが起こった場合やプログラムのバグの際に使用するものです。

こちらは標準のJavaScriptのエラーハンドリング方法のため、throwが必要です。

利用例は以下のようになります。

export const load = async () => {

try {

const data = await fetchData();

return { data };

} catch (e) {

throw new Error('データの取得に失敗しました');

}

};

カスタムエラーページの作成

SvelteKitでは、+error.svelteファイルを作成して、カスタムエラーページを作成することができます。
カスタムエラーページを作成することによって、ユーザーフレンドリーな体験を提供できます。
試しに先程の403と404のerrorのカスタムエラーページを作成すると以下のようになります。

const dict = {

USER_NOT_FOUND: 'ユーザ情報を再度ご確認いただき、ログインしてください。',

FORBIDDEN: 'アクセス権限がありません。'

};

export function load({ error, status }) {

return {

props: { error, status }

};

}

</script>

<svelte:head>

<title>{status} - エラー</title>

</svelte:head>

<main>

<h1>{status}</h1>

<p>{@html dict[error.code]}</p>

</main>

上記の例では、エラーメッセージを辞書型で管理し、対応するエラーメッセージを表示しています。
これにより、エラーコードごとに異なるメッセージを簡単に設定できます。

<p>{@html dict[error.code]}</p>の部分は、この場合には以下が表示されます。

エラーコードがUSER_NOT_FOUNDの場合、辞書に基づいて「ユーザ情報を再度ご確認いただき、ログインしてください。」と表示されます。
エラーコードがFORBIDDENの場合、辞書に基づいて「アクセス権限がありません。」と表示されます。

※上記以外のエラーコードの場合、辞書に定義されていないため、undefinedが表示される可能性があります。

まとめ

SvelteKitのエラーハンドリングは非常に柔軟で、単純なエラーから複雑なエラーページのカスタマイズまで対応できます。
適切なエラーハンドリングを実装することで、ユーザーエクスペリエンスを向上させ、問題のデバッグを容易にすることができます。
詳細な情報については、公式ドキュメントを参照してください。
カスタムエラーページを簡単に作成したい場合は、ぜひSvelteKitを使ってみてください。