Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Example needed of use with expo-router #370

Closed
statico opened this issue Sep 13, 2023 · 8 comments
Closed

Example needed of use with expo-router #370

statico opened this issue Sep 13, 2023 · 8 comments
Labels

Comments

@statico
Copy link

statico commented Sep 13, 2023

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
Copy link

wangzuo commented Oct 20, 2023

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

@3DJakob
Copy link

3DJakob commented Nov 6, 2023

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
Copy link

@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
Copy link
Author

statico commented Dec 28, 2023

@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
Copy link

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
Copy link
Contributor

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:

Copy link

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 github-actions bot added the stale label Mar 21, 2024
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

5 participants