diff --git a/js/app/components/provider/provider.shared.tsx b/js/app/components/provider/provider.shared.tsx index 663a0b76..889e8f2c 100644 --- a/js/app/components/provider/provider.shared.tsx +++ b/js/app/components/provider/provider.shared.tsx @@ -3,6 +3,7 @@ import { LinkingOptions, NavigationContainer, } from "@react-navigation/native"; +import * as Sentry from "@sentry/react-native"; import { BrandedThemeProvider, I18nProvider, @@ -16,22 +17,35 @@ import useStreamplaceNode from "hooks/useStreamplaceNode"; import React from "react"; import { useOAuthSession } from "store/hooks"; -// export default Sentry.wrap(ProviderInner); - import { i18n } from "@streamplace/components"; +import * as Application from "expo-application"; +import Constants from "expo-constants"; +import * as Updates from "expo-updates"; import { Platform } from "react-native"; import { SafeAreaProvider } from "react-native-safe-area-context"; -// Sentry.setExtras({ -// manifest: Updates.manifest, -// linkingUri: Constants.linkingUri, -// }); -// Sentry.setTag("expoChannel", Updates.channel); -// Sentry.setTag("appVersion", Application.nativeApplicationVersion); -// Sentry.setTag("deviceId", Constants.sessionId); -// Sentry.setTag("executionEnvironment", Constants.executionEnvironment); -// Sentry.setTag("expoGoVersion", Constants.expoVersion); -// Sentry.setTag("expoRuntimeVersion", Constants.expoRuntimeVersion); +// get proper DSN for environment +// on ios/android it's process.env.EXPO_PUBLIC_SENTRY_DSN +// on web it will be injected at runtime +let dsn = undefined; +if (Platform.OS === "web") { + dsn = (window as any).SENTRY_DSN; +} else { + dsn = process.env.EXPO_PUBLIC_SENTRY_DSN || undefined; +} + +if (dsn) { + Sentry.setExtras({ + manifest: Updates.manifest, + linkingUri: Constants.linkingUri, + }); + Sentry.setTag("expoChannel", Updates.channel); + Sentry.setTag("appVersion", Application.nativeApplicationVersion); + Sentry.setTag("deviceId", Constants.sessionId); + Sentry.setTag("executionEnvironment", Constants.executionEnvironment); + Sentry.setTag("expoGoVersion", Constants.expoVersion); + Sentry.setTag("expoRuntimeVersion", Constants.expoRuntimeVersion); +} const isWeb = Platform.OS === "web"; @@ -46,40 +60,32 @@ const SPDarkTheme = { }, }; -export default function ProviderInner({ +function ProviderInner({ children, linking, }: { children: React.ReactNode; linking: LinkingOptions; }) { - // // get proper DSN for environment - // // on ios/android it's process.env.EXPO_PUBLIC_SENTRY_DSN - // // on web it will be injected at runtime - // let dsn = undefined; - // if (Platform.OS === "web") { - // dsn = (window as any).SENTRY_DSN; - // } else { - // dsn = process.env.EXPO_PUBLIC_SENTRY_DSN || undefined; - // } - - // Sentry.init({ - // dsn, - // // Adds more context data to events (IP address, cookies, user, etc.) - // // For more information, visit: https://docs.sentry.io/platforms/react-native/data-management/data-collected/ - // sendDefaultPii: true, - - // // Configure Session Replay - // replaysSessionSampleRate: 0.1, - // replaysOnErrorSampleRate: 1, - // integrations: [ - // Sentry.mobileReplayIntegration(), - // Sentry.feedbackIntegration(), - // ], - - // // uncomment the line below to enable Spotlight (https://spotlightjs.com) - // spotlight: __DEV__, - // }); + if (dsn) { + Sentry.init({ + dsn, + // Adds more context data to events (IP address, cookies, user, etc.) + // For more information, visit: https://docs.sentry.io/platforms/react-native/data-management/data-collected/ + sendDefaultPii: true, + + // Configure Session Replay + replaysSessionSampleRate: 0.1, + replaysOnErrorSampleRate: 1, + integrations: [ + Sentry.mobileReplayIntegration(), + Sentry.feedbackIntegration(), + ], + + // uncomment the line below to enable Spotlight (https://spotlightjs.com) + spotlight: __DEV__, + }); + } return ( @@ -140,3 +146,10 @@ export const FontProvider = ({ children }: { children: React.ReactNode }) => { return <>{children}; }; + +let wrappedProvider = ProviderInner; +if (dsn) { + wrappedProvider = Sentry.wrap(ProviderInner) as any; +} + +export default wrappedProvider; diff --git a/js/app/components/sidebar/sidebar-overlay.tsx b/js/app/components/sidebar/sidebar-overlay.tsx index 2970d470..fc013df7 100644 --- a/js/app/components/sidebar/sidebar-overlay.tsx +++ b/js/app/components/sidebar/sidebar-overlay.tsx @@ -57,11 +57,6 @@ export function SidebarOverlay() { const mainLogo = useMainLogo(); const sidebarBackgroundImageAsset = useSidebarBackgroundImage(); - // Don't render if sidebar is not active (small screen) or hidden - if (!sidebar.isActive || sidebar.isHidden) { - return null; - } - const animatedSidebarStyle = useAnimatedStyle(() => { return { minWidth: sidebar.animatedWidth.value, @@ -69,6 +64,11 @@ export function SidebarOverlay() { }; }); + // Don't render if sidebar is not active (small screen) or hidden + if (!sidebar.isActive || sidebar.isHidden) { + return null; + } + const foregroundColor = theme.colors.text || "#fff"; const navItems: SidebarNavItem[] = [