New Relic React統合ガイド - Reactアプリケーションの包括的監視

Reactアプリケーションは、コンポーネントベースのアーキテクチャと仮想DOMによる効率的な描画が特徴ですが、その複雑性により監視には特別な配慮が必要です。New Relic Browser AgentとReactの統合により、コンポーネントレベルでのパフォーマンス追跡、エラー監視、ユーザー体験の最適化が実現できます。

React監視の特徴と課題

Reactアプリケーションの監視では、従来のWebアプリケーションとは異なる要素を考慮する必要があります。

React固有の監視要件

コンポーネントライフサイクルの追跡により、個別コンポーネントのマウント、更新、アンマウント時間を測定することで、パフォーマンスボトルネックを特定できます。特に、重い計算を行うコンポーネントや大量のデータを扱うコンポーネントの最適化に有効です。

状態管理の可視化では、Redux、Context API、Zustandなどの状態管理ライブラリとの統合により、状態変更がパフォーマンスに与える影響を分析できます。

仮想DOM操作の影響を理解するため、再レンダリングの頻度と範囲を監視し、不要な更新を特定して最適化につなげます。

React Router統合

React Routerを使用するアプリケーションでは、クライアントサイドルーティングの監視が重要です。

javascript

// React Router v6との統合例
import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

function useNewRelicRouteTracking() {
  const location = useLocation();
  
  useEffect(() => {
    if (typeof newrelic !== 'undefined') {
      newrelic.addPageAction('react_route_change', {
        pathname: location.pathname,
        search: location.search,
        hash: location.hash,
        timestamp: Date.now()
      });
    }
  }, [location]);
}

// App.jsでの使用
function App() {
  useNewRelicRouteTracking();
  
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/products" element={<Products />} />
        <Route path="/dashboard" element={<Dashboard />} />
      </Routes>
    </Router>
  );
}

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

Reactのエラーバウンダリー機能とNew Relicを統合することで、コンポーネントレベルでのエラー監視を実現できます。

基本的なエラーバウンダリー実装

javascript

import React from 'react';

class NewRelicErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null, errorInfo: null };
  }
  
  static getDerivedStateFromError(error) {
    return { hasError: true };
  }
  
  componentDidCatch(error, errorInfo) {
    // New Relicへのエラー送信
    if (typeof newrelic !== 'undefined') {
      newrelic.noticeError(error, {
        componentStack: errorInfo.componentStack,
        errorBoundary: this.constructor.name,
        props: JSON.stringify(this.props),
        reactVersion: React.version,
        userAgent: navigator.userAgent,
        url: window.location.href
      });
    }
    
    // 詳細なエラー情報の保存
    this.setState({
      error: error,
      errorInfo: errorInfo
    });
    
    // 開発環境でのログ出力
    if (process.env.NODE_ENV === 'development') {
      console.error('エラーバウンダリーでキャッチされたエラー:', error);
      console.error('コンポーネントスタック:', errorInfo.componentStack);
    }
  }
  
  render() {
    if (this.state.hasError) {
      return (
        <div className="error-fallback">
          <h2>エラーが発生しました</h2>
          <details>
            <summary>詳細情報</summary>
            <pre>{this.state.error && this.state.error.toString()}</pre>
            <pre>{this.state.errorInfo.componentStack}</pre>
          </details>
        </div>
      );
    }
    
    return this.props.children;
  }
}

高度なエラーハンドリング

javascript

// 非同期エラーのキャッチ
function useAsyncErrorHandler() {
  const handleError = useCallback((error, context = {}) => {
    if (typeof newrelic !== 'undefined') {
      newrelic.noticeError(error, {
        asyncError: true,
        context: JSON.stringify(context),
        timestamp: Date.now()
      });
    }
  }, []);
  
  return handleError;
}

// Promise rejection ハンドラー
useEffect(() => {
  const handleUnhandledRejection = (event) => {
    if (typeof newrelic !== 'undefined') {
      newrelic.noticeError(event.reason, {
        unhandledPromiseRejection: true,
        reason: event.reason.toString()
      });
    }
  };
  
  window.addEventListener('unhandledrejection', handleUnhandledRejection);
  
  return () => {
    window.removeEventListener('unhandledrejection', handleUnhandledRejection);
  };
}, []);

React Hooksとの統合

React Hooksを活用して、コンポーネントレベルでのパフォーマンス監視を実装できます。

カスタムパフォーマンス追跡Hook

javascript

import { useEffect, useRef, useState } from 'react';

// コンポーネントレンダリング時間の追跡
function useRenderTimeTracking(componentName) {
  const startTimeRef = useRef(null);
  const [renderCount, setRenderCount] = useState(0);
  
  useEffect(() => {
    startTimeRef.current = performance.now();
  });
  
  useEffect(() => {
    if (startTimeRef.current) {
      const renderTime = performance.now() - startTimeRef.current;
      
      if (typeof newrelic !== 'undefined') {
        newrelic.addPageAction('react_component_render', {
          component: componentName,
          renderTime: renderTime,
          renderCount: renderCount + 1,
          timestamp: Date.now()
        });
      }
      
      setRenderCount(prev => prev + 1);
    }
  });
  
  return renderCount;
}

// API呼び出しの監視
function useApiTracking(apiName) {
  const trackApiCall = useCallback(async (apiFunction, params = {}) => {
    const startTime = performance.now();
    
    try {
      const result = await apiFunction();
      const duration = performance.now() - startTime;
      
      if (typeof newrelic !== 'undefined') {
        newrelic.addPageAction('react_api_success', {
          apiName: apiName,
          duration: duration,
          params: JSON.stringify(params),
          timestamp: Date.now()
        });
      }
      
      return result;
    } catch (error) {
      const duration = performance.now() - startTime;
      
      if (typeof newrelic !== 'undefined') {
        newrelic.addPageAction('react_api_error', {
          apiName: apiName,
          duration: duration,
          error: error.message,
          params: JSON.stringify(params),
          timestamp: Date.now()
        });
        
        newrelic.noticeError(error, {
          apiCall: true,
          apiName: apiName,
          params: JSON.stringify(params)
        });
      }
      
      throw error;
    }
  }, [apiName]);
  
  return trackApiCall;
}

使用例

javascript

// コンポーネントでの使用例
function ProductList({ category }) {
  const renderCount = useRenderTimeTracking('ProductList');
  const trackApi = useApiTracking('fetchProducts');
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(false);
  
  useEffect(() => {
    const fetchProducts = async () => {
      setLoading(true);
      
      try {
        const result = await trackApi(
          () => fetch(`/api/products?category=${category}`).then(r => r.json()),
          { category }
        );
        
        setProducts(result);
      } catch (error) {
        console.error('商品取得エラー:', error);
      } finally {
        setLoading(false);
      }
    };
    
    fetchProducts();
  }, [category, trackApi]);
  
  if (loading) return <div>読み込み中...</div>;
  
  return (
    <div>
      <h2>商品一覧 (レンダリング回数: {renderCount})</h2>
      {products.map(product => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
}

パフォーマンス最適化の監視

Reactアプリケーションの最適化効果を測定するための監視手法を実装します。

メモ化の効果測定

javascript

// React.memo の効果測定
function withPerformanceTracking(Component, componentName) {
  return React.memo(React.forwardRef((props, ref) => {
    const renderStartTime = useRef(performance.now());
    
    useEffect(() => {
      const renderTime = performance.now() - renderStartTime.current;
      
      if (typeof newrelic !== 'undefined') {
        newrelic.addPageAction('react_memo_render', {
          component: componentName,
          renderTime: renderTime,
          propsHash: JSON.stringify(props).slice(0, 100),
          timestamp: Date.now()
        });
      }
    });
    
    return <Component {...props} ref={ref} />;
  }));
}

// 使用例
const OptimizedProductCard = withPerformanceTracking(ProductCard, 'ProductCard');

仮想スクロールの監視

javascript

// 仮想スクロールの効果測定
function useVirtualScrollTracking(itemCount, visibleRange) {
  useEffect(() => {
    if (typeof newrelic !== 'undefined') {
      newrelic.addPageAction('virtual_scroll_update', {
        totalItems: itemCount,
        visibleStart: visibleRange.start,
        visibleEnd: visibleRange.end,
        visibleCount: visibleRange.end - visibleRange.start,
        renderRatio: (visibleRange.end - visibleRange.start) / itemCount,
        timestamp: Date.now()
      });
    }
  }, [itemCount, visibleRange]);
}

状態管理との統合

Reduxやその他の状態管理ライブラリとの統合により、状態変更のパフォーマンス影響を監視できます。

Redux統合

javascript

// Redux middleware for New Relic
const newRelicMiddleware = store => next => action => {
  const startTime = performance.now();
  
  const result = next(action);
  
  const duration = performance.now() - startTime;
  
  if (typeof newrelic !== 'undefined') {
    newrelic.addPageAction('redux_action', {
      actionType: action.type,
      duration: duration,
      payloadSize: JSON.stringify(action).length,
      timestamp: Date.now()
    });
  }
  
  return result;
};

// Store設定
const store = createStore(
  rootReducer,
  applyMiddleware(newRelicMiddleware, thunk)
);

実装のベストプラクティス

効果的なReact監視を実現するための推奨事項をまとめます。

パフォーマンス監視の最適化

選択的監視により、すべてのコンポーネントを監視するのではなく、ビジネスクリティカルなコンポーネントに焦点を当てます。サンプリングでは、高頻度でレンダリングされるコンポーネントには適切なサンプリング率を設定します。

データ収集の効率化

バッチ処理により、複数のイベントをまとめて送信してネットワーク負荷を軽減します。非同期処理では、監視処理がユーザーインタラクションをブロックしないよう配慮します。

開発体験の向上

開発環境での詳細ログにより、開発時は詳細な情報を出力し、本番環境では必要最小限のデータのみを送信します。TypeScript統合では、型安全な監視コードを作成してバグを防止します。

トラブルシューティング

React統合でよく発生する問題と解決方法を紹介します。

パフォーマンス影響の最小化

監視コードが重い場合は、requestIdleCallbackを使用してブラウザのアイドル時間を活用します。メモリリークを防ぐため、useEffectのクリーンアップ関数で適切にリスナーを削除します。

データの正確性確保

重複イベントを防ぐため、useRefを使用してフラグ管理を行います。非同期処理でのレースコンディションを回避するため、クリーンアップ処理を適切に実装します。

まとめ

New RelicとReactの統合により、モダンなWebアプリケーションの複雑なパフォーマンス特性を詳細に分析できるようになります。エラーバウンダリー、Hooks、状態管理との統合を通じて、ユーザー体験の向上とアプリケーションの安定性向上を実現できます。

次のステップでは、Vue.jsアプリケーションでの統合方法について詳しく解説します。Vue.js固有の監視手法と最適化テクニックを学んでいきましょう。

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

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

React監視の特徴と課題 ​

React固有の監視要件 ​

React Router統合 ​

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

基本的なエラーバウンダリー実装 ​

高度なエラーハンドリング ​

React Hooksとの統合 ​

カスタムパフォーマンス追跡Hook ​

使用例 ​

パフォーマンス最適化の監視 ​

メモ化の効果測定 ​

仮想スクロールの監視 ​

状態管理との統合 ​

Redux統合 ​

実装のベストプラクティス ​

パフォーマンス監視の最適化 ​

データ収集の効率化 ​

開発体験の向上 ​

トラブルシューティング ​

パフォーマンス影響の最小化 ​

データの正確性確保 ​

まとめ ​

New Relic React統合ガイド - Reactアプリケーションの包括的監視

React監視の特徴と課題

React固有の監視要件

React Router統合

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

基本的なエラーバウンダリー実装

高度なエラーハンドリング

React Hooksとの統合

カスタムパフォーマンス追跡Hook

使用例

パフォーマンス最適化の監視

メモ化の効果測定

仮想スクロールの監視

状態管理との統合

Redux統合

実装のベストプラクティス

パフォーマンス監視の最適化

データ収集の効率化

開発体験の向上

トラブルシューティング

パフォーマンス影響の最小化

データの正確性確保

まとめ