Back
Debugging the Frontend | Yext Hitchhikers Platform
What You’ll Learn
In this section, you will learn:
- What a frontend issue is
- Common issues and how to troubleshoot
When you notice display issues on a Search page, you’ll want to debug the frontend. You can debug the frontend using Live Preview, a deploy preview link, or on a staging link. It’s possible that your recent build or preview has produced some funky results on the frontend, like the below:
If we see something like this, we automatically know that there is a frontend issue. The FAQ vertical is not structured as an accordion CardType, which we know is always the case with FAQ cards. The Vertical is also missing a “FAQs” section title. These are two signals that something is off in your frontend.
Here’s another example where we see the Menu Items vertical tab missing in the front screenshot, and there is no Vertical section title for “Menu Items” here either. This is another signal to check the frontend files, where you configure your Verticals and data mappings for the experience.
There is another trick that you can use to identify if you have a frontend issue, which is also through the browser’s “inspect” functionality. If you have issues with the frontend javascript, they’ll show up in the console section in red:
In this example, the blank page produced a console error. You can usually determine the issue type within the console error itself. In this example, the error reads: “MapProviderKey” is not defined. Therefore, an Administrator can infer that there is an issue with the Maps API Key and troubleshoot from there.
Daily Quiz Streak: 0
Quiz Accuracy Streak: 0
Question 1 of 2
What is the benefit of inspecting and looking at the console for frontend debugging?
Question 2 of 2
True or False: If you identify a frontend issue the first place to go is your Search Configuration file, because it is what controls the look and feel of vertical pages and card types.
You're out of this world! 🌎
