New Architecture へ移行したら本番だけ画面がカクつくとき — interop 層への静かなフォールバックを計測して切り分ける運用メモ

// src/diagnostics/archProbe.ts
// 起動時に一度だけ呼び、TurboModule 化されているモジュールと
// legacy interop に落ちているモジュールを切り分けて記録する。
import { TurboModuleRegistry } from 'react-native';
 
type ProbeResult = {
  name: string;
  isTurbo: boolean;
};
 
// 自分のアプリが実際に使っているネイティブモジュール名を列挙する。
// （依存ライブラリの README やネイティブ実装の MODULE_NAME を確認して埋める）
const SUSPECTS = [
  'RNDeviceInfo',
  'RNCImageMetadata',
  'RNFSManager',
  'RNCAsyncStorage',
];
 
export function probeArchitecture(): ProbeResult[] {
  return SUSPECTS.map((name) => {
    // TurboModuleRegistry.get は TurboModule として登録されていれば
    // 非 null を返す。null の場合は legacy 側で解決されている可能性が高い。
    const turbo = TurboModuleRegistry.get(name);
    return { name, isTurbo: turbo != null };
  });
}
// 期待する出力例:
// [{ name: 'RNDeviceInfo', isTurbo: false }, ...]  ← false が要注意

// App.tsx の初期化部
import { probeArchitecture } from './src/diagnostics/archProbe';
import { track } from './src/telemetry';
 
const probes = probeArchitecture();
const legacy = probes.filter((p) => !p.isTurbo).map((p) => p.name);
// 個人情報を載せず、モジュール名と件数だけを送る。
track('arch_probe', { legacyCount: legacy.length, legacyModules: legacy });

// src/diagnostics/wrapNativeCall.ts
// 疑わしいネイティブ呼び出しを包み、1フレーム予算(約16.6ms)を
// 超えた同期呼び出しだけを記録する。常時計測ではなく閾値超えのみ。
import { track } from './src/telemetry';
 
const FRAME_BUDGET_MS = 16.6;
 
export function timed<T>(label: string, fn: () => T): T {
  const start = performance.now();
  const result = fn();
  const elapsed = performance.now() - start;
  if (elapsed > FRAME_BUDGET_MS) {
    track('native_call_slow', { label, ms: Math.round(elapsed) });
  }
  return result;
}

// 一覧セル内での使用例
// 旧式モジュールの同期取得をセルのレンダリングごとに呼んでいた箇所
const meta = timed('imageMeta', () => ImageMetadata.getSync(uri));

// src/lib/imageMetaCache.ts
// uri 単位でメタ情報をキャッシュし、セル描画時の同期呼び出しを無くす。
// 取得はリスト表示の外（プリフェッチ時）で非同期に済ませる。
const cache = new Map<string, { width: number; height: number }>();
 
export async function prefetchMeta(uri: string): Promise<void> {
  if (cache.has(uri)) return;
  const meta = await ImageMetadata.getAsync(uri); // 非同期版を使う
  cache.set(uri, meta);
}
 
export function readMeta(uri: string) {
  return cache.get(uri); // セル内ではキャッシュ参照のみ。ネイティブを叩かない。
}

# 依存が New Architecture 対応かを確認する
npx @react-native-community/cli config 2>/dev/null | grep -i "newArch"
# 対応表は React Native Directory の "New Architecture" バッジでも確認できる

// specs/NativeImageMeta.ts
// 必要最小限の同期メソッドだけを TurboModule として宣言する。
import type { TurboModule } from 'react-native';
import { TurboModuleRegistry } from 'react-native';
 
export interface Spec extends TurboModule {
  getSize(uri: string): { width: number; height: number };
}
 
export default TurboModuleRegistry.getEnforcing<Spec>('NativeImageMeta');

// src/lib/featureGate.ts
// 新しい画像メタ経路を割合配信で開く。問題が出たら即座に 0% に戻せる。
import remoteConfig from './remoteConfig';
 
export function useTurboImageMeta(): boolean {
  // 例: 0〜100 の数値を返すリモート値。まず 10、安定したら 50、100 と上げる。
  return remoteConfig.getNumber('turbo_image_meta_rollout') >= bucketOf(userId);
}