Expo SDK 52でSentry導入 - wheatandcatの開発ブログ

概要

以前はexpo/sentry-expoを使用していたが、Expo SDK 50以降で非推奨となった。現在は@sentry/react-nativeを使用する必要があるため、その手順を整理。

PR

github.com

実装

ローカル起動時の実装

以下の公式手順に従って@sentry/react-nativeを導入。

公式ドキュメント

まず以下のコマンドを実行。

npx @sentry/wizard@latest -i reactNative

コマンド実行中にSentryとの接続が行われ、初期設定が自動で完了。以下のコードが追加される。環境変数への置き換えも実施。

初期化コード

app/_layout.tsx

const navigationIntegration = Sentry.reactNavigationIntegration({
  enableTimeToInitialDisplay: !isRunningInExpoGo(),
});

Sentry.init({
  dsn: Constants.expoConfig?.extra?.SENTRY_DSN,
  debug: Constants.expoConfig?.extra?.APP_ENV !== "production",
  tracesSampleRate: 1.0,
  integrations: [navigationIntegration],
  enableNativeFramesTracking: !isRunningInExpoGo(),
});

export default Sentry.wrap(function Root() {
  ... // AppProviderなどのラップ
});

metro.config.js

const { getSentryExpoConfig } = require("@sentry/react-native/metro");
const config = getSentryExpoConfig(__dirname);
module.exports = config;

この状態でローカル環境ではSentryが動作可能。起動してエラーを発生させるとSentryに通知される。

詳細にはエラー箇所も表示される。

EAS Build時の実装

そのままEAS Buildを実行するとエラーが発生するため、必要な修正を行った。

SENTRY_AUTH_TOKENの追加

EAS Build時にはSENTRY_AUTH_TOKENが必要。環境変数に追加しておく。

トークンの作成方法

app.config.ts

plugins: [
  ...,
  [
    "@sentry/react-native/expo",
    {
      organization: process.env.SENTRY_ORGANIZATION,
      project: process.env.SENTRY_PROJECT,
      url: "https://sentry.io/",
      note: "Use SENTRY_AUTH_TOKEN env to authenticate with Sentry.",
    },
  ],
],

Android Build時の`expo.core.ExpoModulesPackage`エラー

pnpm環境でのみ発生するバグ。以下を参考に修正。

github.com

package.json

"expo-modules-autolinking": "*"

ローカルEAS Build時のalias関連エラー

ローカルでEAS Buildを実行した際に以下のエラーが出る。

Cannot find module 'babel-plugin-module-resolver'

原因はbabelのaliasが無効になること。

github.com

package.json

"babel-plugin-module-resolver": "^4.1.0"

babel.config.js

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: [
      [
        "module-resolver",
        {
          root: ["./"],
          alias: {
            "@": "./",
          },
        },
      ],
    ],
  };
};