Getting Started with Sentry

In this module, you’ll learn how to set up Sentry monitoring in your fullstack JavaScript application. We’ll configure Error Monitoring, Logging, Session Replays, and Tracing for both the Vite React (alongside React Router 7) frontend and the Node.js backend to give you complete visibility into your application’s behavior.

Learning Objectives

By the end of this module, you will:

Set up Sentry Error Monitoring for both frontend and backend
Configure Session Replays to debug user interactions
Implement structured logging across your application
Set up distributed tracing to track request flows
Create your first traces and spans with meaningful context

What is Sentry?

Sentry is an error monitoring and performance monitoring platform that helps developers identify, debug, and resolve issues in their applications. Key features include:

Error Monitoring: Automatic error detection and alerting
Session Replays: Visual recordings of user sessions when errors occur
Performance Monitoring: Distributed tracing and performance insights
Logging: Structured log collection and analysis

Setting Up Sentry in Your Frontend (Vite + React + React Router 7)

Before you get into the next steps, you should create your frontend and server projects inside your sentry account.

You’ll need to take note of your Sentry DSNs along the way, which you receive when you configure the projects.

Select React and Node.js as the platforms respectively.

Install Sentry’s React SDK

pnpm add @sentry/react --filter frontend

Initialize Sentry

Create ./apps/frontend/src/instrument.ts with the following content:

import * as Sentry from '@sentry/react';
import { useEffect } from 'react';
import {
  useLocation,
  useNavigationType,
  createRoutesFromChildren,
  matchRoutes,
} from 'react-router-dom';

Sentry.init({
  dsn: '<Your Sentry DSN>',
  sendDefaultPii: true,
  integrations: [
    Sentry.browserTracingIntegration(),
    Sentry.replayIntegration(),
    Sentry.reactRouterV7BrowserTracingIntegration({
      useEffect: useEffect,
      useLocation,
      useNavigationType,
      createRoutesFromChildren,
      matchRoutes,
    }),
  ],
  _experiments: {
    enableLogs: true,
  },
  tracesSampleRate: 1.0,
  tracePropagationTargets: ['localhost:3001'],
  replaysSessionSampleRate: 1.0,
  replaysOnErrorSampleRate: 1.0,
});

Import and update your main.tsx entry point

import './instrument.ts';
import { createRoot } from 'react-dom/client';
import * as Sentry from '@sentry/react';
import App from './App.tsx';
import './index.css';

createRoot(document.getElementById('root')!, {
  onUncaughtError: Sentry.reactErrorHandler((error, errorInfo) => {
    console.warn('Uncaught error', error, errorInfo.componentStack);
  }),
  onCaughtError: Sentry.reactErrorHandler(),
  onRecoverableError: Sentry.reactErrorHandler(),
}).render(
  <App />
);

Create your ErrorBoundary (in the /components root)

Create ./apps/frontend/src/components/ErrorBoundary.tsx:

import * as Sentry from '@sentry/react';
import { useRouteError, isRouteErrorResponse } from 'react-router-dom';
import React from 'react';

const ErrorBoundary = () => {
  const error = useRouteError();

  React.useEffect(() => {
    // Send route errors to Sentry
    if (error) {
      Sentry.captureException(error);
    }
  }, [error]);

  if (isRouteErrorResponse(error)) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gray-50">
        <div className="text-center">
          <h1 className="text-4xl font-bold text-red-600 mb-4">
            {error.status}
          </h1>
          <p className="text-xl text-gray-600 mb-4">{error.statusText}</p>
          <p className="text-gray-500">{error.data}</p>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50">
      <div className="text-center">
        <h1 className="text-2xl font-bold text-red-600 mb-4">
          Something went wrong
        </h1>
        <p className="text-gray-600 mb-4">
          {error instanceof Error ? error.message : 'Unknown error occurred'}
        </p>
        <button
          onClick={() => window.location.reload()}
          className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
        >
          Reload page
        </button>
      </div>
    </div>
  );
};

export default ErrorBoundary;

Update your App.tsx to include Sentry Error Boundary and React Router

// previous imports

import * as Sentry from '@sentry/react';
import ErrorBoundary from './components/ErrorBoundary';

const SentryRoutes = Sentry.withSentryReactRouterV7Routing(Routes);

// Protected route component
const ProtectedRoute: React.FC<{ children: React.ReactNode }> = ({
  children,
}) => {
  const { isAuthenticated, isLoading } = useAuth();

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (!isAuthenticated) {
    return <Navigate to="/login" replace />;
  }

  return <>{children}</>;
};

function App() {
  return (
    <AuthProvider>
      <UserStateProvider>
        <Router>
          <SentryRoutes>
            <Route
              path="/login"
              element={<LoginPage />}
              errorElement={<ErrorBoundary />}
            />

            <Route path="/" element={<MainLayout />}>
              <Route
                index
                element={
                  <ProtectedRoute>
                    <HomePage />
                  </ProtectedRoute>
                }
              />

              <Route
                path="courses"
                element={
                  <ProtectedRoute>
                    <CoursesPage />
                  </ProtectedRoute>
                }
                errorElement={<ErrorBoundary />}
              />

              <Route
                path="courses/:courseId"
                element={
                  <ProtectedRoute>
                    <CourseDetailPage />
                  </ProtectedRoute>
                }
                errorElement={<ErrorBoundary />}
              />

              <Route
                path="my-courses"
                element={
                  <ProtectedRoute>
                    <MyCoursesPage />
                  </ProtectedRoute>
                }
                errorElement={<ErrorBoundary />}
              />

              <Route
                path="favorites"
                element={
                  <ProtectedRoute>
                    <FavoritesPage />
                  </ProtectedRoute>
                }
                errorElement={<ErrorBoundary />}
              />

              <Route
                path="lesson-plans"
                element={
                  <ProtectedRoute>
                    <LessonPlansPage />
                  </ProtectedRoute>
                }
                errorElement={<ErrorBoundary />}
              />

              <Route
                path="profile"
                element={
                  <ProtectedRoute>
                    <ProfilePage />
                  </ProtectedRoute>
                }
                errorElement={<ErrorBoundary />}
              />
            </Route>

            <Route
              path="*"
              element={<Navigate to="/" replace />}
              errorElement={<ErrorBoundary />}
            />
          </SentryRoutes>
        </Router>
      </UserStateProvider>
    </AuthProvider>
  );
}

export default App;

Setup the Vite plugin with Sentry’s Wizard

We can use Sentry’s wizard to help us setup the Vite plugin. The Vite plugin takes care of the sourcemaps for us.
Terminal window
```
cd ../frontend && pnpx @sentry/wizard@latest -i sourcemaps
```
This will trigger a series of prompts:
- Select Yes if you get notified about uncommited files
- Select Sentry SaaS when you get asked about what type of Sentry account you have
- Select Yes if you already have a Sentry account
- This will open a browser window that lets you select your organization and (frontend) project
- Once you do, you’re back to the terminal and you’ll be prompted about the bundler, so select Vite
- Select PNPM as the package manager
- Select No when asked about using a CI/CD tool
That’s it! The vite.config.ts file will be updated, and you’ll see a .env.sentry-build-plugin file next to your .env file.

Now when we build our frontend, the Vite plugin will automatically upload the sourcemaps to Sentry an link them to our project and release.

These configurations will setup your React frontend to leverage all of Sentry’s core capabilities and ensure you’re capturing Errors, Traces, Logs, and Replays within your frontend application. Let’s move onto the backend.

Configuring Sentry in your Backend (Node.js)

Install Sentry SDK for Node.js
Terminal window
```
pnpm add @sentry/node --filter server
```

Configure Sentry in your Node.js Server

Create ./apps/server/instrument.ts with the following content:

import * as Sentry from '@sentry/node';

Sentry.init({
  dsn: '<Your Sentry DSN>',
  _experiments: {
    enableLogs: true,
  },
  debug: true,
  tracesSampleRate: 1.0,
});

Import and update your index.ts entry point

import './instrument';
import * as Sentry from '@sentry/node';

// Add this after all routes,
// but before any and other error-handling middlewares are defined.
Sentry.setupExpressErrorHandler(app);

Use Sentry’s Wizard again to setup sourcemaps in the server project

cd ../server && pnpx @sentry/wizard@latest -i sourcemaps

The prompts will be the same, with the only difference this time being that we’ll select esbuild instead of Vite.

Be sure to add the generated sentryEsbuildPlugin in the plugins array of the build configuration in apps/server/build.js

const { sentryEsbuildPlugin } = require("@sentry/esbuild-plugin");

require("esbuild").build({
  sourcemap: true, // Source map generation must be turned on
  plugins: [
    // Put the Sentry esbuild plugin here after all other plugins
  ],
});

With these configurations in place, you’ve now got Sentry setup to monitor your application across both the frontend and server side implementations.

If you are currently running your application, it might be a good idea to toss a restart on it (from the root) after all of these configurations.

cd ../..
pnpm dev

Once that’s loaded, you can browse to http://localhost:5173 to view Sentry Academy.

Configuring Seer

Now we need to ensure that Sentry and Github are properly configured so that we can use Seer. This way Seer will have the full context of our code base and will be able to provide us with the best possible suggestions. We can even have it open PR’s for us once it’s determined root causes and applied fixes of errors found in Sentry.

Enable generative AI features

In Sentry, make sure AI features are enabled in your organization settings.
Set up the Sentry GitHub integration
- Navigate to Settings ➡️ Integrations ➡️ GitHub
- If you have the legacy GitHub integration installed, use the button next to GitHub to Upgrade. If you don’t have the legacy GitHub integration installed, click to Install.
- In the next view, click “Add Installation”.
- A GitHub install window should pop up. Click to “Authorize” Sentry.
Select which repositories Sentry should have access to (or select all repositories).
You should then be redirected back to the Sentry Integrations page. You may see a flow to choose the repo or organization to integrate with.
On your new GitHub instance in Sentry, click “Configure”.

All of your repositories will be added by default, you just have to refresh your screen. To only add select repositories, choose them from the dropdown list. Make sure you have given Sentry access to these repositories in GitHub in the previous steps. To be sure we’ll double check our Project ➡️ Settings ➡️ Seer to confirm our repo is preset in the list.