-
Notifications
You must be signed in to change notification settings - Fork 18
Debugging Tips
Yoom Lam edited this page Feb 8, 2020
·
17 revisions
This page provides an introduction to debugging in Caseflow. Post your questions and ask someone to answer it on this page.
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
- 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.
- 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).
- Open the "Network" tab. You may have to reload the web page.
- Open the "Redux" tab. A hierarchy of React components should be shown.
- 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 useApiUtil
to submit a request to the backend and maps the response to a JavaScript object, which has atype
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 thetype
?
-
- 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 theprops
for React components. - Update
propTypes
to define the shape of the data. - Use the
props
within the React component.
- Update the
- Home
- Acronyms and Glossary
- Caseflow products
- Caseflow Intake
- Caseflow Queue
- Appeals Consumer
- Caseflow Reader
- Caseflow eFolder
- Caseflow Hearings
- Caseflow Certification
- Caseflow APIs
- Appeal Status API
- Caseflow Dispatch
-
CSUM Roles
- System Admin
- VHA Team Management
- Active Record Queries Resource
- External Integrations
- Caseflow Demo
- Caseflow ProdTest
- Background
- Stuck Jobs
- VA Notify
- Caseflow-Team
- Frontend Best Practices
- Accessibility
- How-To
- Debugging Tips
- Adding a Feature Flag with FeatureToggle
- Editing AMA issues
- Editing a decision review
- Fixing task trees
- Investigating and diagnosing issues
- Data and Metric Request Workflow
- Exporting and Importing Appeals
- Explain page for Appeals
- Record associations and Foreign Keys
- Upgrading Ruby
- Stuck Appeals
- Testing Action Mailer Messages Locally
- Re-running Seed Files
- Rake Generator for Legacy Appeals
- Manually running Scheduled Jobs
- System Admin UI
- Caseflow Makefile
- Upgrading Postgresql from v11.7 to v14.8 Locally
- VACOLS VM Trigger Fix M1
- Using SlackService to Send a Job Alert
- Technical Talks