With the explosion of web applications, users have many options to choose various products with almost the same capabilities as yours. That means, if your product fails, is not responding, or is unable to show the content users want, users can simply choose another similar product. 

To prevent errors in production, every member of your production team tests a product carefully before releasing it to the market—from unit and integration tests to end-to-end tests and even contract tests—to make sure no microservice will break anything when communicating with other services. But is testing alone enough?

In the software world today, you use a lot of open-source projects and third-party libraries. Because of this, you can’t make sure everything works well all the time. That’s why it is so crucial to monitor your production environment, as well as set it up to collect traces and logs to troubleshoot and resolve problems fast. Of course, monitoring and accessing traces are not easy tasks. It takes a lot of work and requires an experienced system administrator, along with a proficient development team. 

But what if your company does not have the sysadmin department for the job, or you want to release the product fast to compete with other competitors, meaning you don’t have enough time to spend on this. A cloud-based monitoring system like Epsagon can help you perform monitoring with ease. Let’s see how you can use Epsagon to troubleshoot any problems from the frontend to backend services and make your customers happier.

Introduction to RUM and APM

Epsagon uses Real User Monitoring (RUM) to provide useful metrics to demonstrate how your system is performing. RUM enables visibility into the interactions and experience of your end-users, letting you know which parts of your application are experiencing a problem far faster than relying on feedback from your customers. Moreover, you can use RUM to learn more about your customers’ behavior and apply A/B testing to choose better features. 

To better understand and troubleshoot the issues in production, you can combine RUM with APM (Application Performance Monitoring). While RUM is often used for frontend monitoring, APM is used for performance monitoring of the server-side code, giving you recommendations to optimize your application. You can check out this blog for more information on how RUM works and how to benefit from it when combining it with APM.

Introduction to Epsagon Browser Tracing

With Epsagon browser tracing, you can monitor both the frontend and backend of your applications. How does this work? All you need to do is install the Epsagon library in Node.js and provide the application token and application name:

import epsagon from '@epsagon/browser'

epsagon.init({

token: 'epsagon-token',

appName: 'app-name-stage',

})

When your application is up and running, Epsagon collects all data related to your application, such as resources and metrics, while also providing a dashboard to visualize your data, along with alerts if any rule is violated.

Check out this guide for further information on how simple it is to integrate Epsagon into your existing application.

Now, let’s move on to building a full-stack application, then see how Epsagon can help to monitor it and show us which parts may be experiencing issues that can be improved. 

Building a Simple Fullstack App 

We’ll be building a blogging application, with the frontend being built with React and the backend built with Python using FastAPI; for the database, we’ll use MySQL.

Let’s write the frontend application first. The React library provides you with the command needed to initialize a React project:

npx create-react-app epsagon-front-end

cd epsagon-front-end

npm start

Your React application will have the following functionalities:

  • Home page: Lists all your blogs
  • Create page: Creates a new blog page
  • Delete function
  • View function 

The details of the frontend application might be too long for this article, so if you want to read the code in detail or clone it into a local environment, please read more at react-blog.

To run the code for testing in a local environment, run:

npm run start

Right now, you can’t load the data from the backend application, so there will be no data displayed yet. 

To create the backend application, you can get details for the source code here, as the implementation details might be too long for this article.

After cloning the code, you’ll need to create a virtual environment for Python so that your application can have libraries installed that are separated from the global environment. Here, we’ll be using the pipenv tool to create a new virtual environment. (Note: You will need to change the credentials for accessing the database for your specific environment.)

pipenv install // to install libraries from Pipfile

pipenv shell // activate pipenv environment

Next, you have to create the databases for your backend application. So log in to your MySQL console, and create the database and table:

CREATE DATABASE epsagon;

USE epsagon;

CREATE TABLE user_info(

id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,

username VARCHAR(50) NOT NULL,

password VARCHAR(500) NOT NULL,

fullname VARCHAR(50) NOT NULL

);




CREATE TABLE blog (

  id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,

  title VARCHAR(500) NOT NULL,

  content VARCHAR(5000) NOT NULL

);

Now, start the backend application:

Uvicorn main:app

Once you start up the backend application, you can run the frontend application again, and you should then see your blogging application up and running.

 

Figure 1: Blogging app up and running

 

Using Epsagon to Find & Fix Errors Fast

Now, let’s inject an error into the application and see whether Epsagon can help us find it. We’ll inject a 404 error when viewing the blog with id =10. To do that, you need to change your backend application a bit:

@app.get("/blog/{blog_id}")

async def get_blog_by_id(blog_id, db: Session = Depends(get_db)):

if blog_id == 10:

     raise HTTPException(status_code=404, detail="Item not found")

Time to see how Epsagon can help us troubleshoot!

To get started, you can begin with a free trial for 14 days after registering here. Then, click on “Dashboard” and “Add New Application”:

 

Figure 2: Adding a new application in Epsagon

Choose the application framework your application is using to get started. Since you’re building the blog application with Python FastAPI for the backend, go with FastAPI. You’ll see code snippets available, so you can include those in your application.

For the frontend application, you need to first install the @browser/epsagon library from Node.js:

npm install @browser/epsagon

 

Next, add the following code into the App.js file before running the application:

import epsagon from '@epsagon/web'
function App() {
  epsagon.init({
  token: '{your-epsagon-token}',
  appName: 'blog-frontend',
  });

 
  return (
  <Router>
  	<div className="App">
    	<Navbar/>
    	<div className="content">
      	<Switch>
        	<Route exact path="/">
          	<Home/>
        	</Route>
        	<Route path="/create">
          	<Create/>
        	</Route>
        	<Route path="/blog/:id">
          	<BlogDetails/>
        	</Route>
        	<Route path="*">
          	<NotFound/>
        	</Route>
      	</Switch>
    	</div>
  	</div>
  </Router>
  );
}

For the backend application, since we used FastAPI as the web framework, you need to install the Epsagon library that supports FastAPI and add the code below at the start of the application:

Pip install epsagon




Snippet code




main.py




import epsagon

…

if __name__ == "__main__":

epsagon.init(

token='89dc771f-b9fe-47e1-871c-ec6be897349c',

app_name='blog-backend',

metadata_only=False,

)

log_config = uvicorn.config.LOGGING_CONFIG

log_config["formatters"]["access"]["fmt"] = "%(asctime)s - %(levelname)s - %(message)s"

log_config["formatters"]["default"]["fmt"] = "%(asctime)s - %(levelname)s - %(message)s"

uvicorn.run(app, log_config=log_config)

 

Now, let’s run it all again, and perform some interactions with your local application. 

Epsagon automatically catches exceptions, and we can see in Figure 3 that while your frontend application is running at the beginning, you have a network exception error when the frontend app cannot call the API at the backend due to the backend service not being ready yet:

 

Figure 3: Network connection error

 

Clicking on “NetworkError when attempting to fetch resource” will navigate you to Epsagon’s detailed trace search page:

 

Figure 4: Details for Epsagon traces

 

You can also click on a specific trace to view the trace details as well as a visual graph showing how a request was made:

 

Figure 5: Visual graph of a request

 

Remember the error you injected above? Let’s see if Epsagon can capture this issue and show us the exception.

In the Issues Manager, we can see a blog/10 exception listed:

 

Figure 6: Issues list showing the previously injected error

 

If you click on the issue, you can see the details as to why it failed:

 

Figure 7: Details for why fetching blog with id=10 fails

 

So, Epsagon shows you exactly why this exception happened. Moreover, you also receive an email to alert you to the error:

 

Figure 8: Epsagon alert email

 

Epsagon even lets you configure notifications for custom rules to monitor your application better.

For example, you can create an alert if the count number is above 5:

 

Figure 9: Set custom rule to create alert

 

Epsagon also provides a number of integration options to receive notifications. So, for the above alert, let’s integrate Epsagon with Slack. 

 

Scroll down to the bottom of the alert settings page, to the “Deliveries” category. From there, choose Slack, and follow Epsagon’s instructions to specify the Slack channel you want to add.

Figure 10: Choose Slack as your notification channel

 

You will then receive a message via Slack if the rule is met:

 

Figure 11: Slack message sent out for the alert

 

Conclusion

To be able to troubleshoot production issues on modern applications is not an easy task. It takes a lot of effort for different teams in a company to collaborate. But with the help of modern and cloud-based monitoring tools like Epsagon, your work will be much easier. 

In this blog, you learned how to easily integrate Epsagon into your existing or newly developed applications so that you can get the most out of the monitoring and troubleshooting features Epsagon has to offer.

Contact Epsagon today for a free trial or demo to see how easy it is to find and fix issues fast. 

Read More:

Browser Tracing

Tutorial: Building & Monitoring Serverless Web Applications