Google Analytics を使って、NuxtJS アプリの例外を測定してみた

はじめに

プロフィールビューアーサービス Proflly（プロフリー）の運用にて、エラーが発生している原因を調査することがあります。その際に再現性があるエラーの場合は、原因を突き止めやすいのですが、再現性がないエラーの場合、調査して原因を突き止めるのが難しい場合があります。 そういった場合に、クライアント側のエラー(Javascript のエラーなど)をモニタリングできると、エラー時の挙動がより調査しやすくなるので、今回は Google Analytics の gtag.js を使って例外情報を測定してみました。

なお、CloudWatch RUM を使ってクライアントエラーのモニタリングについても以前ブログに書いてあるので、気になる方は、読んでいただけると嬉しいです。

CloudWatch RUM を使って NuxtJS アプリのクライアント側のエラーをモニタリングしてみた

事前条件

• Google アカウント、GA4 プロパティおよびデータストリームを設定済みである

やってみること

• NuxtJS アプリ(Single Page Application)に Google Analytics 測定タグをセットアップ
• NuxtJS アプリ(Single Page Application)に例外の測定を組み込む
• NuxtJS アプリでエラー（例外）を発生させる
• エラー内容を Google Analytics から確認する

実行環境

• Node.js: 14.17.1
• NuxtJS: 2.15.8
• @nuxtjs/google-gtag: 1.0.4

NuxtJS アプリ(Single Page Application)に Google Analytics 測定タグをセットアップ

Google Analytics の測定に利用するタグは、プロパティとデータストリームを作成することで、Google Analytics のコンソール上で確認することができます。

このタグをそのまま Web サイトに組み込んでもよいのですが、NuxtJS の場合だと、@nuxtjs/google-gtag という便利なライブラリがあるので、今回はこちらを利用して組み込みます。 アプリケーションにインストールして、設定ファイルをセットアップします。なお、下記の設定内容についてはあくまでサンプルであり、稼働している環境やアプリケーションに合わせて、調整する必要があります。

nuxt.config.js

export default {
  ...
  modules: [
    [
      '@nuxtjs/google-gtag',
      {
        id: '[測定用のID(ex: G-xxxxyyyy)]',
        config: {
          send_page_view: false,
        },
        debug: true,
      },
    ],
  ],
  ...
}

NuxtJS アプリ(Single Page Application)に例外の測定を組み込む

Google Analytics の測定用のタグを組み込んだだけだと、例外の測定はされません。 例外の測定をするには、アプリケーションでエラーが発生した際に、Google Analytics にエラー情報をイベントとして送る必要があります。 NuxtJS に組み込む場合は、エラーハンドラを作成してエラー情報を送る方法がやりやすそうなので、エラー情報を送るエラーハンドラをプラグインを使って組み込んでみました。

error-handler.ts

import Vue from 'vue'

export default (context: any, inject: any) => {
  Vue.config.errorHandler = (err, vm, info) => {
    context.$gtag('event', 'exception', { description: err.message })
    console.error(err)

    // エラーハンドリング
  }
}

nuxt.config.js

export default {
  ...
  plugins: [
    {src: '~/plugins/error-handler'}
  ],
  ...
}

エラー内容を Google Analytics から確認する

今回はローカル環境で例外を発生させてみました。なお、dev モードで起動（例: yarn dev, npm run dev）した際に、Google Analytics の収集を有効にしたい場合は、上記の nuxt.config.js で、debug を true に設定して実行することで、収集の確認をすることができます。

収集したエラー内容を Google Analytics のコンソールで [レポート] → [リアルタイム] のイベントで確認すると、例外情報が送られていることを確認できました。

どのようなエラーがいつ、何度発生したのか？を、可視化することができそうです。

さいごに

データの分析や収集に Google Analytics を使っている Web サイトも多いかと思います。既に使っている場合は、エラーの収集も比較的簡単に組み込めそうですので、エラーの可視化に使ってみてはいかがでしょうか。 いろいろなクライアントエラーの収集方法がある中の、手段の１つとして、どなたかの参考になれば幸いです。

参考

• 例外の測定
• @nuxtjs/google-gtag