New Relic : Debugging Phoenix web applications with New Relic and CodeStream

Since the Elixir language was introduced in 2011, it has exploded in growth and popularity. Elixir has been ranked as one of the most loved languages by developers, and many popular applications and sites are built with Elixir's Phoenix web framework, including Discord, the Financial Times, and others.

While Elixir and Phoenix are blazing fast, you still have to watch out for performance issues in your production applications. You can use New Relic One to identify issues in your Phoenix application's performance. Even better, with New Relic CodeStream, you can jump directly from the detected anomaly in New Relic to your IDE and the lines of code that are causing the issue. In this tutorial, you will learn how to leverage CodeStream from within New Relic One to increase your developer productivity. You will create a small web application, introduce a bug into it, and then use CodeStream to find the issue in your code.

This blog post assumes a working knowledge of:

• Elixir
• Phoenix
• Running commands in the terminal
• GitHub

You also need a New Relic One account along with the CodeStream integration. CodeStream is a free IDE extension available for VS Code, Visual Studio, and Jet Brains.

The sample application in this post is deployed to Heroku, and you can go to the README of the GitHub repository of the sample application and deploy the sample application with one click. Heroku is a cloud platform service that allows you to quickly deploy websites, and basic accounts are free. You can also deploy your application to any cloud deployment service you prefer.

Let's get started!

You can find a complete working application at https://github.com/newrelic-experimental/nr-phoenix-demo-app if you want to clone the repository and try it out!

Creating a new Phoenix application with TailwindCSS

Create a new Phoenix application with TailwindCSS as the CSS framework for the application. After you have initialized a new Phoenix application with the command, add Tailwind by installing it in the directory of your app. You can follow this tutorial for step-by-step instructions on how to do so.

Setting up the Phoenix application

The app has two routes. The first route is the home page while the second route directs to , which introduces a bug.

The main route uses the default template provided when you initialized your new Phoenix web app. You just need to add some styling using Tailwind classes to your HTML file to make a link to the Make Some Trouble path. Open the file and add the following HTML: