New Relic Vue.js統合ガイド - Vue.jsアプリケーションの効果的な監視 ​

Vue.jsは、直感的なAPIとリアクティブデータシステムで人気のJavaScriptフレームワークです。New Relic Browser Agentと統合することで、Vue.jsアプリケーションのパフォーマンスやユーザー体験を監視できます。この記事では、Vue.jsアプリケーションでの基本的な統合方法と、最低限押さえておきたい監視のポイントについて解説します。

Vue.js監視の特徴 ​

Vue.jsアプリケーションの監視では、他のフレームワークと同様の特徴と、Vue.js独自の要素があります。

Vue.jsではリアクティブデータシステムにより、データの変更が自動的にDOMの更新をトリガーします。また、Vue Routerを使用したSPAが一般的なため、クライアントサイドルーティングの監視も重要です。

New Relic Browser Agentは、これらのVue.js特有の動作パターンを適切に検知してパフォーマンスデータを収集します。

基本的な統合手順 ​

Vue.jsアプリケーションでNew Relic Browser Agentを使用する場合、通常のHTMLアプリケーションと同様に、HTMLテンプレートの<head>セクションにスクリプトを配置するだけで基本的な監視が開始されます。

Vue Routerを使用している場合は、ルート変更を監視するための簡単な設定が有効です。

javascript
// Vue Routerでのルート変更監視（簡単な例）
router.afterEach((to, from) => {
  if (window.newrelic) {
    newrelic.addPageAction('route_change', {
      path: to.path
    });
  }
});

この設定をルーターの初期化時に追加するだけで、ページ遷移の追跡ができます。

エラーハンドリング ​

Vue.jsアプリケーションで発生したエラーをNew Relicで監視するため、グローバルエラーハンドラーを設定できます。

javascript
// main.jsでのグローバルエラーハンドラー設定
const app = createApp(App);

app.config.errorHandler = (err, instance, info) => {
  if (window.newrelic) {
    newrelic.noticeError(err, {
      component: instance?.$options.name || 'Unknown',
      info: info
    });
  }
};

この設定により、Vueコンポーネントで発生したエラーがNew Relicに自動的に送信されます。

カスタムイベントの送信 ​

Vue.jsコンポーネント内で特定のユーザーアクションやビジネスイベントを追跡したい場合は、カスタムイベントを送信できます。

javascript
// コンポーネント内でのカスタムイベント送信
export default {
  methods: {
    handlePurchase(productId) {
      // ビジネスロジック
      this.purchaseProduct(productId);

      // New Relicにイベント送信
      if (window.newrelic) {
        newrelic.addPageAction('product_purchased', {
          productId: productId,
          category: this.product.category
        });
      }
    }
  }
};

Composition APIを使用している場合は、以下のように書くこともできます。

javascript
// Composition APIでの例
export default {
  setup() {
    const handleClick = (action) => {
      if (window.newrelic) {
        newrelic.addPageAction('user_action', { action });
      }
    };

    return { handleClick };
  }
};

APIコールの監視 ​

Vue.jsアプリケーションでもAPIコールの監視は重要です。New Relic Browser Agentは、fetchやXMLHttpRequestを自動的に監視しますが、より詳細な情報を送信したい場合はカスタムイベントを使用します。

javascript
// API呼び出しの監視（Options APIの例）
export default {
  methods: {
    async fetchData() {
      try {
        const response = await fetch('/api/data');

        if (window.newrelic) {
          newrelic.addPageAction('api_success', {
            url: '/api/data',
            status: response.status
          });
        }

        return response.json();
      } catch (error) {
        if (window.newrelic) {
          newrelic.noticeError(error, { url: '/api/data' });
        }
        throw error;
      }
    }
  }
};

状態管理との統合 ​

VuexやPiniaなどの状態管理ライブラリを使用している場合、状態変更を監視することもできます。

javascript
// Vuexでの簡単な監視例
import { createStore } from 'vuex';

const store = createStore({
  // ...
  plugins: [
    (store) => {
      store.subscribe((mutation, state) => {
        if (window.newrelic) {
          newrelic.addPageAction('state_change', {
            mutation: mutation.type
          });
        }
      });
    }
  ]
});

これは簡単な例で、必要に応じてより詳細な情報を送信するようにカスタマイズできます。

実装のポイント ​

Vue.jsアプリケーションでNew Relicを効果的に活用するためのポイントをまとめます。

必要最小限の監視から開始 ​

最初はBrowser Agentの自動監視機能を活用し、基本的なパフォーマンス指標とエラー監視を確認しましょう。その後、必要に応じてカスタムイベントやエラーハンドラーの統合を追加していくのがおすすめです。

Vue.js特有の考慮事項 ​

Vue.jsのリアクティブシステムに過度な負荷をかけないよう、監視コードは必要最小限に留めましょう。また、DOM更新後のタイミングでデータを収集する場合は、nextTickを使用してレンダリングをブロックしないよう注意が必要です。

開発環境での確認 ​

開発中はブラウザの開発者ツールでNew Relicへのデータ送信を確認できます。Networkタブで「bam.nr-data.net」へのリクエストが送信されていることを確認しましょう。

まとめ ​

New RelicとVue.jsの統合は、基本的なスクリプト配置から始めて、必要に応じてエラーハンドラーやカスタムイベントを追加するという段階的なアプローチが効果的です。

まずは自動監視機能でアプリケーションの基本的なパフォーマンスを把握し、その後ビジネス要件に応じて詳細な監視を追加していきましょう。Vue.jsのリアクティブシステムと組み合わせて使用することで、ユーザー体験の向上とアプリケーションの安定性向上を実現できます。

関連記事: React統合ガイド
関連記事: SPA監視設定ガイド