Monitoring and Debugging Your React App in Production with Choreo and Sentry

This article explains how to create a Choreo component for a React web application, how to configure it with Sentry, and how to use Choreo’s observability and analytics features for monitoring.

Introduction to Choreo

Choreo is an internal developer platform which makes it easy to deploy services, web applications, web-hooks, API proxy services, CronJobs, and more with minimal effort. Choreo provides a simple CI/CD experience, enabling efficient deployment of applications and services across multiple environments.

Step 1: Preparing Your React App for Deployment

A React web app can be deployed on Choreo as a web application component, either in its basic form or using frameworks like Gatsby and Next.js.

This article demonstrates how to create a web application component and deploy it in Choreo.

Initial Setup

The following steps should be followed:

1. Push the web app source to a GitHub repository
2. Log in to Choreo and create a web application component
3. Connect your GitHub repository in the Create Web App flow
4. Select the React build pack for the web app (For React apps, you have the option to select React SPA, Docker, or Node.js buildpacks. However, for vanilla React apps or Gatsby, it is recommended to use the React SPA buildpack. For Next.js, Node.js/Docker build packs are suitable as they require running a Node server.)
5. Select the relevant project directory from the repository
6. Provide build and run command

E.g. npm run build

Choreo: Create component View

Step 2: Build and Deploy Your React App

After creating the component, navigate to the Build page from the left navigation menu and click on the Build latest button. This will build your source code and create a Docker image.

Choreo: Successful Build

Note: If the build fails, error logs can be viewed in the right drawer for each build by clicking the View Details button

Choreo: Failed Build

Once the app has been successfully built, it can be deployed to the development environment.

Deploying the App

To deploy the app, follow the steps below:

1. Navigate to the Deploy page
2. Click the Configure and deploy button to set up the configuration and deploy

Choreo: Deploy View (without Deployments)

Choreo: Deploy View (with Deployments)

Choreo provides two environments by default, Development and Production, to manage different versions of a component. After deploying to the Development environment, the app can be promoted to the Production environment.

Step 3: Configure Sentry on React Application

Single-page applications (SPAs) like React, run in the browser making them hard to troubleshoot in production. Choreo logs and metrics don’t include client-side logs and metrics. However, Sentry can capture browser errors and record them. In this section, the React app will be configured with Choreo to publish errors to Sentry

The following steps will configure Sentry with the React component.

1. Install Sentry SDK for React

npm install - save @sentry/react

2. Create a project on Sentry and get the Public Key and Project ID

Sentry: Settings/Client Key View

3. Create the public/config.js file on the public directory with the following changes

window.configs = {
    environment: '<ENV NAME>',
    sentryKey: '<KEY>',
    sentryProjectId: '<PROJECT ID>',
    tracePropagationTargets:[],
}

4. Declare global variables with config values (for type script) in src/globals.d.ts

export interface Configs {
    sentryKey: string;
    environment: string;
    tracePropagationTargets: string[];
    sentryProjectId: string;
}

declare global {
    interface Window {
        configs: Configs;
    }
}

// This makes the file a module and avoids the error TS2669
export {};

5. Configure tsconfig.json include section and add the following script tag to the index.html

"include": ["src", "globals.d.ts"],

<script src="public/config.js"></script>

6. Configure Sentry with the values shown below in the app.tsx file

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

Sentry.init({
  dsn: "https://"+window.configs.sentryKey+".ingest.de.sentry.io/" + window.configs.sentryProjectId,
  integrations: [
    Sentry.browserTracingIntegration(),
    Sentry.replayIntegration(),
  ],
  tracesSampleRate: 1.0, 
  tracePropagationTargets: window.configs.tracePropagationTargets,
  environment: window.configs.environment,
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0,
});

Now, the app is configured to Sentry, make sure to add config.js to the .gitignore file and push changes to GitHub.

Build the latest commit with the new changes by clicking Configure and Deploy on the Deploy page, then you will get the following view with the Configuration File Editor. Add the relevant changes here for Sentry connection for the current environment, re-deploy the app with the changes and capture any errors from the Sentry.

Choreo: Deploy page with Configuration File Editor

Sentry: Issue Page with Captured Errors

Step 4: Monitoring the Deployed App with Choreo

Once the app has been deployed, several methods can be used to monitor the application by the platform itself. Choreo contains runtime information collected from the server side. This is important when performing server-side rendering on the React app.

In this section, Observability, Analytics, and DevOps features will be discussed to identify potential issues and monitor the application in production.

Choreo Observability

Choreo’s observability page is available at both the project and component levels, providing access to logs, metrics, and system metrics.

Component-Level Observability

Metrics View: There are 2 main graphs available — throughputs and latencies. These graphs help monitor the time taken to serve js chunks and any errors that occur during the process. Specific points in the graphs can be clicked to focus on related logs.

Choero: Metrics View

Diagnostic View: CPU and memory usage are displayed, helping to identify resource requirements and usages.

Choreo: Diagnostic View

Project-Level Observability

The Cell Diagram shows connections between components graphically. For our project, the component connected to an external source and traffic can be seen here.

Choreo: Project Level Observability View

Choreo Logs

Choreo has a powerful simple log view, allowing logs to be filtered by environment, log type, time range, and keywords.

Choreo: Logs View

Monitor Containers

In Choreo, components are deployed as containers. The DevOps page can be used to view container information, states, logs, and events.

Choreo: Container Runtime Logs View

Choreo: Conditions and Events View

Conclusion

The deployment, monitoring, and debugging of a React app in production using Choreo can be efficiently managed. Third-party tools (Sentry) can be configured for complete client-side monitoring using Choreo. The platform simplifies the process, provides valuable insights through its observability features, and ensures the application runs smoothly in different environments as needed.