Example needed of use with expo-router
statico opened this issue · comments
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
- Create a project with Expo v48,
npx expo install
the usual stuff includingsentry-expo
andexpo-router
- Make sure
enableInExpoDevelopment
anddebug
are true - Add
integrations: [new Sentry.Native.ReactNativeTracing({ ... })]
to the Sentry init - Try initializing Sentry using
routingInstrumentation
andSentry.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.
In expo router, there is no entry point App.js, so no way to wrap it with sentry.
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.
@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?
@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",
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
}
});
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:
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.
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.