New Relic Browser監視入門 第9.3章 - SPA・PWA監視とフロントエンドエラー追跡 ​

// 従来のページ遷移（ブラウザが自動的にページ読み込みイベントを発火）
window.location.href = '/products/123';

// SPAのルート遷移（JavaScriptによる状態変更のみ）
// → New Relicに手動でページビューを通知する必要
history.pushState({productId: 123}, '', '/products/123');
// この時点では、ブラウザのページ読み込みイベントは発生しない

// hooks/useNewRelic.js
import { useEffect, useCallback, useRef } from 'react';

/**
 * New Relic監視用カスタムHook
 * コンポーネントのライフサイクルとユーザー操作を監視
 */
export const useNewRelic = (componentName, options = {}) => {
  const mountTimeRef = useRef(null);
  const { trackRenders = true, trackUserActions = true } = options;

  // コンポーネントマウント時の処理
  useEffect(() => {
    mountTimeRef.current = Date.now();
    
    if (window.newrelic && trackRenders) {
      // カスタムイベント: コンポーネント初期化開始
      window.newrelic.addPageAction('component_mount_start', {
        componentName,
        timestamp: mountTimeRef.current,
        url: window.location.pathname,
        userAgent: navigator.userAgent
      });
    }

    // コンポーネントマウント完了の監視
    const handleMountComplete = () => {
      const mountDuration = Date.now() - mountTimeRef.current;
      
      if (window.newrelic) {
        window.newrelic.addPageAction('component_mount_complete', {
          componentName,
          mountDuration,
          performance: {
            renderTime: mountDuration,
            memoryUsage: window.performance?.memory?.usedJSHeapSize
          }
        });
      }
    };

    // 次のティックでマウント完了を記録（レンダリング後）
    const timeoutId = setTimeout(handleMountComplete, 0);

    // クリーンアップ関数
    return () => {
      clearTimeout(timeoutId);
      
      if (window.newrelic && trackRenders) {
        const totalLifetime = Date.now() - mountTimeRef.current;
        window.newrelic.addPageAction('component_unmount', {
          componentName,
          totalLifetime,
          unmountReason: 'component_destroyed'
        });
      }
    };
  }, [componentName, trackRenders]);

  // ユーザーアクション追跡関数
  const trackUserAction = useCallback((actionName, additionalData = {}) => {
    if (!window.newrelic || !trackUserActions) return;
    
    window.newrelic.addPageAction('user_action', {
      componentName,
      actionName,
      timestamp: Date.now(),
      url: window.location.pathname,
      ...additionalData
    });
  }, [componentName, trackUserActions]);

  // エラー追跡関数
  const trackError = useCallback((error, errorContext = {}) => {
    if (!window.newrelic) return;
    
    window.newrelic.noticeError(error, {
      componentName,
      errorContext,
      url: window.location.pathname,
      timestamp: Date.now(),
      stackTrace: error.stack
    });
  }, [componentName]);

  // パフォーマンス計測開始
  const startPerformanceTimer = useCallback((timerName) => {
    if (!window.newrelic) return null;
    
    const startTime = Date.now();
    return {
      end: (additionalData = {}) => {
        const duration = Date.now() - startTime;
        window.newrelic.addPageAction('performance_timer', {
          componentName,
          timerName,
          duration,
          ...additionalData
        });
        return duration;
      }
    };
  }, [componentName]);

  return {
    trackUserAction,
    trackError,
    startPerformanceTimer
  };
};

// components/ProductList.jsx
import React, { useState, useEffect } from 'react';
import { useNewRelic } from '../hooks/useNewRelic';

const ProductList = ({ category }) => {
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  
  // New Relic監視フックの初期化
  const { trackUserAction, trackError, startPerformanceTimer } = useNewRelic('ProductList', {
    trackRenders: true,
    trackUserActions: true
  });

  // 商品データ取得の監視
  useEffect(() => {
    const fetchProducts = async () => {
      // パフォーマンス計測開始
      const timer = startPerformanceTimer('product_fetch');
      
      try {
        setLoading(true);
        
        const response = await fetch(`/api/products?category=${category}`);
        
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        
        const data = await response.json();
        setProducts(data);
        
        // 成功時のパフォーマンス記録
        timer.end({
          productCount: data.length,
          category,
          success: true
        });
        
        // ユーザーアクション記録
        trackUserAction('products_loaded', {
          category,
          productCount: data.length,
          loadTime: timer.duration
        });
        
      } catch (err) {
        setError(err.message);
        
        // エラー追跡
        trackError(err, {
          operation: 'product_fetch',
          category,
          apiEndpoint: `/api/products?category=${category}`
        });
        
        // エラー時のパフォーマンス記録
        timer.end({
          category,
          success: false,
          errorMessage: err.message
        });
        
      } finally {
        setLoading(false);
      }
    };

    fetchProducts();
  }, [category, trackUserAction, trackError, startPerformanceTimer]);

  // 商品クリック処理の監視
  const handleProductClick = (productId, productName) => {
    trackUserAction('product_clicked', {
      productId,
      productName,
      category,
      position: products.findIndex(p => p.id === productId) + 1
    });
  };

  // フィルター変更の監視
  const handleFilterChange = (filterType, filterValue) => {
    trackUserAction('filter_applied', {
      filterType,
      filterValue,
      currentProductCount: products.length,
      category
    });
  };

  if (loading) {
    return <div className="loading">商品を読み込み中...</div>;
  }

  if (error) {
    return (
      <div className="error">
        エラーが発生しました: {error}
        <button onClick={() => window.location.reload()}>
          再読み込み
        </button>
      </div>
    );
  }

  return (
    <div className="product-list">
      <h2>{category} の商品一覧</h2>
      
      {/* フィルター機能 */}
      <div className="filters">
        <select onChange={(e) => handleFilterChange('price', e.target.value)}>
          <option value="">価格帯を選択</option>
          <option value="0-1000">1,000円以下</option>
          <option value="1000-5000">1,000-5,000円</option>
          <option value="5000+">5,000円以上</option>
        </select>
      </div>
      
      {/* 商品一覧 */}
      <div className="products-grid">
        {products.map((product) => (
          <div
            key={product.id}
            className="product-card"
            onClick={() => handleProductClick(product.id, product.name)}
          >
            <img src={product.image} alt={product.name} />
            <h3>{product.name}</h3>
            <p className="price">¥{product.price.toLocaleString()}</p>
          </div>
        ))}
      </div>
    </div>
  );
};

export default ProductList;

// components/NewRelicErrorBoundary.jsx
import React from 'react';

class NewRelicErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hasError: false,
      error: null,
      errorInfo: null,
      errorId: null
    };
  }

  static getDerivedStateFromError(error) {
    // エラーが発生した時点で状態を更新
    return {
      hasError: true,
      error
    };
  }

  componentDidCatch(error, errorInfo) {
    // エラーの詳細情報を状態に保存
    this.setState({
      error,
      errorInfo,
      errorId: this.generateErrorId()
    });

    // New Relicにエラーを送信
    this.reportErrorToNewRelic(error, errorInfo);
  }

  generateErrorId = () => {
    return `error_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
  };

  reportErrorToNewRelic = (error, errorInfo) => {
    if (!window.newrelic) {
      console.warn('New Relic is not available');
      return;
    }

    try {
      // エラーの基本情報を収集
      const errorDetails = {
        errorId: this.state.errorId,
        componentStack: errorInfo.componentStack,
        errorBoundary: this.props.name || 'UnnamedErrorBoundary',
        url: window.location.href,
        userAgent: navigator.userAgent,
        timestamp: new Date().toISOString(),
        
        // Reactの詳細情報
        reactVersion: React.version,
        props: this.sanitizeProps(this.props),
        
        // ユーザーコンテキスト
        userId: this.props.userId,
        sessionId: this.getSessionId(),
        
        // ブラウザ環境情報
        viewport: {
          width: window.innerWidth,
          height: window.innerHeight
        },
        memory: window.performance?.memory ? {
          usedJSHeapSize: window.performance.memory.usedJSHeapSize,
          totalJSHeapSize: window.performance.memory.totalJSHeapSize
        } : null
      };

      // New Relicにエラーを通知
      window.newrelic.noticeError(error, errorDetails);

      // カスタムイベントとしても記録
      window.newrelic.addPageAction('react_error_boundary_triggered', {
        errorId: this.state.errorId,
        errorMessage: error.message,
        componentName: this.props.name,
        severity: this.props.severity || 'high',
        recoverable: this.props.fallback ? true : false
      });

    } catch (reportingError) {
      console.error('Failed to report error to New Relic:', reportingError);
    }
  };

  sanitizeProps = (props) => {
    // 機密情報を除外してpropsをサニタイズ
    const sanitized = { ...props };
    const sensitiveKeys = ['password', 'token', 'secret', 'key', 'auth'];
    
    Object.keys(sanitized).forEach(key => {
      if (sensitiveKeys.some(sensitive => key.toLowerCase().includes(sensitive))) {
        sanitized[key] = '[REDACTED]';
      }
    });
    
    return sanitized;
  };

  getSessionId = () => {
    // セッションIDの取得（LocalStorageやCookieから）
    return localStorage.getItem('sessionId') || 'unknown';
  };

  handleRetry = () => {
    // エラー状態をリセットして再試行
    this.setState({
      hasError: false,
      error: null,
      errorInfo: null,
      errorId: null
    });

    // 再試行イベントを記録
    if (window.newrelic) {
      window.newrelic.addPageAction('error_boundary_retry', {
        previousErrorId: this.state.errorId,
        componentName: this.props.name,
        timestamp: Date.now()
      });
    }
  };

  render() {
    if (this.state.hasError) {
      // カスタムフォールバックUIが指定されている場合
      if (this.props.fallback) {
        return this.props.fallback(this.state.error, this.handleRetry);
      }

      // デフォルトのフォールバックUI
      return (
        <div className="error-boundary">
          <div className="error-boundary__container">
            <h2 className="error-boundary__title">
              申し訳ございません。予期しないエラーが発生しました。
            </h2>
            
            <div className="error-boundary__details">
              <p>エラーID: <code>{this.state.errorId}</code></p>
              <p>お困りの場合は、このエラーIDをお知らせください。</p>
            </div>

            <div className="error-boundary__actions">
              <button 
                onClick={this.handleRetry}
                className="error-boundary__retry-btn"
              >
                再試行
              </button>
              
              <button 
                onClick={() => window.location.reload()}
                className="error-boundary__reload-btn"
              >
                ページを再読み込み
              </button>
            </div>

            {/* 開発環境でのみエラー詳細を表示 */}
            {process.env.NODE_ENV === 'development' && (
              <details className="error-boundary__debug">
                <summary>エラー詳細（開発環境のみ）</summary>
                <pre className="error-boundary__stack">
                  {this.state.error && this.state.error.toString()}
                  {this.state.errorInfo.componentStack}
                </pre>
              </details>
            )}
          </div>
        </div>
      );
    }

    return this.props.children;
  }
}

export default NewRelicErrorBoundary;

// App.jsx
import React from 'react';
import NewRelicErrorBoundary from './components/NewRelicErrorBoundary';
import ProductList from './components/ProductList';
import UserProfile from './components/UserProfile';

const App = () => {
  return (
    <div className="app">
      {/* 全体をエラーバウンダリで囲む */}
      <NewRelicErrorBoundary name="AppRoot" severity="critical">
        
        <header>
          <h1>EC サイト</h1>
          
          {/* ユーザープロフィール部分に個別のエラーバウンダリ */}
          <NewRelicErrorBoundary 
            name="UserProfile" 
            severity="medium"
            fallback={(error, retry) => (
              <div className="user-profile-error">
                <p>ユーザー情報の取得に失敗しました</p>
                <button onClick={retry}>再試行</button>
              </div>
            )}
          >
            <UserProfile />
          </NewRelicErrorBoundary>
        </header>

        <main>
          {/* 商品一覧に個別のエラーバウンダリ */}
          <NewRelicErrorBoundary 
            name="ProductList" 
            severity="high"
            fallback={(error, retry) => (
              <div className="product-list-error">
                <h2>商品の読み込みに失敗しました</h2>
                <p>一時的な問題が発生している可能性があります。</p>
                <button onClick={retry}>再試行</button>
                <button onClick={() => window.location.href = '/'}>
                  ホームに戻る
                </button>
              </div>
            )}
          >
            <ProductList category="electronics" />
          </NewRelicErrorBoundary>
        </main>
        
      </NewRelicErrorBoundary>
    </div>
  );
};

export default App;

// contexts/NewRelicContext.jsx
import React, { createContext, useContext, useEffect, useState, useCallback } from 'react';

const NewRelicContext = createContext();

export const useNewRelicContext = () => {
  const context = useContext(NewRelicContext);
  if (!context) {
    throw new Error('useNewRelicContext must be used within a NewRelicProvider');
  }
  return context;
};

export const NewRelicProvider = ({ children, config = {} }) => {
  const [isNewRelicReady, setIsNewRelicReady] = useState(false);
  const [sessionId, setSessionId] = useState(null);
  const [userContext, setUserContext] = useState({});

  // New Relicの初期化
  useEffect(() => {
    const checkNewRelicReady = () => {
      if (window.newrelic) {
        setIsNewRelicReady(true);
        
        // セッションIDの生成・設定
        const newSessionId = `session_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
        setSessionId(newSessionId);
        
        // New Relicにセッション開始を通知
        window.newrelic.addPageAction('session_start', {
          sessionId: newSessionId,
          timestamp: Date.now(),
          userAgent: navigator.userAgent,
          url: window.location.href
        });
        
        return;
      }
      
      // 100ms後に再チェック（最大10秒間）
      setTimeout(checkNewRelicReady, 100);
    };

    checkNewRelicReady();
  }, []);

  // ユーザーコンテキストの設定
  const setUser = useCallback((userId, attributes = {}) => {
    const newUserContext = {
      userId,
      ...attributes,
      loginTime: Date.now()
    };
    
    setUserContext(newUserContext);
    
    if (isNewRelicReady) {
      // New Relicにユーザー情報を設定
      window.newrelic.setUserId(userId);
      
      // ユーザー属性を設定
      Object.entries(attributes).forEach(([key, value]) => {
        window.newrelic.setCustomAttribute(`user.${key}`, value);
      });
      
      // ユーザーログインイベントを記録
      window.newrelic.addPageAction('user_login', {
        userId,
        sessionId,
        ...attributes
      });
    }
  }, [isNewRelicReady, sessionId]);

  // カスタムイベント送信
  const trackEvent = useCallback((eventName, attributes = {}) => {
    if (!isNewRelicReady) {
      console.warn('New Relic is not ready yet');
      return;
    }
    
    const eventData = {
      ...attributes,
      sessionId,
      userId: userContext.userId,
      timestamp: Date.now(),
      url: window.location.href
    };
    
    window.newrelic.addPageAction(eventName, eventData);
  }, [isNewRelicReady, sessionId, userContext.userId]);

  // エラー追跡
  const trackError = useCallback((error, context = {}) => {
    if (!isNewRelicReady) {
      console.error('Error occurred but New Relic is not ready:', error);
      return;
    }
    
    const errorContext = {
      ...context,
      sessionId,
      userId: userContext.userId,
      timestamp: Date.now(),
      url: window.location.href
    };
    
    window.newrelic.noticeError(error, errorContext);
  }, [isNewRelicReady, sessionId, userContext.userId]);

  // ページビュー追跡（SPA用）
  const trackPageView = useCallback((pageName, attributes = {}) => {
    if (!isNewRelicReady) return;
    
    const pageViewData = {
      pageName,
      ...attributes,
      sessionId,
      userId: userContext.userId,
      timestamp: Date.now(),
      referrer: document.referrer
    };
    
    window.newrelic.addPageAction('spa_page_view', pageViewData);
  }, [isNewRelicReady, sessionId, userContext.userId]);

  // パフォーマンス計測
  const createTimer = useCallback((timerName) => {
    const startTime = performance.now();
    
    return {
      end: (attributes = {}) => {
        const duration = performance.now() - startTime;
        
        trackEvent('performance_timer', {
          timerName,
          duration,
          ...attributes
        });
        
        return duration;
      }
    };
  }, [trackEvent]);

  const contextValue = {
    isNewRelicReady,
    sessionId,
    userContext,
    setUser,
    trackEvent,
    trackError,
    trackPageView,
    createTimer
  };

  return (
    <NewRelicContext.Provider value={contextValue}>
      {children}
    </NewRelicContext.Provider>
  );
};

// App.jsx
import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { NewRelicProvider } from './contexts/NewRelicContext';
import Home from './pages/Home';
import Products from './pages/Products';
import Profile from './pages/Profile';

const App = () => {
  return (
    <NewRelicProvider>
      <Router>
        <div className="app">
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/products" element={<Products />} />
            <Route path="/profile" element={<Profile />} />
          </Routes>
        </div>
      </Router>
    </NewRelicProvider>
  );
};

export default App;

// components/LoginForm.jsx
import React, { useState } from 'react';
import { useNewRelicContext } from '../contexts/NewRelicContext';

const LoginForm = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  
  const { setUser, trackEvent, trackError, createTimer } = useNewRelicContext();

  const handleLogin = async (e) => {
    e.preventDefault();
    setIsLoading(true);
    
    // ログイン処理のパフォーマンス計測開始
    const loginTimer = createTimer('user_login');
    
    try {
      trackEvent('login_attempt', {
        email,
        method: 'email_password'
      });
      
      const response = await fetch('/api/auth/login', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ email, password }),
      });
      
      if (!response.ok) {
        throw new Error(`Login failed: ${response.status}`);
      }
      
      const { user, token } = await response.json();
      
      // ユーザー情報をNew Relicコンテキストに設定
      setUser(user.id, {
        email: user.email,
        role: user.role,
        subscription: user.subscription,
        loginMethod: 'email_password'
      });
      
      // ログイン成功イベント
      trackEvent('login_success', {
        userId: user.id,
        loginDuration: loginTimer.end(),
        method: 'email_password'
      });
      
      // トークンを保存
      localStorage.setItem('authToken', token);
      
      // ダッシュボードにリダイレクト
      window.location.href = '/dashboard';
      
    } catch (error) {
      trackError(error, {
        operation: 'user_login',
        email,
        method: 'email_password'
      });
      
      loginTimer.end({
        success: false,
        errorMessage: error.message
      });
      
      alert('ログインに失敗しました: ' + error.message);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <form onSubmit={handleLogin} className="login-form">
      <div className="form-group">
        <label htmlFor="email">メールアドレス</label>
        <input
          type="email"
          id="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          required
        />
      </div>
      
      <div className="form-group">
        <label htmlFor="password">パスワード</label>
        <input
          type="password"
          id="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          required
        />
      </div>
      
      <button type="submit" disabled={isLoading}>
        {isLoading ? 'ログイン中...' : 'ログイン'}
      </button>
    </form>
  );
};

export default LoginForm;

// composables/useNewRelic.js
import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue';

/**
 * New Relic監視用Composable
 * Vue 3 Composition APIを活用した監視実装
 */
export function useNewRelic(componentName, options = {}) {
  const {
    trackLifecycle = true,
    trackUserActions = true,
    trackStateChanges = false,
    autoTrackProps = []
  } = options;

  // リアクティブな状態
  const isNewRelicReady = ref(false);
  const componentMountTime = ref(null);
  const performanceMetrics = ref({
    renderCount: 0,
    lastRenderTime: 0,
    totalRenderTime: 0
  });

  // New Relicの準備状況確認
  const checkNewRelicReady = () => {
    if (window.newrelic) {
      isNewRelicReady.value = true;
      return true;
    }
    return false;
  };

  // コンポーネントライフサイクル監視
  onMounted(() => {
    componentMountTime.value = Date.now();
    
    if (checkNewRelicReady() && trackLifecycle) {
      window.newrelic.addPageAction('vue_component_mounted', {
        componentName,
        mountTime: componentMountTime.value,
        url: window.location.pathname,
        vueVersion: Vue.version || '3.x'
      });
    }

    // DOM更新完了後の処理
    nextTick(() => {
      if (isNewRelicReady.value && trackLifecycle) {
        const renderDuration = Date.now() - componentMountTime.value;
        performanceMetrics.value.lastRenderTime = renderDuration;
        performanceMetrics.value.totalRenderTime += renderDuration;
        performanceMetrics.value.renderCount++;

        window.newrelic.addPageAction('vue_component_render_complete', {
          componentName,
          renderDuration,
          renderCount: performanceMetrics.value.renderCount,
          totalRenderTime: performanceMetrics.value.totalRenderTime
        });
      }
    });
  });

  onUnmounted(() => {
    if (isNewRelicReady.value && trackLifecycle) {
      const totalLifetime = Date.now() - componentMountTime.value;
      
      window.newrelic.addPageAction('vue_component_unmounted', {
        componentName,
        totalLifetime,
        renderCount: performanceMetrics.value.renderCount,
        totalRenderTime: performanceMetrics.value.totalRenderTime,
        averageRenderTime: performanceMetrics.value.totalRenderTime / performanceMetrics.value.renderCount
      });
    }
  });

  // ユーザーアクション追跡
  const trackUserAction = (actionName, payload = {}) => {
    if (!isNewRelicReady.value || !trackUserActions) return;
    
    window.newrelic.addPageAction('vue_user_action', {
      componentName,
      actionName,
      payload,
      timestamp: Date.now(),
      url: window.location.pathname
    });
  };

  // エラー追跡
  const trackError = (error, context = {}) => {
    if (!isNewRelicReady.value) {
      console.error('Error in Vue component:', error);
      return;
    }
    
    window.newrelic.noticeError(error, {
      componentName,
      context,
      vueVersion: Vue.version || '3.x',
      url: window.location.pathname,
      timestamp: Date.now()
    });
  };

  // 非同期処理追跡
  const trackAsyncOperation = async (operationName, asyncFunction, context = {}) => {
    const startTime = Date.now();
    
    try {
      if (isNewRelicReady.value) {
        window.newrelic.addPageAction('vue_async_operation_start', {
          componentName,
          operationName,
          context,
          startTime
        });
      }
      
      const result = await asyncFunction();
      
      const duration = Date.now() - startTime;
      
      if (isNewRelicReady.value) {
        window.newrelic.addPageAction('vue_async_operation_complete', {
          componentName,
          operationName,
          context,
          duration,
          success: true
        });
      }
      
      return result;
      
    } catch (error) {
      const duration = Date.now() - startTime;
      
      trackError(error, {
        operation: operationName,
        context,
        duration
      });
      
      if (isNewRelicReady.value) {
        window.newrelic.addPageAction('vue_async_operation_failed', {
          componentName,
          operationName,
          context,
          duration,
          success: false,
          errorMessage: error.message
        });
      }
      
      throw error;
    }
  };

  // 状態変更監視（指定されたプロパティ）
  const trackStateChange = (stateName, newValue, oldValue) => {
    if (!isNewRelicReady.value || !trackStateChanges) return;
    
    window.newrelic.addPageAction('vue_state_change', {
      componentName,
      stateName,
      newValue: JSON.stringify(newValue),
      oldValue: JSON.stringify(oldValue),
      timestamp: Date.now()
    });
  };

  return {
    isNewRelicReady,
    performanceMetrics,
    trackUserAction,
    trackError,
    trackAsyncOperation,
    trackStateChange
  };
}