TL;DR
In this tutorial, you will learn how to monitor your Javascript application with modern tools and best practices.
Explore the power of distributed tracing, and discover how to seamlessly integrate and utilize tools like Odigos and Jaeger to enhance your monitoring capabilities.
What you will learn: β¨
- How to build microservices π in Javascript.
- Setting up Docker containers π¦ for microservices.
- Configuring Kubernetes βΈοΈ for managing microservices.
- Integrating a tracing backend for visualizing the traces π.
Are you ready to become a pro at monitoring your JS application? π Say Yes, sir!.
I can't hear you. Say it louder. π
Let's set it up π¦
π¨ In this section of the blog, we'll be building a dummy JavaScript microservices application and deploying it on local Kubernetes. If you already have one and are following along, feel free to skip this part.
Create the initial folder structure for your application as shown below. ππ»
mkdir microservices-demo
cd microservices-demo
mkdir src
cd src
Setting up the Server π₯οΈ
π For demonstration purposes, I will create two microservices that will communicate with each other, and eventually, we can use that to visualize distributed tracing.
- Build and Dockerize Microservice 1
Inside the /src
folder, create a new folder /microservice-1
. Inside the folder initialize a NodeJS project and install the required dependencies.
mkdir microservice-1
cd microservice-1
npm init -y
npm install --save express node-fetch
Create a new file index.js
and add the following code:
// ππ»/src/microservice-1/index.js
const express = require("express");
const fetch = require("node-fetch")
const app = express();
const PORT = 3001;
app.use(express.json());
app.get("/", async (req, res) => {
try {
const response = await fetch("http://microservice2:8081/api/data");
const data = await response.json();
res.json({
data: "Microservice 2 data received in Microservice 1",
microservice2Data: data,
});
} catch (error) {
console.error(error.message);
res.status(500).json({ error: "Internal Server Error" });
}
});
app.listen(PORT, () => {
console.log(`Microservice 1 listening on port ${PORT}`);
});
π‘ If you've noticed, we're requesting data from
http://microservice2:8081/api/data
. You might be wondering, what is this microservice2? Well, we can use service names as host names. π We will build this service later.
The server is listening on port 3001
and on get request to /
we are requesting data from microservice2
and returning the response as a JSON object. π¦
Now, it's time to dockerize this microservice. Create a new Dockerfile
inside the /microservice-1
folder and add the following code:
// ππ»/src/microservice-1/Dockerfile
FROM node:18
# Use /usr/src/app as the working directory
WORKDIR /usr/src/app
# Copy package files and install production dependencies
COPY --chown=node:node package*.json /usr/src/app
RUN npm install --production
# Copy the rest of the files
COPY --chown=node:node . /usr/src/app/
# Switch to the user node with limited permissions
USER node
# Expose the application port
EXPOSE 3001
# Set the default command to run the application
CMD ["node", "index.js"]
It is always nice to add files to .dockerignore
that we do not want to push to the container. Create a .dockerignore
file with the names of the files we don't want to push.
// ππ»/src/microservice-1/.dockerignore
node_modules
Dockerfile
Finally, build ποΈ the docker image by running the following command:
docker build -t microservice1-image:latest .
Now, that is the entire setup for our first microservice. β¨
- Build and Dockerize Microservice 2
We will have a setup similar to microservice1
, with just a few changes here and there.
Inside the /src
folder, create a new folder /microservice-2
. Inside the folder, initialize a NodeJS project and install the required dependencies.
mkdir microservice-2
cd microservice-2
npm init -y
npm install --save express node-fetch
Create a new file index.js
and add the following code:
// ππ»/src/microservice-2/index.js
const express = require("express");
const fetch = require("node-fetch")
const app = express();
const PORT = 3002;
app.use(express.json());
app.get("/api/data", async (req, res) => {
const url = "https://jsonplaceholder.typicode.com/users";
try {
const response = await fetch(url);
const data = await response.json();
res.json(data);
} catch (error) {
console.error(error.message);
res.status(500).json({ error: "Internal Server Error" });
}
});
app.listen(PORT, () => {
console.log(`Microservice 2 listening on port ${PORT}`);
});
The server is listening on port 3002, and upon a GET request
to /api/data
, we fetch data from jsonplaceholder
and return the response as a JSON object. π¦
Now, it's time to dockerize this microservice as well. Copy and paste the entire Dockerfile
content for microservice1
and just change the port from 3001 to 3002.
Also, add a .dockerignore
file and include the same files that we added when creating microservice1
.
Finally, build ποΈ the Docker image by running the following command:
docker build -t microservice2-image:latest .
Now, that is the entire setup for our second microservice as well. β¨
- Setting up Kubernetes
Make sure Minikube is installed, or follow this link for installation instructions. π
Create a new local Kubernetes cluster, by running the following command. We will need it when setting up Odigos and Jaeger.
Start Minikube: π
minikube start
Now that we have both of our microservices ready and dockerized, it's time to set up Kubernetes for managing these services.
At the root of the project, create a new folder /k8s/manifests
. Inside this folder, we will add deployment and service configurations for both of our microservices.
- Deployment Configuration π: For actually deploying the containers on the Kubernetes Cluster.
- Service Configuration π: To expose the pods to both within the cluster and outside the cluster.
First, let's create the manifest for the microservice1
. Create a new file microservice1-deployment-service.yaml
and add the following content:
// ππ»/k8s/manifests/microservice1-deployment-service.yaml
apiVersion: apps/v1
kind: Deployment
metadata:
name: microservice1
spec:
selector:
matchLabels:
app: microservice1
template:
metadata:
labels:
app: microservice1
spec:
containers:
- name: microservice1
image: microservice1-image
# Make sure to set it to Never, or else it will pull from the docker hub and fail.
imagePullPolicy: Never
resources:
limits:
memory: "200Mi"
cpu: "500m"
ports:
- containerPort: 3001
---
apiVersion: v1
kind: Service
metadata:
name: microservice1
labels:
app: microservice1
spec:
type: NodePort
selector:
app: microservice1
ports:
- port: 8080
targetPort: 3001
nodePort: 30001
This configuration deploys a microservice named microservice1
with resource limits of 200MB memory ποΈ and 0.5 CPU cores. It exposes the microservice internally on port 3001 through a Deployment and externally on NodePort 30001 through a Service.
π€ Remember the
Dockerfile
we built with the namemicroservice1-image
? We are using the same image to create the container.
It is accessible on port 8080 within the cluster. We assume microservice1-image
is locally available with imagePullPolicy: Never
. If this is not in place, it would attempt to pull the image from the Docker Hub π and fail.
Now, let's create the manifest for microservice2
. Create a new file named microservice2-deployment-service.yaml
and add the following content:
// ππ»/k8s/manifests/microservice1-deployment-service.yaml
apiVersion: apps/v1
kind: Deployment
metadata:
name: microservice2
spec:
selector:
matchLabels:
app: microservice2
template:
metadata:
labels:
app: microservice2
spec:
containers:
- name: microservice2
image: microservice2-image
# Make sure to set it to Never, or else it will pull from the docker hub and fail.
imagePullPolicy: Never
resources:
limits:
memory: "200Mi"
cpu: "500m"
ports:
- containerPort: 3002
---
apiVersion: v1
kind: Service
metadata:
name: microservice2
labels:
app: microservice2
spec:
type: NodePort
selector:
app: microservice2
ports:
- port: 8081
targetPort: 3002
nodePort: 30002
It is similar to the manifest for microservice1
, with just a few changes. π
This configuration deploys a microservice named microservice2
and exposes it internally on port 3002 through a Deployment and externally on NodePort 30002 through a Service.
Accessible on port 8081 within the cluster, assuming the microservice2-image
is locally available with imagePullPolicy: Never
.
Once, this is all done, make sure to apply these configurations and start the Kubernetes cluster with these services. Change the directory to /manifests
and execute the following commands: ππ»
kubectl apply -f microservice1-deployment-service.yaml
kubectl apply -f microservice2-deployment-service.yaml
Check that both our deployments are Running by executing the following command: ππ»
kubectl get pods
Finally, our application is ready and deployed on Kubernetes with the necessary deployment configurations. π
Installing Odigos π
π‘ Odigos is an open-source observability control plane that enables organizations to create and maintain their observability pipeline.
βΉοΈ If you are running on a Mac run the following command to install Odigos locally.
brew install keyval-dev/homebrew-odigos-cli/odigos
βΉοΈ If you are on a Linux machine, consider installing it from GitHub releases by executing the following commands. Make sure to change the file according to your Linux distribution.
βΉοΈ If the Odigos binary is not executable, run this command
chmod +x odigos
to make it executable before running the install command.
curl -LJO https://github.com/keyval-dev/odigos/releases/download/v1.0.9/cli_1.0.9_linux_amd64.tar.gz
tar -xvzf cli_1.0.9_linux_amd64.tar.gz
./odigos install
If you need more brief instructions on its installation, follow this link.
Now, Odigos is ready to run π. We can execute its UI, configure the tracing backend, and send traces accordingly.
Connect Odigos with a Tracing Backend π«
π‘ Jaeger is an open source, end-to-end distributed tracing system.
Setting up Jaeger! β¨
For this tutorial, we will use Jaeger π΅οΈββοΈ, a popular open-source platform for viewing distributed traces in a microservices application. We will use it to view the traces generated by Odigos.
For Jaeger installation instructions, follow this link. π
To deploy Jaeger on a Kubernetes cluster, run the following commands: ππ»
kubectl create ns tracing
kubectl apply -f https://raw.githubusercontent.com/keyval-dev/opentelemetry-go-instrumentation/master/docs/getting-started/jaeger.yaml -n tracing
Here, we are creating a tracing
namespace and applying the deployment configuration π for Jaeger in that namespace.
This command sets up the self-hosted Jaeger instance and its service. π
Run the below command to get the status of the running pods: ππ»
kubectl get pods -A -w
Wait for all three pods to be Running before proceeding further.
Now, to view the Jaeger Interface π» locally, we need to port forward. Forward traffic from port 16686 on the local machine to port 16686 on the selected pod within the Kubernetes cluster.
kubectl port-forward -n tracing svc/jaeger 16686:16686
This command creates a tunnel between the local machine and the Jaeger pod, exposing the Jaeger UI so you can interact with it.
Finally, open up http://localhost:16686
on your browser and see the Jaeger Instance running.
Setting up Odigos to work with Jaeger! π
βΉοΈ For Linux users, go to the folder where you downloaded the Odigos binaries from GitHub releases and run the following command to launch the Odigos UI.
./odigos ui
βΉοΈ For Mac users, just run:
odigos ui
Visit http://localhost:3000
and you will be presented with the Odigos interface where you will see both your deployments in the default
namespace.
Select both of these and click Next. On the next page, choose Jaeger as the backend, and add the following details when prompted:
- Destination Name π£οΈ: Give any name you want, let's say express-tracing.
-
Endpoint π―: Add
jaeger.tracing:4317
for the endpoint.
And that's it β Odigos is all set to send traces to our Jaeger backend. It's that simple. π€―
View the Distributed Tracing π§
After setting up Odigos, on the Jaeger homepage at http://localhost:16686
, you will already see both of our microservices listed.
Odigos has already begun sending traces of our application to Jaeger. π
Remember, this is our microservices application. Make a few more requests to microservice1
since it serves as the starting point, it will subsequently request microservice2
for data and return it. Eventually, Jaeger will begin to populate with the traces.
Click on any one of the requests, and you should be able to observe how the request flows through your application and the time taken to complete each request.
This was all done without changing a single line of code. π€― All thanks to Odigos! π€©
Just imagine, this was such a small dummy application but for a bigger application with tons of microservices running ππ»ββοΈ and interacting with each other, distributed tracing would be extremely powerful! πͺ
With distributed tracing, you could easily identify bottlenecks in your application and determine which service is causing problems or is taking a longer time. π
Let's Wrap Up! π₯±
So far, you've learned how to closely monitor π your Javascript application with distributed tracing, using Odigos as the middleware between your application and the tracing backend Jaeger. π
If you have made it this far, give yourself a pat on the back. π₯³ You deserve it! π
If you found the article and the tools helpful, be sure to give a star π Odigos and Jaeger on their GitHub repositories.
The source code for this tutorial is available here:
https://github.com/keyval-dev/blog/tree/main/odigos-monitor-JS-like-a-pro
If you have any questions or suggestions about this article, please share them in the comments section below. ππ»
So, that is it for this article. Thank you for reading! ππ«‘
Top comments (1)
What a beautiful way to demonstrate distributed tracing of a JS application. Kudos to you, Eden! π€©π€©
Now, I am a big fan of Odigos already. This is going in my toolkit.
I am really looking forward to seeing how to monitor a Python application the same way this is done.