Debugging Tips

Debugging Tips

This page provides an introduction to debugging in Caseflow. Post your questions and ask someone to answer it on this page.

URLs handled by a Rails Controller

Given a controller, look for the controller name on the right-hand side of bundle exec rake routes output (or http://localhost:3000/rails/info/routes if Caseflow is running). The left-side shows the URL (aka, API call). Grep for that URL in js and jsx code to find pages and components that use the given controller.

For more, see https://reinteractive.com/posts/188-rails-discovery-magical-routes-part-1-major-usages

Which React component is this web element?

• Install React Developer Tools browser extension.
• Load the relevant web page.
• Open Developer Tools in the browser; open the "Components" tab. A hierarchy of React components should be shown.
• Click on the square-with-arrow icon on the upper left (but within the tab), then select the web element on the web page.
• On the right side of the tab, scroll down to the "rendered by" section to see relevant React components.

How is a web element populated?

• Install Redux DevTools browser extension
• Load the relevant web page.
• Open Developer Tools in the browser
  • Open the "Redux" tab. A hierarchy of React components should be shown.
    • Open the "Network" tab. You may have to reload the web page.
      • Click on rows to see the "Request URL" on the right side of the tab. These requests are handled by Rails controllers (see other section).
• Redux explanation with example for Queue:
  • client/app/queue/reducers.js: Redux reducers defines Redux actions with names that will be seen in the "Redux" tab. These actions modify the state of the Redux store.
  • client/app/queue/QueueActions.js defines functions that use ApiUtil to submit a request to the backend and maps the response to a JavaScript object, which has a type that corresponds to the Redux action name.
    • React components call these functions to get data from the backend and update the Redux store.
  • The type triggers the Redux store to be updated. How are reducers triggered by the type?
• Given an updated Redux store, any React component can retrieve store data by updating the jsx file as follows:
  • Update the mapStateToProps function to extract specific data from the Redux state and return an object that is used as the props for React components.
  • Update propTypes to define the shape of the data.
  • Use the props within the React component.