[microCMS] Nuxt.js + Netlifyビルド失敗時にエラー通知する

microCMSとNetlify、Nuxt.jsを使って、ブログを作成しています。
HTMLを入力した際に不正なマークアップが存在すると、Nuxt.jsのSSGでページを生成する(generate)時に、ページの生成が失敗することがありました。

generateが失敗するケース
一部のページのgenerateが失敗した場合例外処理をする
previewページのvalidateを外す
Netlifyのデプロイ通知を設定
追記

generateが失敗するケース

例えば、普段はリッチエディタを使っていても、テーブルなどはカスタムフィールドを作成してHTMLのブロックを追加し、HTMLを書く必要があります。
参考: リッチエディタを使いつつ一部はHTMLで入稿する

例えば、100より大きな値を示す、’>100’という文字列をHTML上で入力した場合、

// ブロックに入力するhtml
<table>
    <tr>
        <th>>100</th>
    </tr>
</table>

generate時に以下のようなエラーが出て、対象のページの生成が失敗します。

 ERROR  Error generating route "[対象のページ]": HTML minification failed. Make sure the route generates valid HTML. Failed HTML:

その他、何らかの原因で、ページの生成が失敗した場合に、通知が必要だと感じました。

一部のページのgenerateが失敗した場合例外処理をする

Nuxtは通常では一部のページのgenerateが失敗しても、処理は止まらず、エラー終了はしません。
generate完了のフックで例外処理をさせる必要があります。

Nuxtのフック: The hooks Property – NuxtJS
generateのフック一覧: API: Generator クラス – NuxtJS

generate:routeCreated(generateされたページの保存に成功した)タイミングでエラーがあるか確認し、throw new Errorするようにしました。

// nuxt.config.js
  hooks: {
    generate: {
      routeCreated({ errors }) {
        if (errors.length > 0 && errors[0].error) {
          // console.log(errors)
          const error = errors[0].error
          throw new Error(`Failed generate ${error.path} -- ${error.message}`)
        }
      },
    },
  }

1つでもページの生成が失敗した場合は、ビルド自体が失敗し、Netlifyに更新が反映されなくなります。
これで、不正な値が入り込んだ場合のページ更新で、既存のページが404になってしまうことはありません。

previewページのvalidateを外す

前回の記事でpreviewページを作成し、preview=trueのパラメータをつけなければ404とするようにしました。
microCMS Nuxt.jsとNetlifyでプレビューページを実装する | とげとげブログ

ただ、今回、例外処理を追加したので、generate時にpreviewページのvalidateで404エラーを吐いてしまいます。

// generate時のエラー
[                                                                                                                                                                                                                                                                    
  {
    type: 'handled',
    route: '/preview',
    error: {
      statusCode: 404,
      path: '/preview',
      message: 'This page could not be found'
    }
  }
]

 FATAL  Failed generate /preview -- This page could not be found

previewページのvalidateの処理を削除し、asyncDataに代わりとなる処理を追加しました。
今回は404ではなく、リダイレクトするようにしています。

// page/preview.vue
async asyncData({ redirect, query }) {
   if (!query.preview) {
     redirect('/')
   }
}

Netlifyのデプロイ通知を設定

あとは、Netlifyで通知を設定すればOKです。
Settings > Build & Deploy > Deploy notifications から設定できます。

Slackやメール、Githubなどと連携できそうです。

Deploy notifications | Netlify Docs

追記

cli
#7948 Handle nuxt generate with --fail-on-error for static target (resolves #7947)

v2.14.4で新機能出てました！これも使えるのかも？

Full Staticモードで「–fail-on-error」ビルドエラー時にデプロイ止めれるそうです。
https://ja.nuxtjs.org/guide/release-notes/