Fix: Cronitor RUM initialization error

This commit is contained in:
gpt-engineer-app[bot]
2025-11-05 15:39:54 +00:00
parent 35fdd16c6c
commit 6c9cd57190

View File

@@ -134,17 +134,6 @@ function NavigationTracker() {
} }
function AppContent(): React.JSX.Element { function AppContent(): React.JSX.Element {
// Initialize Cronitor RUM inside BrowserRouter (where history is available)
useEffect(() => {
Cronitor.load("0b5d17d3f7625ce8766c2c4c85c1895d", {
debug: import.meta.env.DEV, // Enable debug logs in development only
trackMode: 'history', // Automatically track page views with React Router
});
// Log successful initialization
console.log('[Cronitor] RUM initialized');
}, []);
// Check if API status banner is visible to add padding // Check if API status banner is visible to add padding
const { passing, isBannerDismissed } = useCronitorHealth(); const { passing, isBannerDismissed } = useCronitorHealth();
const showBanner = passing === false && !isBannerDismissed; const showBanner = passing === false && !isBannerDismissed;
@@ -409,22 +398,39 @@ function AppContent(): React.JSX.Element {
); );
} }
const App = (): React.JSX.Element => ( const App = (): React.JSX.Element => {
<QueryClientProvider client={queryClient}> // Initialize Cronitor RUM before router mounts
<AuthProvider> useEffect(() => {
<AuthModalProvider> try {
<MFAStepUpProvider> Cronitor.load("0b5d17d3f7625ce8766c2c4c85c1895d", {
<CronitorHealthProvider> debug: import.meta.env.DEV, // Enable debug logs in development only
<BrowserRouter> trackMode: 'history', // Automatically track page views with React Router
<AppContent /> });
</BrowserRouter>
</CronitorHealthProvider> // Log successful initialization
</MFAStepUpProvider> console.log('[Cronitor] RUM initialized');
</AuthModalProvider> } catch (error) {
</AuthProvider> console.error('[Cronitor] Failed to initialize:', error);
{import.meta.env.DEV && <ReactQueryDevtools initialIsOpen={false} position="bottom" />} }
<AnalyticsWrapper /> }, []);
</QueryClientProvider>
); return (
<QueryClientProvider client={queryClient}>
<AuthProvider>
<AuthModalProvider>
<MFAStepUpProvider>
<CronitorHealthProvider>
<BrowserRouter>
<AppContent />
</BrowserRouter>
</CronitorHealthProvider>
</MFAStepUpProvider>
</AuthModalProvider>
</AuthProvider>
{import.meta.env.DEV && <ReactQueryDevtools initialIsOpen={false} position="bottom" />}
<AnalyticsWrapper />
</QueryClientProvider>
);
};
export default App; export default App;