It’s Time for Fullstack Dev Tools
Get your Fullstack toolbox out
But the complexity doesn’t end there. Most back-end architectures today look like a thick forest. As cloud services develop, as serverless solutions mature, and as microservice architectures gain popularity, the back-end architecture becomes harder to understand than ever.
Even a simple back-end architecture can contain many resources. Here is a simple example of two back-end services, worker lambdas communicating via a queue, CDN with static content storage, a database, and a cache server:
Now, imagine you click a button on your React app that causes unexpected data to be written to the database. You must first debug the client code and check that you called the correct API with the correct parameters. Once that’s cleared, you’ll continue to debug the server. But then you notice your server invoked a lambda that inserted an item to a queue, which was later picked by another lambda, that may have eventually written the wrong data to the database.
This debugging session may take your full day—and your good mood.
I Call for Fullstack Dev Tools
Today, in order to debug the discussed flow, you’ll probably need your Chrome DevTools, IDE, a log explorer, and some superpowers to correlate the specific API request with both lambda invocations.
Observe for a second the Timing panel on Chrome DevTools:
The green bar hides the spicy information. What happened at the back end during this time? Useful monitoring tools can elaborate on this.
NewRelic has several monitoring solutions, mainly focused on back-end performance and health. Among its features, NewRelic tracks back-end transactions by instrumenting code. The following is the elaboration of the same green bar, from the back-end side:
This certainly gives more information. But what if your API server calls additional resources, maybe another microservice, or even invokes a lambda asynchronously, which may later fail? In today’s multiservice world, you often need the details of the entire end-to-end flow as you develop.
Epsagon is a pioneer in monitoring multiservice and serverless applications. It can automatically track your entire cloud architecture, recognize the non-trivial links between resources, and draw a detailed elaboration of the end-to-end flow. Here’s an example of a complex flow, starting from an API call and involving queues, storage, database, and external APIs:
Epsagon can elaborate even further; if you click on a resource, you’ll get more details, like the S3 file location and even the HTTP request and response bodies.
The Fullstack community needs a combination of these inside the browser in real time. A deep investigation tool would:
- Visualize a timeline of the entire flow, starting from the client side and ending with the last cloud service that was involved.
- Generate a mega call-stack by instrumenting code everywhere — in clients, servers, and lambdas.
Chrome has won the web based on its DevTools. Firefox and Edge Canary are getting closer by investing manpower to surpass it, and they have already developed some differentiating features. Microsoft uniquely holds both ends and can potentially integrate its Application Insights into Edge Canary.
Today is the first time in ten years that browsers compete for the developer community. If browser vendors develop better dev tools by integrating cloud monitoring solutions, the growing Fullstack community may crown them as the winners of the third Browser War. The Fullstack community deserves such tools; it’s time to make them.