Blog

Introducing ESI Debugger API and a New Debugger UI

September 11, 2018 by Akhil Jayaprakash

Akamai's Edge Side Includes (ESI) is a popular feature that enables Akamai customers to assemble content for their pages at the edge. In order to help our customers debug their ESI code, we recently improved our ESI debugger UI and released a new API so developers can run a script to check whether their ESI code is running successfully at the edge.

The new UI is designed to focus on what matters the most for our customers. We started by defining how customers would find ESI within the Akamai Luna Control Center, then we looked at what inputs these customers can and should provide, and finally we determined how the UI should assemble the results of the debugging analysis for maximum clarity.

The ESI debugger tool (featuring the new UI) is now available in the diagnostic tools section within Luna:

ESI debugger

Once inside the ESI debugger tool, users have the option to access the tool via APIs or continue entering their information directly into the UI. Within the tool, you have the ability to add additional request headers or point to a dev origin where they have their latest ESI code:

Tool

Once users click on Submit, the debugger tool parses through the entire breakdown of source pages and included pages:

Source

In addition, the debugger parses through the entire page that was requested as well as any ESI included fragments. Doing so allows the tool to identify whether there were any errors inside ESI fragments as well, and shows an error notification:

source error

Once each panel is expanded, users will see four sections: Source, Environment Variables, Syntax Errors, and Evaluated Results. Here’s a quick description of each section:

  • Source: This section shows the source code of the page with line numbers.
  • Environment Variables: This section shows the variables that were used by an Akamai server while processing the page.
  • Syntax Errors: This section calls out any errors in ESI syntax (the image below shows a code sample that has an ESI syntax error and it informs the user which line number in the source code has the error).
  • Evaluated Results: This section shows the user if the page was successfully executed or not; if it wasn’t executed, the user will receive a 500 response code from an Akamai server.

Here's how it looks:

source3

Each result panel also has an option to download the results. This can be helpful if, for example, you included fragments from third parties and you would like to provide an error report to the third party.

APIs included

We have made the ESI debugger API extremely easy and flexible for developers and QA teams to use directly within their dev pipelines. It’s a simple POST request to the endpoint below:

“/diagnostic-tools/v2/esi-debugger-api/v1/debug”

POST PAYLOAD

{“url”: “https://www.example.com”}

For other input parameters, please refer the ESI debugger API documentation here.

Conclusion

We’re excited to open this to you, and we hope you get an opportunity to test drive everything noted above. In case you have any feedback on new enhancements to the tool, please feel free to email me at ajayapra@akamai.com.

Akhil Jayaprakash is a product manager at Akamai Technologies.

Categories: