Debugging Tips

While it might sound obvious, you should have your API endpoint open in your browser at all times during development. There are links from the post edit interface, as well as in the post row actions and term row actions, for easy access. More often than not, a Something has gone wrong message on the front end is actually a problem with your data.

Look for PHP errors

If you have WP_DEBUG enabled and this is the source of your issue, the error should be staring you in the face when you view the endpoint. Otherwise, check your debug.log.

Are name, config, and children passing the right shape for all components?

name is a string, config is a JSON object, children is an array, and componentGroups is an object. Verify this for all components.

Is a component "missing"?

Something that is easy to trip on in the early stages of a project is the setting of defaults. To the wp_irving_components_route filter, you need to return a $data array that contains both a defaults key and a page key. The defaults should contain any components that are always on your page (think head, header, body, footer typically). If it's in your page but not your defaults, it's not going to display on the front end.

Another possible reason your component looks good in your endpoint but is missing from the frontend is if it has not been mapped to a React component in (config/componentMap.js)[https://github.com/alleyinteractive/irving/blob/production/config/componentMap.js]. Try mapping it to the Placeholder component at first.

Pause in your routing

Using a debug tool such as Xdebug, set a breakpoint in the wp_irving_components_route filter. Is the $wp_query what you'd expect? If not, take a step back and perhaps set a breakpoint in pre_get_posts to better understand what is happening. If your query looks good, then take it a step further and break in your components.