New Relic React Native統合設定 - クロスプラットフォーム監視の完全ガイド ​

import React from 'react';
import { NewRelic } from '@newrelic/react-native-agent';

// アプリケーション開始時の初期化
NewRelic.startAgent('YOUR_APPLICATION_TOKEN');

const App = () => {
  // アプリケーションコンポーネント
  return (
    // JSXコンテンツ
  );
};

export default App;

import { NewRelic } from '@newrelic/react-native-agent';

// ユーザー属性の設定
NewRelic.setUserId('user_12345');
NewRelic.setAttribute('userSubscription', 'premium');
NewRelic.setAttribute('appVersion', '2.1.0');

// カスタムイベントの記録
const recordPurchaseEvent = (itemId, price, currency) => {
  NewRelic.recordCustomEvent('PurchaseCompleted', {
    itemId: itemId,
    price: price,
    currency: currency,
    platform: Platform.OS,
    timestamp: Date.now()
  });
};

// コンポーネント内でのイベント記録
const handlePurchase = () => {
  // 購入処理
  recordPurchaseEvent('item_123', 29.99, 'USD');
};

// メトリクスの記録
NewRelic.recordMetric('Custom/ComponentRenderTime', 45.2);
NewRelic.recordMetric('Custom/NetworkRequestCount', 15);

import { NewRelic } from '@newrelic/react-native-agent';
import { NavigationContainer } from '@react-navigation/native';

const Navigation = () => {
  const navigationRef = useRef();
  
  const onStateChange = (state) => {
    const currentRouteName = getActiveRouteName(state);
    
    // 画面遷移イベントの記録
    NewRelic.recordCustomEvent('ScreenView', {
      screenName: currentRouteName,
      timestamp: Date.now(),
      previousScreen: getPreviousRouteName(state)
    });
  };
  
  return (
    <NavigationContainer
      ref={navigationRef}
      onStateChange={onStateChange}
    >
      {/* ナビゲーション構造 */}
    </NavigationContainer>
  );
};

import { NewRelic } from '@newrelic/react-native-agent';

// グローバル例外ハンドラーの設定
const originalHandler = ErrorUtils.getGlobalHandler();
ErrorUtils.setGlobalHandler((error, isFatal) => {
  NewRelic.recordError(error);
  originalHandler(error, isFatal);
});

// Promise rejectionの処理
const unhandledRejectionHandler = (reason, promise) => {
  NewRelic.recordError(reason);
};

// React Error Boundaryとの統合
class ErrorBoundary extends React.Component {
  componentDidCatch(error, errorInfo) {
    NewRelic.recordError(error, {
      componentStack: errorInfo.componentStack,
      errorBoundary: true
    });
  }
  
  render() {
    // エラーUI表示
    return this.props.children;
  }
}

import { NewRelic } from '@newrelic/react-native-agent';

// Fetch APIの監視
const monitoredFetch = async (url, options = {}) => {
  const startTime = Date.now();
  
  try {
    const response = await fetch(url, options);
    const endTime = Date.now();
    
    // 成功時のメトリクス記録
    NewRelic.recordMetric('Custom/NetworkRequest/Success', endTime - startTime);
    
    return response;
  } catch (error) {
    const endTime = Date.now();
    
    // エラー時のメトリクス記録
    NewRelic.recordMetric('Custom/NetworkRequest/Error', endTime - startTime);
    NewRelic.recordError(error);
    
    throw error;
  }
};

// Axios interceptorとの統合
import axios from 'axios';

axios.interceptors.request.use((config) => {
  config.metadata = { startTime: Date.now() };
  return config;
});

axios.interceptors.response.use(
  (response) => {
    const endTime = Date.now();
    const duration = endTime - response.config.metadata.startTime;
    
    NewRelic.recordMetric('Custom/AxiosRequest/Success', duration);
    return response;
  },
  (error) => {
    const endTime = Date.now();
    const duration = endTime - error.config.metadata.startTime;
    
    NewRelic.recordMetric('Custom/AxiosRequest/Error', duration);
    NewRelic.recordError(error);
    
    return Promise.reject(error);
  }
);

// Bundle読み込み時間の測定
const bundleStartTime = Date.now();

// アプリケーション初期化完了時
const onAppReady = () => {
  const bundleLoadTime = Date.now() - bundleStartTime;
  NewRelic.recordMetric('Custom/BundleLoadTime', bundleLoadTime);
};

// JavaScriptスレッドの監視
const measureJSThreadPerformance = () => {
  const start = Date.now();
  
  setTimeout(() => {
    const jsThreadDelay = Date.now() - start;
    NewRelic.recordMetric('Custom/JSThreadDelay', jsThreadDelay);
  }, 0);
};

// メモリ使用量の定期的な監視
const monitorMemoryUsage = () => {
  if (global.performance && global.performance.memory) {
    const memoryInfo = global.performance.memory;
    
    NewRelic.recordMetric('Custom/MemoryUsed', memoryInfo.usedJSHeapSize);
    NewRelic.recordMetric('Custom/MemoryTotal', memoryInfo.totalJSHeapSize);
    NewRelic.recordMetric('Custom/MemoryLimit', memoryInfo.jsHeapSizeLimit);
  }
};

// 定期実行の設定
setInterval(monitorMemoryUsage, 30000); // 30秒間隔

module.exports = {
  resolver: {
    blacklistRE: /node_modules\/.*\/node_modules\/react-native\/.*/,
  },
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
};