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?

1. Install Sentry:

   Copy

   npm install @sentry/react @sentry/tracing
   

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

   Copy

   import * as Sentry from "@sentry/react";
   import { BrowserTracing } from "@sentry/tracing";
   
   Sentry.init({
     dsn: "YOUR_SENTRY_DSN",
     integrations: [new BrowserTracing()],
     tracesSampleRate: 1.0,
   });
   

3. 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.