こんにちは、AIQ株式会社のフロントエンドエンジニアのまさぴょんです！
今回は、Nuxt.jsでエラー発生時に表示するエラーページの作り方(CSRとSSR対応)について解説します。
Nuxt.jsでのエラーページの作り方
まず前提として、CSR（クライアントサイド）の場合と、SSR(サーバーサイド)の場合で対応を分けて考える必要があります。
今回は、次のような順序でエラーページの作り方と、その確認するためのSample Pageについてご紹介します。
CSR（クライアントサイド）の場合のエラーページの作り方
/layouts/error.vueを作成すると、CSR側でエラーが発生したときに、自動でそのページが表示されるようになります。
<!-- Client Side 側の Error (CSR-Error) は、こちらで対応できる -->
<template>
<div class="error-msg">
<p>Error ステータスコード：{{ error.statusCode }}</p>
<p>Error メッセージ：{{ error.message }}</p>
<div>
<nuxt-link class="home-return-link" to="/">ホームに戻る</nuxt-link>
</div>
</div>
</template>
<script>
export default {
props: {
error: {
type: Object,
default: null,
},
},
}
</script>
<style lang="scss" scoped>
.error-msg {
text-align: center;
padding: 30px;
}
.home-return-link {
display: inline-block;
margin-top: 12px;
color: $black-color-2;
font-weight: 600;
padding: 12px;
background-color: white;
border-radius: 8px;
&:hover {
background-color: rgba(128, 128, 128, 0.5);
}
}
</style>
SSR(サーバーサイド)の場合のエラーページの作り方
/app/views/error.htmlを作成すると、SSR側でエラーが発生したときに、自動でそのページが表示されるようになります。
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>エラーが発生しました</title>
<style>
.error-msg {
text-align: center;
padding: 30px;
}
</style>
</head>
<body>
<div class="error-msg">
<p class="error-txt">サーバー・エラーが発生しました。</p>
<div>
<a class="return-link" href="https://masanyon.com/">ホームに戻る</a>
</div>
</div>
</body>
</html>
CSRとSSR、それぞれを確認するためのSample Page
/pagesにCSRとSSR、それぞれを確認するためのSample Pageを作成していきます。
throw new Error()で、わざとErrorを発生させます。
SSRの処理は、asyncData()を使用すると簡単に確認ができます。
<template>
<div>
<h2>Error Test Template</h2>
</div>
</template>
<script>
// Import_Zone
export default {
name: 'Test Component',
/** NuxtAuth: 未ログイン状態でも、Access可能 */
auth: false,
/** SSR(サーバーサイド)処理 */
asyncData(context) {
throw new Error('SSR Error')
},
/** LifeCycleHook: MountedTiming */
mounted() {
throw new Error('CSR Error')
},
}
</script>
<style scoped>
/* Style_定義 */
</style>
まとめ
今回は、Nuxt.jsでエラー発生時に表示するエラーページの作り方(CSRとSSR対応)について解説しました。
フロントエンドの場合は、エラーハンドリングだけでなく、エラーの際のページ対応も考える必要があると改めて、考えさせられました。
個人で、Blogもやっています、よかったら見てみてください。
注意事項
この記事は、AIQ 株式会社の社員による個人の見解であり、所属する組織の公式見解ではありません。
求む、冒険者！
AIQ株式会社では、一緒に働いてくれるエンジニアを絶賛、募集しております🐱🐹✨
詳しくは、Wantedly (https://www.wantedly.com/companies/aiqlab)を見てみてください。
参考・引用
AIQ 株式会社 に所属するエンジニアが技術情報をお届けします。 ※ AIQ 株式会社 社員による個人の見解であり、所属する組織の公式見解ではありません。 Wantedly: wantedly.com/companies/aiqlab
Discussion