ログオフ
開発2026-06-06

Expo × Reactotron でデバッグ環境を整備する：expo-sqlite の静かなバグも可視化できた

console.log だけでは追いきれない Expo アプリの挙動を Reactotron で可視化した。expo-sqlite の NULL/0 型バグなど、ログに出ないバグも見つけられるようになった。

Expo アプリのデバッグを console.log だけでやっていたら限界が来た。Reactotron を入れたら DB の挙動まで可視化できて、気づいていなかったバグが見つかった。

Reactotron とは

Reactotron は React Native / Expo アプリ向けのデバッグツール。Mac/Windows のデスクトップアプリとして動き、アプリの状態・ログ・ネットワーク・カスタムイベントをリアルタイムで表示できる。

セットアップ

npm install --save-dev reactotron-react-native reactotron-core-client

ReactotronConfig.ts（またはアプリのエントリポイントで import するファイル）を作成する：

// ReactotronConfig.ts
import Reactotron from 'reactotron-react-native';

if (__DEV__) {
  Reactotron
    .configure({ name: 'My App' })
    .useReactNative()
    .connect();
}

App.tsx の先頭で import する：

// App.tsx
if (__DEV__) {
  require('./ReactotronConfig');
}

デスクトップアプリ（infinitered/reactotron releases）を起動してからアプリを npx expo start すると接続される。

expo-sqlite のログを流す

Reactotron にカスタムログを流すと、DB 操作の詳細を追跡できる。

// DB 操作にログを追加
import Reactotron from 'reactotron-react-native';

function runQuery(db: SQLiteDatabase, sql: string, params: any[]) {
  const result = db.runSync(sql, params);
  if (__DEV__) {
    Reactotron.log?.({ sql, params, result });
  }
  return result;
}

これで INSERT/UPDATE のたびに何が実行されたか・結果がどうだったかが Reactotron の画面に流れる。

発見できたバグの例：NULL vs 0 問題

console.log では気づかなかったが、Reactotron でログを追ったら DB の特定カラムに null が保存されていた。コード上は 0 を渡しているはずだったのに、null チェックが漏れていて undefined が入り込んでいた。

// ❌ undefined が null として保存されていた
db.runSync('UPDATE records SET count = ?', [someValue]);  // someValue が undefined の場合

// ✅ デフォルト値を明示
db.runSync('UPDATE records SET count = ?', [someValue ?? 0]);

null と 0 は表示上同じ「0」になることがあり、console.log だけだと型の違いが見えにくい。Reactotron でオブジェクトとして展開すると型まで確認できる。

補足

  • Reactotron はシミュレーターと実機の両方で使える。実機の場合はアプリと PC が同じ Wi-Fi にいる必要がある
  • __DEV__ フラグで囲んでいるので本番ビルドには含まれない
  • Redux / MobX との統合プラグインもある（reactotron-redux 等）

※ 本記事にはアフィリエイトリンクが含まれます。

← 開発 一覧へ