Get your Fullstack toolbox out

Nir Soudry
Jul 31 · 4 min read
Photo by Barn Images on Unsplash

As time goes by, JavaScript is proving itself as the most popular language in the world. Developing on the web is so accessible nowadays, and many new developers learn JavaScript as their first language.

But new developers are not the only ones who find their way into JavaScript. Node.js by itself is the most popular framework, and seasoned back end developers, whether they like it or not, join the JavaScript community too.

Since web apps are so popular, and you can use JavaScript to run back ends too, more developers find themselves working on both front end and back end and are required to hold the complex skills of simultaneously debugging two systems.

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:

A simple architecture, sketched with cloudcraft.co

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:

Chrome DevTools Network > Timing panel

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:

NewRelic Application Performance Monitoring (APM) traces

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 transaction traces

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:

  1. Visualize a timeline of the entire flow, starting from the client side and ending with the last cloud service that was involved.
  2. Generate a mega call-stack by instrumenting code everywhere — in clients, servers, and lambdas.
The Fullstack call-stack

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.

Better Programming

Advice for programmers.

Nir Soudry

Written by

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade