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:

Frontend Issue

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.

Frontend Issue

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:

Frontend Issue

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.

unit Quiz
+20 points
Daily Quiz Streak Daily Quiz Streak: 0
Quiz Accuracy Streak Quiz Accuracy Streak: 0
    Error Success Question 1 of 2

    What is the benefit of inspecting and looking at the console for frontend debugging?

    Error Success 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! 🌎

    You've already completed this quiz, so you can't earn more points.You completed this quiz in 1 attempt and earned 0 points! Feel free to review your answers and move on when you're ready.
1st attempt
0 incorrect