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

Reactアプリケーションは、コンポーネントベースのアーキテクチャと仮想DOMによる動的な描画が特徴です。New Relic Browser AgentとReactを統合することで、アプリケーションのパフォーマンスやエラーを効率よく監視でき、ユーザー体験の向上につなげることができます。この記事では、Reactアプリケーションでの基本的な統合方法と、最低限押さえておきたい監視のポイントについて解説します。

React監視の特徴 ​

Reactアプリケーションの監視では、従来のWebページとは異なる特徴があります。

Reactでは、コンポーネントが動的にマウント・アンマウントされるため、ページ単位ではなくコンポーネント単位での監視が重要になります。また、SPAとして動作することが多いため、ページ遷移時のパフォーマンス測定や、非同期データ取得の監視も必要です。

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

基本的な統合手順 ​

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

React Router v6を使用している場合は、ルート変更を追跡するための簡単なカスタムHookが有効です。

// ルート変更の監視（シンプルな例）
function useRouteTracking() {
  const location = useLocation();

  useEffect(() => {
    if (window.newrelic) {
      newrelic.addPageAction('route_change', {
        path: location.pathname
      });
    }
  }, [location.pathname]);
}

このHookをApp.jsなどのルートコンポーネントで呼び出すだけで、ページ遷移の追跡ができます。

エラーバウンダリーとの統合 ​

ReactのエラーバウンダリーにNew Relicの機能を組み込むことで、コンポーネントレベルのエラーを確実に監視できます。

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // New Relicにエラーを送信
    if (window.newrelic) {
      newrelic.noticeError(error, {
        component: errorInfo.componentStack
      });
    }
  }

  render() {
    if (this.state.hasError) {
      return <div>エラーが発生しました</div>;
    }
    return this.props.children;
  }
}

エラーバウンダリーは、アプリケーションの適切な場所（通常はルートコンポーネント近く）に配置することで、予期しないエラーをキャッチしてNew Relicに送信できます。

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

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

function ProductCard({ product }) {
  const handlePurchase = () => {
    // ビジネスロジック
    purchaseProduct(product.id);

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

  return (
    <button onClick={handlePurchase}>
      購入する
    </button>
  );
}

この方法で、ユーザーの行動パターンやビジネス上重要なイベントを追跡できます。

APIコールの監視 ​

ReactアプリケーションではAPIを使ってデータを取得することが多いため、API呼び出しの監視も重要です。

New Relic Browser Agentは、fetchやXMLHttpRequestを自動的に監視してくれますが、より詳細な情報を送信したい場合は、カスタムイベントと組み合わせることができます。

function useApiCall() {
  const callApi = async (url, options = {}) => {
    try {
      const response = await fetch(url, options);

      // 成功時のイベント送信
      if (window.newrelic) {
        newrelic.addPageAction('api_success', {
          url: url,
          status: response.status
        });
      }

      return response;
    } catch (error) {
      // エラー時のイベント送信
      if (window.newrelic) {
        newrelic.noticeError(error, { url });
      }
      throw error;
    }
  };

  return callApi;
}

これは実際のアプリケーションで使用するシンプルな例です。

実装のポイント ​

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

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

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

開発環境での確認 ​

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

プライバシーへの配慮 ​

個人情報を含む可能性があるデータをNew Relicに送信する際は、適切にマスキングまたは除外するよう注意が必要です。特に、フォーム入力データやAPIレスポンスの内容には十分注意しましょう。

まとめ ​

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

まずは自動監視機能でアプリケーションの基本的なパフォーマンスを把握し、その後ビジネス要件に応じて詳細な監視を追加していきましょう。適切な監視により、ユーザー体験の向上とアプリケーションの安定性向上を実現できます。

関連記事: Vue.js統合ガイド
関連記事: SPA監視設定ガイド