Clean β’ Professional
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.
Ques2. Why is error logging important in React apps?
Ans: Error logging helps developers:
Ques3. What are popular tools for error logging in React?
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:
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?
Ques9. How can you track runtime performance in production?
Ans: Use monitoring tools like:
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:
setTimeout or Promise)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?