React Monitoring & Logging — Interview Questions & Answers

Ques1. What is monitoring and logging in React applications?

Ans: Monitoring and logging help track your application’s health, performance, and errors in real-time.

Logging captures application events and errors.
Monitoring tracks runtime performance and user experience to detect issues early.

Ques2. Why is error logging important in React apps?

Ans: Error logging helps developers:

Identify and fix bugs quickly.
Understand where and why failures occur.
Improve stability and user experience.

Ques3. What are popular tools for error logging in React?

Sentry – captures runtime errors, stack traces, and user sessions.
LogRocket – records user sessions, console logs, and network activity.
Firebase Crashlytics – for real-time error reports in mobile/web apps.

Ques4. How do you integrate Sentry into a React app?

Install Sentry:

npm install @sentry/react @sentry/tracing

Initialize it in your app entry file (e.g., index.js):

import * as Sentry from "@sentry/react";
import { BrowserTracing } from "@sentry/tracing";

Sentry.init({
  dsn: "YOUR_SENTRY_DSN",
  integrations: [new BrowserTracing()],
  tracesSampleRate: 1.0,
});

Sentry will automatically track errors and performance.

Ques5. What is LogRocket and how is it different from Sentry?

Ans: LogRocket records user sessions, network requests, and console logs — showing what the user was doing before an error occurred.

Sentry focuses on tracking and analyzing exceptions and stack traces.

Ques6. What is performance monitoring in React?

Ans: Performance monitoring measures how fast your React app runs and renders. It helps detect slow components and bottlenecks using tools like:

React Profiler
Chrome DevTools Performance tab
Sentry Performance Monitoring
Lighthouse

Ques7. How can you measure performance in React using the Profiler API?

Ans: React provides a Profiler component to measure rendering performance:

<Profiler id="App" onRender={(id, phase, actualDuration) => {
  console.log({ id, phase, actualDuration });
}}>
  <App />
</Profiler>

It logs how long a component takes to render and helps identify slow parts.

Ques8. What are common causes of performance issues in React apps?

Too many unnecessary re-renders.
Large bundle size.
Expensive computations in render.
Non-memoized props or callbacks.
Inefficient list rendering.

Ques9. How can you track runtime performance in production?

Ans: Use monitoring tools like:

Sentry Performance – traces user actions and API calls.
New Relic or Datadog – monitors app metrics (CPU, memory, load time).
Google Analytics (Core Web Vitals) – measures load speed and interactivity.

Ques10. How does React handle runtime errors by default?

Ans: By default, React unmounts the entire component tree when an error occurs, breaking the UI.

To handle this gracefully, you must use Error Boundaries.

Ques11. What are Error Boundaries in React?

Ans: Error Boundaries are React components that catch JavaScript errors anywhere in their child component tree and display a fallback UI instead of crashing the entire app.

Ques12. How do you create an Error Boundary in React?

Ans: You can create it using class components:

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError() {
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    console.error("Error caught:", error, info);
  }

  render() {
    if (this.state.hasError) {
      return <h2>Something went wrong!</h2>;
    }
    return this.props.children;
  }
}

Usage:

<ErrorBoundary>
  <MyComponent />
</ErrorBoundary>

Ques13. Can Error Boundaries catch all types of errors?

Ans: No, Error Boundaries only catch rendering errors in child components.

They cannot catch:

Asynchronous errors (e.g., in setTimeout or Promise)
Errors in event handlers
Errors in server-side rendering (SSR)

For async errors, you can handle them manually using try...catch.

Ques14. What is a “graceful fallback” in React?

Ans: A graceful fallback is a user-friendly UI displayed when an error occurs — instead of a blank or crashed screen.

Example: showing “Something went wrong” with a retry button.

Ques15. How do you log errors caught by an Error Boundary?

Ans: Inside componentDidCatch, send the error to an external logging service:

componentDidCatch(error, info) {
  Sentry.captureException(error);
}

Ques16. What are best practices for monitoring and logging in React apps?

Always use Error Boundaries for graceful fallbacks.
Log both handled and unhandled errors.
Use Sentry + LogRocket together for full visibility.
Use React Profiler during development.
Continuously monitor Core Web Vitals and network performance.

React Handbook

React Monitoring & Logging — Top Interview Q&A Guide

React Monitoring & Logging — Interview Questions & Answers