Deployment and monitoring

A reliable deployment and monitoring strategy ensures that React applications are shipped safely, securely, and with confidence. This involves enforcing code quality before merge, automating deployments, and continuously monitoring performance in production.

Deployment practices 

Use precommit hooks to run linting, type checking.

• Run linting (ESLint, Prettier) and type checking (TypeScript) automatically before committing.
• Catch errors early and enforce consistency across the codebase.
• Tooling: Use Husky for easy setup with Git hooks.

Automated testing on pull requests

• Run the full test suite (unit, integration, and coverage checks) as part of the CI pipeline.
• Running automated tests as part of a Pull Request (PR) workflow ensures that:
  • new code changes don’t break existing functionality
  • maintain code quality before merging.
• Fail the build if coverage drops below an agreed threshold.

Separate configuration from code

• Store secrets and environment-specific values in .env files or secret managers (Vault, AWS Secrets Manager).
• Keeping configuration settings (like API keys, database connections, environment variables) separate from the application’s source code makes the application more flexible, easier to deploy across different environments, and more secure.
• Keep them out of version control.

Never commit secrets to version control.

• Sensitive information such as API keys, passwords, and other credentials should never be directly committed to a version control system (like Git).
• This prevents accidental exposure and potential security breaches.
• You can use tools like git-secrets or GitHub’s secret scanning to prevent accidental leaks.

Performance monitoring

Tools for monitoring the performance of a React app.

React developer tools

• A Chromium extension to debug and profile.
• The profiling tools give a flame graph for React components. 
• Slow components: It shows which components in your component tree took the most time to render. Long, yellow/orange bars are potential problems.
• Ranked chart shows which components are the most expensive to render.

Lighthouse

• This provides a high-level audit of your application based on Google’s Core Web Vitals and other best practices.
• Useful for tracking page performance across builds.

Application monitoring

• Use Sentry, LogRocket, Debugbear or Datadog for real-time error tracking and performance monitoring in production.
• Capture crashes, slow API responses, and user session replays.

Test coverage

CodeCov

• It is a tool used to generate and provide reports on test coverage for your codebase.
• Integrating CodeCov into your development workflow, often as part of a CI/CD pipeline, allows you to visualize how much of your code is covered by tests. 
• This helps ensure that your tests are comprehensive and that new changes don’t reduce the overall test coverage, contributing to higher code quality and fewer bugs.
• Set thresholds to prevent merging PRs that reduce coverage.

Recommended CI/CD workflow

1. Pre-commit: Husky runs linting & type checks.
2. Pull Request: CI runs tests, coverage, and lint checks.
3. Build & Deploy: Automated deployment pipeline builds production bundles.
4. Post-Deployment: Monitoring (Sentry/Datadog/Debugbear) + performance audits (Lighthouse).