React Assignment – 3

Basic Questions

  1. Create a simple error boundary class component using componentDidCatch.
  2. Wrap a child component with an error boundary and test by forcing an error.
  3. Display a fallback UI message in the error boundary when a child component crashes.
  4. Create a reusable error boundary component named ErrorBoundary.
  5. Use ErrorBoundary around multiple independent components.
  6. Cause a runtime error in a component (e.g., undefined.map) and let error boundary catch it.
  7. Demonstrate logging an error (using console.log) inside componentDidCatch.
  8. Practice catching errors only in specific parts of the UI.
  9. Show that error boundaries do not catch event handler errors. Fix by adding try/catch in events.
  10. Show that error boundaries do not catch async errors in promises. Handle with .catch().
  11. Fetch data from a dummy API and display error if the API fails.
  12. Display a “Loading…” state, and show an error message if fetch is rejected.
  13. Wrap fetch logic in try/catch with async/await and show error UI.
  14. Use error state with useState to render error message when API call fails.
  15. Import a component using a relative path (../components/Button).
  16. Import the same component using an absolute path (src/components/Button).
  17. Compare both imports in the same project and confirm output is same.
  18. Change a deeply nested import (../../../Header) into an absolute path import.
  19. Create two different components and import one with a relative path, the other with absolute path.
  20. Demonstrate how absolute imports simplify file structure navigation.

Intermediate Questions

  1. Build a reusable ErrorBoundary component that accepts a custom fallback UI as props.
  2. Wrap only a specific section of a page (not the whole app) with an error boundary.
  3. Simulate an error in one child and show that unaffected children still render.
  4. Create multiple nested error boundaries and log where they catch errors.
  5. Store caught error details in component state using componentDidCatch.
  6. Display different fallback UIs depending on error types.
  7. Add error tracking integration by logging errors to a fake monitoring service from componentDidCatch.
  8. Demonstrate catching and handling rejected promises inside React components.
  9. Write a function that wraps API calls with a try/catch and custom error messages.
  10. Handle form submission errors gracefully (invalid input + API error).
  11. Convert an entire project’s imports from relative to absolute paths using jsconfig.json/tsconfig.json.
  12. Compare readability of imports in a file before and after converting to absolute paths.
  13. Break a component into sub-components and test imports using both relative and absolute style.
  14. Show issues when moving files around in relative imports vs stability with absolute imports.
  15. Document advantages/disadvantages of each approach in comments inside code.
  16. Create a reusable useApi hook that returns {data, error, loading}.
  17. Handle API error by retrying fetch when the user clicks “Retry”.
  18. Display a dedicated error page component on API failure.
  19. Handle Nested API call error (fetch posts, then comments → fail second fetch).
  20. Combine error boundary + API error handling to capture both UI + backend errors

Advanced Questions

  1. Create a global app-level error boundary that catches crashes and routes to an error page.
  2. Implement a logging service (fake API) where every caught error in componentDidCatch is sent to backend.
  3. Build a complex example: one component fails, another continues, error boundary shows partial fallback UI.
  4. Combine ErrorBoundary with React Router to redirect to an error page when an error is caught.
  5. Implement a retry mechanism in API fetching logic that retries failed requests 3 times before failing.
  6. Handle both sync + async errors gracefully: runtime, API fetch, and promise rejection in one project.
  7. Migrate an entire React project from relative imports to absolute imports and measure line changes.
  8. Create a project structure (/components, /pages, /hooks) and test maintainability with absolute imports.
  9. Build two versions of a medium app with relative vs absolute imports, list pros/cons in README.
  10. Create a large project demo (10+ components) where some imports break when refactoring. Show how absolute imports prevent errors.