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.

Given a SomeComponentView.jsx, how do I navigate to it?

• Trial and error
• More experience with the Caseflow UI and how it is used by users. See training material.
• Find RSpecs that use the view to get an idea when it is used.

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 or reopen Developer Tools.
      • 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 from Queue:
  • React components dispatch Redux actions, which get processed by Redux reducers based on the action type. All reducers are contained in a single agglomerate reducer, which returns a JavaScript object used to update the Redux store.
  • client/app/queue/reducers.js: defines reducers associated with names that will be seen in the "Redux" developer tool tab. The result of these reducers are used to modify the state of the store.
  • client/app/queue/QueueActions.js defines functions that use ApiUtil to submit a request to the backend and maps the response to an action object, which has a type that is used to select a reducer and by convention corresponds to names in the "Redux" developer tool tab. The action object also has a payload that holds response data received from the backend.
• Given an updated Redux store, any React component can retrieve store data. To do this, update 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.
  • TODO: describe mapDispatchToProps
  • Update propTypes to define the shape of the data.
  • Use the props within the React component.

How do you find a hearing?

• Hearing for AMA appeals
  • Find using the appeal_id: Hearing.find_by(appeal_id: 864)
  • Find using the uuid:
    • Hearing.find_by(uuid: "25184d31-36c8-4bb0-864f-af3541de46fe")
    • or Hearing.find_hearing_by_uuid_or_vacols_id("25184d31-36c8-4bb0-864f-af3541de46fe")
• LegacyHearing for Legacy appeals
  • Find using the vacols_id:
    • LegacyHearing.find_by(vacols_id: "707133")
    • or Hearing.find_hearing_by_uuid_or_vacols_id("707133")