This content originally appeared on DEV Community and was authored by Vladimir Kukresh
Introduction
In modern web development, building functional applications is only half the battle. Ensuring stability and performance is equally critical. Uncaught errors can degrade user experience and lead to lost customers. Sentry, a powerful error monitoring and performance analysis platform, helps developers detect and resolve issues swiftly. In this article, we’ll walk through integrating Sentry into a React application, covering advanced use cases and best practices to maximize its potential.
1. Setting Up Sentry
Step 1: Create a Sentry Project
- Sign up at sentry.io and create a new React project.
- Retrieve your DSN (Data Source Name)—a unique project identifier for client integration. Store this securely, preferably in environment variables (e.g.,
.env).
Step 2: Install Required Packages
npm install @sentry/react @sentry/tracing @sentry/webpack-plugin # Includes source map plugin
2. Initializing Sentry
Update your app’s entry file (e.g., index.js or main.jsx for React 18+):
import * as Sentry from '@sentry/react';
import { BrowserTracing } from '@sentry/tracing';
import { createRoot } from 'react-dom/client';
Sentry.init({
dsn: import.meta.env.VITE_SENTRY_DSN, // Use environment variables (Vite example)
integrations: [new BrowserTracing()],
tracesSampleRate: 0.2, // Sample 20% of transactions for performance monitoring
environment: process.env.NODE_ENV, // 'development' or 'production'
release: 'my-app@1.0.0', // Track errors by version
ignoreErrors: ['ResizeObserver loop limit exceeded'], // Filter non-critical errors
beforeSend(event) {
// Block errors from third-party services
if (event.request?.url?.includes('adservice.com')) return null;
return event;
},
enableTracing: process.env.NODE_ENV === 'production', // Disable tracing in dev mode
});
// React 18+ setup
const root = createRoot(document.getElementById('root'));
root.render(<App />);
Key Notes:
- Use
import.meta.env(Vite) orprocess.env(Create React App) to manage secrets. -
enableTracingreduces overhead in development by disabling performance tracking.
3. Error Handling
Automatic Error Tracking
Sentry’s built-in Error Boundary captures React component errors. Add context for debugging:
import { ErrorBoundary } from '@sentry/react';
function App() {
return (
<ErrorBoundary
fallback={<ErrorScreen />} // Custom error UI
onError={(error, componentStack) => {
Sentry.captureException(error, {
contexts: { react: { componentStack } }, // Include component trace
tags: { section: "checkout-page" }, // Tag errors by feature
});
}}
>
<YourApp />
</ErrorBoundary>
);
}
Manual Error Capture
Track API failures or async operations:
const fetchUserData = async () => {
try {
const response = await axios.get('/api/user');
} catch (error) {
Sentry.captureException(error, {
extra: { endpoint: '/api/user' }, // Add request context
user: { id: '123' }, // Associate errors with users
});
}
};
4. Advanced Integrations
React Router v6 Support
For modern routing:
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import { reactRouterV6Instrumentation } from '@sentry/react';
const router = createBrowserRouter([...routes]);
Sentry.init({
integrations: [
new BrowserTracing({
routingInstrumentation: reactRouterV6Instrumentation(
router,
router.state.location,
router.state.navigation
),
tracingOrigins: ['api.yourservice.com'], // Trace API requests
}),
],
});
Redux Toolkit Integration
Monitor state changes in Redux:
import { configureStore } from '@reduxjs/toolkit';
import { sentryReduxEnhancer } from '@sentry/react';
const store = configureStore({
reducer: rootReducer,
enhancers: [sentryReduxEnhancer()], // Logs actions and state on errors
});
5. Performance Monitoring
Component Rendering Profiling
Identify slow components with Sentry’s profiler:
import { withProfiler } from '@sentry/react';
const Dashboard = () => { ... };
export default withProfiler(Dashboard, { name: "DashboardPage" });
Custom Transactions
Measure critical operations:
const processImageUpload = async (file) => {
const transaction = Sentry.startTransaction({ name: "ImageUpload" });
try {
await uploadToCloud(file);
transaction.finish();
} catch (error) {
transaction.setStatus('failed');
transaction.finish();
Sentry.captureException(error);
}
};
6. Best Practices
Source Maps for Debugging
Upload source maps during builds using @sentry/webpack-plugin:
// webpack.config.js
const SentryPlugin = require('@sentry/webpack-plugin');
module.exports = {
plugins: [
new SentryPlugin({
authToken: process.env.SENTRY_AUTH_TOKEN,
org: 'your-org',
project: 'your-project',
include: './dist',
release: 'my-app@1.0.0',
}),
],
};
Alerting and Notifications
Configure Slack alerts:
- In Sentry: Project Settings → Integrations → Slack.
- Choose events to monitor (e.g., "New Errors" or "Performance Issues").
Release Tracking with CI/CD
Automate release tagging using GitHub Actions:
- name: Create Sentry Release
uses: getsentry/action-release@v1
env:
SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
with:
environment: production
version: ${{ github.sha }} // Link releases to Git commits
Conclusion
Integrating Sentry into your React application transforms how you handle errors and optimize performance. By leveraging automatic error boundaries, advanced tracing, and integrations with tools like React Router and Redux, you gain deep insights into your app’s health. Follow best practices like source map uploads and CI/CD automation to streamline debugging and accelerate issue resolution.
Next Steps:
- Explore Sentry’s React documentation.
- Implement custom metrics (e.g., key user journey timings).
- Set up dashboards to visualize error trends and performance bottlenecks.
With Sentry, you’re not just fixing bugs—you’re building a more resilient and user-friendly application.
This content originally appeared on DEV Community and was authored by Vladimir Kukresh
Vladimir Kukresh | Sciencx (2025-02-10T21:57:31+00:00) Integrating Error Monitoring and Performance Analysis with Sentry in a React Application. Retrieved from https://www.scien.cx/2025/02/10/integrating-error-monitoring-and-performance-analysis-with-sentry-in-a-react-application/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.