Example needed of use with expo-router

[statico]

Summary

If you're using sentry-expo, you might also be using expo-router since you're part of the Expo ecosystem.

Unfortunately, I had trouble getting this to work with expo-router and had to write my own solution. It looks like this, which I have in our top-level _layout.tsx component:

  const pathname = usePathname()
  const segments = useSegments()

  const transaction = useRef<any | null>(null) // Can't find Transaction type
  const timer = useRef<NodeJS.Timeout | null>(null)

  useEffect(() => {
    if (timer.current) clearTimeout(timer.current)
    timer.current = setTimeout(() => {
      transaction.current?.finish?.()
      transaction.current = null
    }, 3000)

    transaction.current?.finish?.()
    transaction.current = Sentry.Native.startTransaction({
      // Transaction params are similar to those in @sentry/react-native
      name: "Route Change",
      op: "navigation",
      tags: {
        "routing.route.name": "/" + segments.join("/"),
      },
    })

    return () => {
      transaction.current?.finish?.()
      transaction.current = null
      if (timer.current) clearTimeout(timer.current)
    }
  }, [pathname])

Managed or bare workflow? If you have ios/ or android/ directories in your project, the answer is bare!

managed

What platform(s) does this occur on?

iOS

SDK Version (managed workflow only)

48

Environment

  expo-env-info 1.0.5 environment info:
    System:
      OS: macOS 13.5.2
      Shell: 5.9 - /bin/zsh
    Binaries:
      Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node
      Yarn: 1.19.0 - ~/.nvm/versions/node/v18.16.0/bin/yarn
      npm: 9.5.1 - ~/.nvm/versions/node/v18.16.0/bin/npm
    Managers:
      CocoaPods: 1.12.1 - /opt/homebrew/bin/pod
    SDKs:
      iOS SDK:
        Platforms: DriverKit 22.4, iOS 16.4, macOS 13.3, tvOS 16.4, watchOS 9.4
    IDEs:
      Android Studio: 2022.2 AI-222.4459.24.2221.9862592
      Xcode: 14.3.1/14E300c - /usr/bin/xcodebuild
    npmGlobalPackages:
      eas-cli: 5.2.0
    Expo Workflow: managed

Also:

〉jq '.dependencies' <package.json | egrep 'expo|sentry'
  "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
  "@clerk/clerk-expo": "^0.18.9",
  "@expo/webpack-config": "^18.1.0",
  "@sentry/react-native": "4.15.2",
  "expo": "^48.0.19",
  "expo-application": "~5.1.1",
  "expo-auth-session": "^4.0.3",
  "expo-av": "~13.2.1",
  "expo-camera": "~13.2.1",
  "expo-clipboard": "~4.1.2",
  "expo-constants": "~14.2.1",
  "expo-contacts": "~12.0.1",
  "expo-crypto": "~12.2.1",
  "expo-dev-client": "~2.2.1",
  "expo-device": "~5.2.1",
  "expo-document-picker": "~11.2.2",
  "expo-file-system": "~15.2.2",
  "expo-font": "~11.1.1",
  "expo-haptics": "~12.2.1",
  "expo-image": "~1.0.1",
  "expo-image-manipulator": "~11.1.1",
  "expo-image-picker": "~14.1.1",
  "expo-linking": "~4.0.1",
  "expo-localization": "~14.1.1",
  "expo-location": "~15.1.1",
  "expo-media-library": "~15.2.3",
  "expo-network": "~5.2.1",
  "expo-notifications": "~0.18.1",
  "expo-router": "^1.5.3",
  "expo-secure-store": "^12.1.1",
  "expo-sharing": "~11.2.2",
  "expo-splash-screen": "^0.18.2",
  "expo-status-bar": "~1.4.4",
  "expo-store-review": "~6.2.1",
  "expo-task-manager": "~11.1.1",
  "expo-updates": "~0.16.4",
  "sentry-expo": "~6.2.0",
  "stream-chat-expo": "^5.15.1",

Reproducible demo or steps to reproduce from a blank project

1. Create a project with Expo v48, npx expo install the usual stuff including sentry-expo and expo-router
2. Make sure enableInExpoDevelopment and debug are true
3. Add integrations: [new Sentry.Native.ReactNativeTracing({ ... })] to the Sentry init
4. Try initializing Sentry using routingInstrumentation and Sentry.Native.ReactNavigationInstrumentation

You may experience the infinite loop in #368 — in which case, add enableAppStartTracking: false

You'll find that the first route starts a transaction, but changing to any route doesn't start a transaction.

[wangzuo]

In expo router, there is no entry point App.js, so no way to wrap it with sentry.

[3DJakob]

When adding Sentry.init to my root layout using expo-router it seems to initiate multiple times as I'm getting
'http.client' span on transaction 'App Start'
In a loop. Some pointers on how to correctly implement sentry to expo-router would be much appreciated.

[prathmeshgodse]

@statico I am facing the same issue right now. I tried your solution in my app, but I'm getting this error

Cannot read property 'isReady' of undefined

The difference I noticed between our setup is that I'm using SDK 49. Not sure if that is cause this error.
I'm using an iOS device for testing.
Is there any additional setup required for the solution you have implemented?

[statico]

@prathmeshgodse We upgraded to Expo v49, but I just checked and the code is the same. No issues here.

Here's our package.json in case that helps:

〉jq '.dependencies' <package.json | egrep 'expo|sentry'
  "@clerk/clerk-expo": "0.19.16",
  "@expo/webpack-config": "19.0.0",
  "@sentry/react": "7.73.0",
  "@sentry/react-native": "5.10.0",
  "expo": "49.0.13",
  "expo-application": "5.4.0",
  "expo-auth-session": "5.2.0",
  "expo-av": "13.6.0",
  "expo-camera": "13.6.0",
  "expo-clipboard": "4.5.0",
  "expo-constants": "14.4.2",
  "expo-contacts": "12.4.0",
  "expo-crypto": "12.6.0",
  "expo-dev-client": "2.4.11",
  "expo-device": "5.6.0",
  "expo-document-picker": "11.7.0",
  "expo-file-system": "15.6.0",
  "expo-font": "11.6.0",
  "expo-haptics": "12.6.0",
  "expo-image": "1.5.1",
  "expo-image-manipulator": "11.5.0",
  "expo-image-picker": "14.5.0",
  "expo-linear-gradient": "~12.3.0",
  "expo-linking": "5.0.2",
  "expo-localization": "14.5.0",
  "expo-location": "16.3.0",
  "expo-media-library": "15.6.0",
  "expo-network": "5.6.0",
  "expo-notifications": "0.20.1",
  "expo-router": "2.0.8",
  "expo-secure-store": "12.5.0",
  "expo-sharing": "11.7.0",
  "expo-splash-screen": "0.20.5",
  "expo-status-bar": "1.7.1",
  "expo-store-review": "6.6.0",
  "expo-task-manager": "11.5.0",
  "expo-updates": "0.18.14",
  "sentry-expo": "7.0.1",

[prathmeshgodse]

Hey @statico, I made a small mistake. Moved your code snippet within the layout default export and now it works. Thanks for your reply!

On a side note, were you able to enable profiling for your app? I have tried wrapping my components with Sentry.Native.withProfiler but I do not get any profiling metrics.

This is my init code snippet

Sentry.init({
  dsn: DNS,
  enableInExpoDevelopment: true, // If `true`, Sentry will try to print out useful debugging information if something goes wrong with sending the event. Set it to `false` in production
  tracesSampleRate: 1.0,
  debug: false,
  _experiments: {
    profileSampleRate: 1.0
  }
});

[krystofwoldrich]

Hello everyone,
@sentry/react-native now supports Expo out of the box!

See the new documentation for expo-router https://docs.expo.dev/guides/using-sentry/#usage-with-expo-router

Update to https://github.com/getsentry/sentry-react-native/releases/tag/5.16.0 or newer to get all the new features.

Migration guides available:

• https://github.com/expo/fyi/blob/main/sentry-expo-migration.md
• https://docs.sentry.io/platforms/react-native/migration/sentry-expo/

[github-actions]

This issue is stale because it has been open for 60 days with no activity. If there is no activity in the next 7 days, the issue will be closed.

[github-actions]

This issue was closed because it has been inactive for 7 days since being marked as stale. Please open a new issue if you believe you are encountering a related problem.