Configuring Sentry

Let’s face it—your code is going to break. It happens to all of us. The question is: how fast can you fix it when it does? In this section, we’ll add Sentry to our React and Laravel application so we can catch those errors in the wild before our users start tweeting about them.

Setting Up Sentry

Our application features a React based frontend running in Laravel thanks to InertiaJS. We’ll need to instrument Sentry in both our frontend and backend, and then we can create a view in Sentry that will let us view issues across the projects.

Frontend Setup

Create your React Frontend Project
- Go to Sentry.io and create a new project
- Select “React” as the platform
- Choose “Error Monitoring”, “Tracing”, and “Session Replay”
Install the React SDK

The on screen instructions from the project will guide you through what to do next, but for completeness, we’re including the steps here. We’ll need to install the Sentry React SDK and add the Sentry initialization code to our app. To start, run the installation command from the root directory of the project
Terminal window
```
npm install --save @sentry/react
```

Initialize Sentry in your React Frontend Application

Navigate to the resources/js/app.tsx file and add the Sentry initialization code to the top of the file.

import * as Sentry from "@sentry/react";

Sentry.init({
   dsn: "https://5e7c8b1f16533acb2e66fef81b58efbe@o4508130833793024.ingest.us.sentry.io/4509240735629312",
   // Setting this option to true will send default PII data to Sentry.
   // For example, automatic IP address collection on events
   sendDefaultPii: true,
   integrations: [
      Sentry.browserTracingIntegration(),
      Sentry.replayIntegration()
   ],
 // Tracing
   tracesSampleRate: 1.0, //  Capture 100% of the transactions
 // Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled
   tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],
 // Session Replay
   replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
   replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when   sampling sessions where errors occur.
});

Backend Setup

Create your Sentry Project
- Go to Sentry.io and create a new project
- Select “Laravel” as the platform
- Choose “Error Monitoring”, “Tracing”, and “Profiling”
Take note of your DSN! You’ll need it soon!
Add Sentry with Composer
Terminal window
```
composer require sentry/sentry-laravel
```

Update your bootstrap/app.php file

Replace the contents of your bootstrap/app.php file with the following:

<?php

use App\Http\Middleware\HandleAppearance;
use App\Http\Middleware\HandleInertiaRequests;
use Illuminate\Foundation\Application;
use Illuminate\Foundation\Configuration\Exceptions;
use Illuminate\Foundation\Configuration\Middleware;
use Illuminate\Http\Middleware\AddLinkHeadersForPreloadedAssets;
use Sentry\Laravel\Integration;

return Application::configure(basePath: dirname(__DIR__))
   ->withRouting(
       web: __DIR__.'/../routes/web.php',
       commands: __DIR__.'/../routes/console.php',
       health: '/up',
   )
   ->withMiddleware(function (Middleware $middleware) {
       $middleware->encryptCookies(except: ['appearance', 'sidebar_state']);

       $middleware->web(append: [
           HandleAppearance::class,
           HandleInertiaRequests::class,
           AddLinkHeadersForPreloadedAssets::class,
       ]);
   })
   ->withExceptions(function (Exceptions $exceptions) {
       Integration::handles($exceptions);
   })
   ->create();

These changes will:

Add Sentry’s integration to your Laravel application
Add the Sentry integration to the withException block

Configure the Sentry DSN from your project

Run the following command to create your config/sentry.php file and add your DSN and sample rates to the .env file.
Terminal window
```
php artisan sentry:publish --dsn=your-dsn-here
```
Allow it to enable performing monitoring, and do not send the test event and transaction.

Navigate to the .env file and confirm its configured correctly.
Verify your configuraiton

Use the following command to verify your configuration
Terminal window
```
php artisan sentry:test
```
Check Sentry for the test event

Verify in Sentry that the event was received.

Understanding Sentry Features

Learn More: Error Monitoring

Error monitoring is the core functionality of Sentry. It allows you to:

Capture unhandled exceptions in real-time
See detailed stack traces
Get context about the user and environment
Track error frequency and impact
Assign errors to team members for resolution

When an error occurs, Sentry will show you:

The exact line of code that failed
What function was being executed
The sequence of function calls leading to the error
What browser/device the user was using
Custom context you’ve added to your app

This is essential for quickly identifying and fixing critical issues before they affect more users.

Learn More: Tracing

Tracing helps you track how your application performs for real users:

Track page load times
Monitor API call durations
Identify slow database queries
See frontend rendering performance
Set performance thresholds and alerts

Sentry’s performance monitoring creates “traces” for each significant operation in your app. Each trace contains “spans” representing smaller operations within it.

This allows you to:

See which parts of your application are running slowly
Track performance over time
Compare performance across different pages and features
Identify performance regressions after deployments
Correlate performance issues with errors

By monitoring performance, you can ensure your application not only works but works efficiently.

Learn More: Replays

Replays are like having a video recording of what your users experienced:

Watch recreations of user sessions leading up to errors
See exactly what users saw and did
Identify UI/UX issues that lead to confusion
Understand complex user interactions that trigger bugs
Reproduce hard-to-track errors

Replays captures:

DOM changes
User interactions (clicks, scrolls, form inputs)
Console logs
Network requests

Privacy features ensure sensitive data isn’t captured:

Automatic PII masking
Customizable privacy rules
Consent-based recording

This feature dramatically reduces time spent trying to reproduce issues, especially those that depend on specific user interactions or state sequences.

Next Steps

Now that Sentry is configured in your application, you’re ready to start the workshop exercises. These will guide you through common scenarios and show you how to use Sentry to diagnose and fix them.

Head to the Debugging Issues section to start your debugging journey.