Snippets

Integrating External Monitoring Tools for 404 Error Logging

Describes how to integrate external monitoring tools (such as Sentry or LogRocket) with TanStack Router to log and analyze 404 errors, facilitating better error management and insight.

import Sentry from '@sentry/react';
import { createBrowserRouter, createRoutesFromElements, Route } from 'react-router-dom';

First, we import Sentry for error logging, and the necessary functions from react-router-dom to create the router and define routes.

const NotFound = () => {
  // Log the 404 error using Sentry
  Sentry.captureException(new Error('404: Page not found'));
  return <h1>404: Page Not Found</h1>;
};

Defines a NotFound component that logs a 404 error whenever it's rendered, using Sentry to capture the exception.

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path='*' element={<NotFound />} />
  )
);

Creates a router with a wildcard route. Any unmatched routes will render the NotFound component, thereby logging a 404 error.