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:
- Push the web app source to a GitHub repository
- Log in to Choreo and create a web application component
- Connect your GitHub repository in the Create Web App flow
- 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.)
- Select the relevant project directory from the repository
- Provide build and run command
E.g. npm run build
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.
Note: If the build fails, error logs can be viewed in the right drawer for each build by clicking the View Details button
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:
- Navigate to the Deploy page
- Click the Configure and deploy button to set up the configuration and deploy
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.
- Install Sentry SDK for React
npm install - save @sentry/react
2. Create a project on Sentry and get the Public Key and Project ID
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.
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.
Diagnostic View: CPU and memory usage are displayed, helping to identify resource requirements and usages.
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 Logs
Choreo has a powerful simple log view, allowing logs to be filtered by environment, log type, time range, and keywords.
Monitor Containers
In Choreo, components are deployed as containers. The DevOps page can be used to view container information, states, logs, and events.
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.