Rork アプリ品質メトリクス2026 — Crashlytics・Instruments・Android Vitals で実現するリリース品質管理

// components/ErrorBoundary.tsx
import React, { Component, ErrorInfo } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import crashlytics from '@react-native-firebase/crashlytics';
 
interface Props {
  children: React.ReactNode;
  fallback?: React.ReactNode;
  screenName?: string;
}
 
interface State {
  hasError: boolean;
  error?: Error;
}
 
export class ErrorBoundary extends Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = { hasError: false };
  }
 
  static getDerivedStateFromError(error: Error): State {
    return { hasError: true, error };
  }
 
  componentDidCatch(error: Error, info: ErrorInfo): void {
    // Crashlytics にコンテキスト付きで記録
    crashlytics().setAttribute(
      'component_stack',
      info.componentStack?.slice(0, 500) ?? 'unknown'
    );
    if (this.props.screenName) {
      crashlytics().setAttribute('error_boundary_screen', this.props.screenName);
    }
    crashlytics().recordError(error);
  }
 
  render() {
    if (this.state.hasError) {
      return this.props.fallback ?? (
        <View style={styles.container}>
          <Text style={styles.title}>問題が発生しました</Text>
          <Text style={styles.message}>
            申し訳ありません。問題を修正するために情報を送信しました。
          </Text>
          <TouchableOpacity
            style={styles.button}
            onPress={() => this.setState({ hasError: false })}
          >
            <Text style={styles.buttonText}>もう一度試す</Text>
          </TouchableOpacity>
        </View>
      );
    }
    return this.props.children;
  }
}
 
const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 24 },
  title: { fontSize: 20, fontWeight: '600', marginBottom: 8 },
  message: { fontSize: 15, color: '#666', textAlign: 'center', marginBottom: 24 },
  button: { backgroundColor: '#007AFF', paddingHorizontal: 24, paddingVertical: 12, borderRadius: 8 },
  buttonText: { color: '#fff', fontSize: 16, fontWeight: '600' },
});

// 起動時間の自前計測（Instruments と併用）
// app/_layout.tsx
const appStartTime = useRef<number>(Date.now());
 
useEffect(() => {
  // 最初のインタラクション可能状態になった時点を記録
  const timeToInteractive = Date.now() - appStartTime.current;
 
  // Firebase Analytics に送信
  analytics().logEvent('app_launch_time', {
    time_to_interactive_ms: timeToInteractive,
    platform: Platform.OS,
    build_version: Constants.expoConfig?.version ?? 'unknown',
  });
 
  // 目標: iOS 2 秒未満、Android 3 秒未満
  if (timeToInteractive > 3000) {
    crashlytics().log(
      `Slow startup detected: ${timeToInteractive}ms`
    );
  }
}, []);

// ⚠️ メモリリークの例（Rork が生成したコードで時々出るパターン）
class ViewModel: ObservableObject {
    var timer: Timer?
 
    func startTimer() {
        // self を強参照するとタイマーが解放されない
        timer = Timer.scheduledTimer(withTimeInterval: 1.0, repeats: true) { _ in
            self.update() // ← ここが問題
        }
    }
}
 
// ✅ 修正版
func startTimer() {
    timer = Timer.scheduledTimer(withTimeInterval: 1.0, repeats: true) { [weak self] _ in
        self?.update()
    }
}

// React Native での重い処理は InteractionManager で遅延
import { InteractionManager } from 'react-native';
 
async function processLargeDataset(items: any[]): Promise<void> {
  // アニメーション完了後に実行
  await new Promise<void>((resolve) => {
    InteractionManager.runAfterInteractions(() => {
      resolve();
    });
  });
 
  // ここで重い処理を実行
  const processed = items.map(item => expensiveTransform(item));
  return processed;
}

// 大量データの分割処理
async function processInChunks<T>(
  items: T[],
  processor: (item: T) => T,
  chunkSize: number = 100
): Promise<T[]> {
  const results: T[] = [];
 
  for (let i = 0; i < items.length; i += chunkSize) {
    const chunk = items.slice(i, i + chunkSize);
    const processed = chunk.map(processor);
    results.push(...processed);
 
    // メインスレッドに制御を返す
    await new Promise(resolve => setTimeout(resolve, 0));
  }
 
  return results;
}

# .github/workflows/quality-gate.yml
name: App Quality Gate
 
on:
  push:
    branches: [main, 'release/*']
 
jobs:
  quality-check:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
 
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
 
      - name: Install dependencies
        run: npm ci
 
      - name: TypeScript type check
        run: npx tsc --noEmit
 
      - name: ESLint (no-any strict)
        run: npx eslint . --ext .ts,.tsx --rule '{"@typescript-eslint/no-explicit-any": "error"}'
 
      - name: Unit tests with coverage
        run: npx jest --coverage --passWithNoTests
        env:
          COVERAGE_THRESHOLD: '70'
 
      - name: Check bundle size
        run: |
          npx expo export --platform ios 2>&1 | grep "Bundle size"
          # 10MB を超えたらエラー（任意のしきい値）
 
      - name: Crashlytics threshold check
        run: |
          # Firebase Management API でクラッシュ率を取得
          CRASH_RATE=$(curl -s "https://firebaseappdistribution.googleapis.com/..." \
            -H "Authorization: Bearer ${{ secrets.FIREBASE_TOKEN }}" \
            | jq '.crashRate')
          if (( $(echo "$CRASH_RATE > 0.5" | bc -l) )); then
            echo "❌ Crash rate ${CRASH_RATE}% exceeds threshold 0.5%"
            exit 1
          fi
          echo "✅ Crash rate ${CRASH_RATE}% within threshold"