Sentry Integration for React Apps

Discover seamless Sentry integration for robust error tracking. Elevate CI/CD pipelines with streamlined workflows and deploy react app.

Himanshu Pant

Published: December 27, 2023

Key takeaways

Sentry helps applications be more reliable by tracking errors in real-time and analyzes performance; thus, it is useful for developers in any field, such as finance or healthcare.
Adding Sentry into a React application requires use of Sentry package, ensuring it is configured as per environment, and use of error boundary elements to capture errorsWell. Such a design approach helps prevent various errors and allows monitoring the program’s performance effectively.
The algorithm of monitoring when Sentry is used together with GitHub CI/CD pipelines is integrated and includes building, deploying, and uploading processes for source maps to Sentry, mostly utilizing GitHub Actions for the sake of convenience and improved performance.

Introduction

In the dynamic landscape of software development, ensuring the robustness and reliability of applications is paramount. One essential tool that aids in achieving this goal is Sentry, a powerful error tracking and monitoring platform. In this blog, we will explore the integration of Sentry into a React app and the seamless inclusion of its functionalities within CI/CD pipelines on GitHub.

What is Sentry?

Sentry stands out as a leader in the realm of error tracking and performance monitoring. Its capabilities extend beyond mere error detection, encompassing real-time insights into application health and user experience. Whether you are involved in custom financial software development, building an iOS mobile app, or engaged in software development for healthcare, Sentry provides a unified platform for monitoring and optimizing your application’s performance.

Benefits and Uses of Sentry

Proactive Issue Identification: Sentry’s real-time error tracking allows developers to identify and resolve issues before they impact users, ensuring a seamless user experience.
Cross-Platform Support: Whether you are focused on cross-platform mobile app development services or specialized in Android apps development, Sentry offers support across various platforms, enhancing its versatility.
Tailored Solutions for Industries: From banking software development companies to those specializing in healthcare custom software development, Sentry adapts to the unique needs of diverse industries.
Effective QA Software Testing: Incorporating Sentry into your workflow streamlines the QA process, enabling quicker identification and resolution of bugs and issues.

Implementing Sentry in a React App

Now, let’s delve into the practical steps of integrating Sentry into a React application.

Step 1: Install Sentry Package

Begin by installing the Sentry package using npm:

npm install --save @sentry/react

1	npm install --save @sentry/react

Step 2: Initialize Sentry

Import and initialize Sentry in your application, providing the DSN obtained from the Sentry dashboard.

import { init,  BrowserTracing, Replay} from "@sentry/react";
const STAGING = "staging"

const initializeSentry = () => {
    init({
        dsn: process.env.REACT_APP_SENTRY_DNS,
        environment: process.env.REACT_APP_SENTRY_ENVIRONMENT || STAGING,
        integrations: [
            new BrowserTracing({
                tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],
            }),
            new Replay(),
        ],
        tracesSampleRate: 1.0,
        replaysSessionSampleRate: 0.1,
        replaysOnErrorSampleRate: 1.0,
    });
}

export default initializeSentry

import { init, BrowserTracing, Replay} from "@sentry/react";

const STAGING = "staging"

const initializeSentry = () => {

init({

dsn: process.env.REACT_APP_SENTRY_DNS,

environment: process.env.REACT_APP_SENTRY_ENVIRONMENT || STAGING,

integrations: [

new BrowserTracing({

tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],

}),

new Replay(),

tracesSampleRate: 1.0,

replaysSessionSampleRate: 0.1,

replaysOnErrorSampleRate: 1.0,

});

}

export default initializeSentry

In your React app’s entry point (usually index.js or App.js), import and initialize Sentry:

import React from "react";
import ReactDOM from "react-dom/client";
import "./main.css";
import App from "./App";
import initializeSentry from "./infrastructure/sentry";

const root = ReactDOM.createRoot(document.getElementById("root"));

initializeSentry()

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

import React from "react";

import ReactDOM from "react-dom/client";

import "./main.css";

import App from "./App";

import initializeSentry from "./infrastructure/sentry";

const root = ReactDOM.createRoot(document.getElementById("root"));

initializeSentry()

root.render(

<React.StrictMode>

<App />

</React.StrictMode>

);

Step 3: Capture Errors

If you’re using React 16 or a newer version, you can use the Error Boundary component to easily send JavaScript errors that happen inside a group of components to Sentry. This component also lets you show a backup user interface when an error occurs.

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

<Sentry.ErrorBoundary fallback={<p>An error has occurred</p>}>
  <Example />
</Sentry.ErrorBoundary>;

import React from "react";

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

<Sentry.ErrorBoundary fallback={<p>An error has occurred</p>}>

</Sentry.ErrorBoundary>;

Integrating with CI/CD Pipelines on GitHub

Efficient CI/CD pipelines are crucial for maintaining a smooth development workflow. Integrating Sentry into your GitHub CI/CD pipeline ensures that every deployment is closely monitored.

Step 1: Configure GitHub Actions

Create a GitHub Actions workflow file (e.g., .github/workflows/main.yml) with the following contents:

name: Dev Build
on:
  push:
    branches:
      - main
  workflow_dispatch:
jobs:
  build:
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [18.x]

    steps:
      - uses: actions/checkout@v1
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v1
        with:
          node-version: ${{ matrix.node-version }}
      - name: NPM Install
        run: |
          npm install
      - name: Dev Build
        run: |
          npm run build
        env:
          REACT_APP_API_URL: ${{ secrets.DEV_REACT_APP_API_URL }}

      - name: Upload Source Maps to Sentry
        run: |
          npm install -g @sentry/cli          
          sentry-cli sourcemaps inject ./build          
          sentry-cli sourcemaps upload ./build
        env:
          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
          SENTRY_ORG: ${{ secrets.SENTRY_ORG }}
          SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}

name: Dev Build

on:

push:

branches:

- main

workflow_dispatch:

jobs:

build:

runs-on: ubuntu-latest

strategy:

matrix:

node-version: [18.x]

steps:

- uses: actions/checkout@v1

- name: Use Node.js ${{ matrix.node-version }}

uses: actions/setup-node@v1

with:

node-version: ${{ matrix.node-version }}

- name: NPM Install

run: |

npm install

- name: Dev Build

run: |

npm run build

env:

REACT_APP_API_URL: ${{ secrets.DEV_REACT_APP_API_URL }}

- name: Upload Source Maps to Sentry

run: |

npm install -g @sentry/cli

sentry-cli sourcemaps inject ./build

sentry-cli sourcemaps upload ./build

env:

SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}

SENTRY_ORG: ${{ secrets.SENTRY_ORG }}

SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}

Step 2: Set Up Secrets

Navigate to your GitHub repository’s settings and add these secrets:

SENTRY_AUTH_TOKEN: Obtain from Sentry account settings.
SENTRY_ORG and SENTRY_PROJECT: Replace with your Sentry organization and project names.

Step 3: Commit and Push

Commit the changes to your repository and push to the main branch. GitHub Actions will trigger the Sentry integration.

Conclusion

With these steps, you have successfully integrated Sentry into your React app and established a streamlined CI/CD pipeline on GitHub. This approach enhances your development workflow, offering real-time insights and proactive issue resolution, making it an invaluable asset for custom software development across various domains. Whether you’re involved in financial software development, healthcare software development, or any other sector, Sentry proves to be a versatile tool in your toolkit.

In conclusion, the integration of Sentry not only elevates the reliability of your React applications but also contributes to the overall efficiency of your development processes, ensuring a seamless user experience in the ever-evolving landscape of software development.

Additional Resources

Sentry Docs

Get a Fast Estimate on Your Software Development Project

We are committed to delivering high-quality IT solutions tailored to meet the unique needs of our clients. As part of our commitment to transparency and excellence, we provide detailed project estimations to help our clients understand the scope, timeline, and budget associated with their IT initiatives.

Introduction
What is Sentry?
Benefits and Uses of Sentry
Implementing Sentry in a React App
Step 1: Install Sentry Package
Step 2: Initialize Sentry
Step 3: Capture Errors
Integrating with CI/CD Pipelines on GitHub
Step 1: Configure GitHub Actions
Step 2: Set Up Secrets
Step 3: Commit and Push
Conclusion

Solutions

For Agencies

For Enterprise

For Operations

For Business

For VCs

Industries

Travel and Hospitality

Healthcare

Energy

Retail and ECommerce

Education

Manufacturing

Gaming

Case Studies

How Innostax Streamlined Technique’s Project Management and Enhanced Efficiency through Automation

How Innostax Streamlined Travelstart’s Development Process and Delivered Outstanding Results

How Innostax Helped an Online Education Platform Modernize Its Entire Tech Stack

Core Offerings

Web Development

eCommerce

Mobile Apps

Offshore Development

Product Development

Software Testing

MVP Development Services

Custom software development services

Staff Augmentation

Dedicated Team

DevOps

Managed IT

IT Consulting

IT Outsourcing

Resource as a Service

Staff Augmentation

Digital Transformation

Digital Transformation

System Modernization

Cross Platform

React Native

Flutter

Xamarin

Ionic

Electron

React Native Desktop

Backend

Python

.Net

PHP

Java

NodeJS

GoLang

.NET Core

Frontend

ReactJs

VueJs

iOS

Android

AngularJS

Framework

Laravel

Symfony

Django

MEAN

MERN

Spring Boot

Database

Mongo DB

MySQL

GraphQL

Postgre SQL

SQL Server

Firebase

Our Process

Excellent Software, Decoded

Our Story

Building a Better Tomorrow

Links

Career Opportunities

Blogs