Vladimir Kukresh

Posted on Feb 10

Integrating Error Monitoring and Performance Analysis with Sentry in a React Application

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) or process.env (Create React App) to manage secrets.
enableTracing reduces 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.

DEV Community