監視プラットフォーム

LogRocket

概要

LogRocketはフロントエンド監視とセッションリプレイプラットフォームです。ユーザーセッションの完全な録画により、バグ再現とUX問題の特定を支援する革新的ツールです。フロントエンド開発の複雑化に伴い需要拡大し、セッションリプレイ機能により、従来では把握困難だったユーザー体験の詳細な分析が可能になっています。

詳細

LogRocketは「ユーザーが実際に体験したこと」を完全に再現できる唯一無二のプラットフォームとして、フロントエンド監視の革新をもたらしています。

主要機能

• セッションリプレイ: ユーザーセッションの完全な録画と再生
• パフォーマンス監視: フロントエンドアプリケーションのパフォーマンス追跡
• エラートラッキング: JavaScript エラーとネットワークエラーの詳細追跡
• ユーザーアナリティクス: ユーザー行動パターンの分析
• Redux ロギング: Redux ステート変更の詳細ログ
• ネットワーク監視: API コールとレスポンスの完全な記録
• Heatmap: クリック・スクロール等のヒートマップ

技術的特徴

• 完全再現: DOM 操作、ネットワーク、コンソールログの全記録
• リアルタイム: ライブセッション監視とアラート
• プライバシー保護: 機密データの自動マスキング
• 高性能: ブラウザパフォーマンスへの影響最小化
• 統合: React、Vue、Angular等主要フレームワーク対応

メリット・デメリット

メリット

• バグ再現が非常に容易で開発効率が劇的向上
• ユーザー体験の詳細な分析が可能
• カスタマーサポートの品質向上
• フロントエンド特化で深い洞察が得られる
• 無料ティア提供
• 豊富なフレームワーク統合
• リアルタイム監視とアラート

デメリット

• バックエンド監視機能は限定的
• 大量データでのコスト増加
• プライバシー懸念（セッション記録）
• ストレージ容量の消費
• エンタープライズ機能が限定的
• 学習コストが高い

参考ページ

• LogRocket公式サイト
• LogRocket Documentation
• LogRocket GitHub
• LogRocket Blog

設定・監視例

基本セットアップ

// LogRocket基本初期化
import LogRocket from 'logrocket';

LogRocket.init('your-app-id');

// ユーザー識別
LogRocket.identify('user123', {
  name: 'John Doe',
  email: '[email protected]',
  subscriptionType: 'premium'
});

// セッション情報追加
LogRocket.getSessionURL((sessionURL) => {
  console.log('Session recorded at:', sessionURL);
});

メトリクス収集

// React アプリケーション統合
import LogRocket from 'logrocket';
import { setupLogRocketReact } from 'logrocket-react';

LogRocket.init('your-app-id');
setupLogRocketReact(LogRocket);

// Redux統合
import { createStore, applyMiddleware } from 'redux';
import LogRocket from 'logrocket';

const store = createStore(
  rootReducer,
  applyMiddleware(LogRocket.reduxMiddleware())
);

// カスタムログ
LogRocket.log('User clicked checkout button');
LogRocket.info('Payment process started');
LogRocket.warn('Network connection slow');
LogRocket.error('Payment failed');

// パフォーマンス追跡
LogRocket.track('Page Load Time', {
  page: window.location.pathname,
  loadTime: performance.now()
});

アラート設定

// エラーキャプチャ設定
LogRocket.captureException(new Error('Custom error message'));

// 自動エラーキャプチャ
window.addEventListener('error', (event) => {
  LogRocket.captureException(event.error);
});

// Promise rejection キャプチャ
window.addEventListener('unhandledrejection', (event) => {
  LogRocket.captureException(event.reason);
});

// カスタムアラート条件
LogRocket.init('your-app-id', {
  shouldCaptureRequest: (request) => {
    // API エラーのみキャプチャ
    return request.status >= 400;
  },
  
  dom: {
    inputSanitizer: true,  // 入力フィールド自動マスク
    textSanitizer: true,   // テキスト自動マスク
    blockSelector: '.sensitive-data' // 特定要素をブロック
  }
});

ダッシュボード作成

// Vue.js での LogRocket 統合
import LogRocket from 'logrocket';
import createPlugin from 'logrocket-vuex';

const app = createApp(App);

LogRocket.init('your-app-id');

// Vuex ストアプラグイン
const store = createStore({
  // store options
  plugins: [createPlugin(LogRocket)]
});

// カスタムイベント追跡
app.config.globalProperties.$logRocket = {
  track: (eventName, properties) => {
    LogRocket.track(eventName, properties);
  },
  
  identify: (userId, userData) => {
    LogRocket.identify(userId, userData);
  }
};

// 使用例
this.$logRocket.track('Product Viewed', {
  productId: 'ABC123',
  category: 'Electronics',
  price: 299.99
});

ログ分析

// Angular での LogRocket 統合
import LogRocket from 'logrocket';

@Injectable({
  providedIn: 'root'
})
export class LogRocketService {
  constructor() {
    LogRocket.init('your-app-id');
  }

  identify(userId: string, userData: any) {
    LogRocket.identify(userId, userData);
  }

  track(eventName: string, properties?: any) {
    LogRocket.track(eventName, properties);
  }

  captureException(error: Error) {
    LogRocket.captureException(error);
  }

  // HTTP インターセプター
  setupHttpInterceptor() {
    LogRocket.init('your-app-id', {
      network: {
        requestSanitizer: (request) => {
          // 機密データを除去
          if (request.body && request.body.password) {
            request.body = { ...request.body, password: '[FILTERED]' };
          }
          return request;
        },
        
        responseSanitizer: (response) => {
          // レスポンスから機密データ除去
          if (response.body && response.body.token) {
            response.body = { ...response.body, token: '[FILTERED]' };
          }
          return response;
        }
      }
    });
  }
}

インテグレーション設定

// Sentry との統合
import LogRocket from 'logrocket';
import * as Sentry from '@sentry/browser';

LogRocket.init('your-app-id');

LogRocket.getSessionURL((sessionURL) => {
  Sentry.configureScope((scope) => {
    scope.setContext('LogRocket', {
      sessionURL: sessionURL
    });
  });
});

// Slack 通知統合
LogRocket.init('your-app-id', {
  release: process.env.REACT_APP_VERSION,
  
  // セッション開始時の処理
  onload: () => {
    LogRocket.getSessionURL((sessionURL) => {
      // Slack webhook に送信
      fetch('YOUR_SLACK_WEBHOOK_URL', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          text: `New session started: ${sessionURL}`
        })
      });
    });
  }
});

// Google Analytics 統合
LogRocket.getSessionURL((sessionURL) => {
  gtag('event', 'logrocket_session', {
    'custom_parameter': sessionURL
  });
});

// カスタムメタデータ追加
LogRocket.addMetadata('Build Version', process.env.REACT_APP_VERSION);
LogRocket.addMetadata('Feature Flag', 'dark_mode_enabled');
LogRocket.addMetadata('A/B Test', 'variant_b');

高度な設定

// 条件付きセッション記録
LogRocket.init('your-app-id', {
  shouldCaptureRequest: (request) => {
    // 本番環境でのみ記録
    return process.env.NODE_ENV === 'production';
  },
  
  // パフォーマンス最適化
  mergeRequests: true,        // リクエスト統合
  parentDomain: '.example.com', // クロスドメイン
  
  // カスタムサニタイザー
  dom: {
    inputSanitizer: (text, element) => {
      // クレジットカード番号を自動マスク
      return text.replace(/\d{4}\s\d{4}\s\d{4}\s\d{4}/, '**** **** **** ****');
    }
  },
  
  console: {
    isEnabled: {
      log: true,
      info: true,
      warn: true,
      error: true,
      debug: false  // debug ログは除外
    }
  }
});