DEV Community: George Iheanyi

How to Monitor Metrics in Laravel Using Prometheus and Grafana

George Iheanyi — Mon, 24 Mar 2025 07:37:26 +0000

Monitoring and logging are crucial aspects of any sound or robust infrastructure or system. Monitoring is the process of continuously collecting, analyzing and visualizing data from a system, application, or infrastructure to ensure that it is functioning correctly and efficiently. This helps to mitigate any issues before they impact users or business operations.

Importance of Monitoring in Software Applications
Monitoring helps to maintain the health, performance, and security of an application. Some of the reasons why monitoring is essential for any application include:

Ensures your application is always available and reliable. It prevents downtime by detecting failures early.
Identifies slow database queries, API calls, or resource bottlenecks.
Enhances security and compliance by monitoring logs for potential security threats.
Helps in debugging and troubleshooting.
Enables scalability and capacity planning.

What is Prometheus
Prometheus is an open-source systems monitoring and alerting toolkit that collects and stores its metrics as time series data i.e. it stores metrics information with the timestamp at which it was recorded, alongside optional key-value pairs called labels.

Metrics are numerical measurements, and time series refers to the recording of changes over time. Metrics help you to understand why your application works the way it does. For example, if your application is running slow, you will need some information. If your application has a high number of requests, it can make your system slow. And the only way to know is to have a request count metric. With this, you can determine the cause and proactively increase the number of servers to handle the load.

Prometheus provides:

Real-time metrics collection
Custom alerts for anomalies
Detailed dashboards with Grafana
Easy integration with laravel and other systems.

How Prometheus Works
Prometheus operates on a pull-based model where:

Your laravel application exposes metrics. This is done by creating an endpoint (e.g. /metrics) in your laravel application to expose application-specific metrics.
Prometheus periodically fetches data from the /metrics endpoint.
This data is stored in prometheus and can be queried using PromQL.
Finally, you can choose to use Grafana to visualize your data or just view in prometheus.

Setting Up Prometheus in Your Laravel Application

*Step 1: * Install Prometheus Exporter
To expose your application's metrics, you need a Prometheus client library for PHP. And we will be using promphp/prometheus_client_php in this lesson.

Run:

composer require promphp/prometheus_client_php

Step 2: Configure Storage for Prometheus
We will be using Redis because it is highly recommended for production.

Install Redis on your system

sudo apt-get update
sudo apt-get install redis

On your command prompt, start redis:

redis-server

Verify Redis is running:

redis-cli ping

If it returns PONG, redis is active.

Install Redis and Predis in Laravel

composer require predis/predis

Step 3: ** Define Metrics in Laravel
Create a new **MetricsController to expose Prometheus metrics

use Prometheus\CollectorRegistry;
use Prometheus\RenderTextFormat;
use Prometheus\Storage\Redis;
use Illuminate\Routing\Controller;

class MetricsController extends Controller
{
    public function metrics()
    {
        // Configure Redis storage
        $adapter = new Redis([
            'host' => '127.0.0.1',
            'port' => 6379
        ]);
        $registry = new CollectorRegistry($adapter);

        // Define a counter metric for HTTP requests
        $counter = $registry->getOrRegisterCounter(
            'app', 'http_requests_total', 'Total number of HTTP requests', ['method', 'route']
        );
        $counter->incBy(1, [request()->method(), request()->path()]);

        // Render Prometheus metrics in the required format
        $renderer = new RenderTextFormat();
        return response($renderer->render($registry->getMetricFamilySamples()))
            ->header('Content-Type', RenderTextFormat::MIME_TYPE);
    }
}

*Step 4: * Create a Route to Expose Metrics
Add the following route in routes/api.php
Route::get('/metrics', [MetricsController::class, 'metrics']);

Step 5: Install and Configure Prometheus

Download Prometheus For Linux:

wget https://github.com/prometheus/prometheus/releases/download/v2.50.0/prometheus-2.50.0.linux-amd64.tar.gz
tar xvfz prometheus-*.tar.gz
cd prometheus-*

For Windows:

Visit https://prometheus.io/download/ to download the latest version of prometheus for windows
Extract the downloaded file into your C drive.

Configure Prometheus to scrape Laravel metrics. Edit the prometheus.yml file inside your prometheus folder:

global:
  scrape_interval: 5s  # How often Prometheus scrapes data

scrape_configs:
  - job_name: 'laravel_app'
    metrics_path: '/metrics'
       static_configs:
      - targets: ['localhost:8000'] # Change to your Laravel app’s hostname and port

Run Promtheus
cd into your Prometheus folder you installed above. Then run:

./prometheus --config.file=prometheus.yml

Step 6: Verify Prometheus is Scraping Laravel

Visit Promtheus UI: http://localhost:9090
Query Metrics: Enter app_http_requests_total to see the recorded requests.

*Step 7: * Visualize Metrics in Grafana (Optional)

Install Grafana:

wget https://dl.grafana.com/oss/release/grafana-10.0.1.linux-amd64.tar.gz
tar -zxvf grafana-10.0.1.linux-amd64.tar.gz
cd grafana-10.0.1
./bin/grafana-server

Open Grafana UI (Http://localhost:3000) and add Prometheus as a data source (http://localhost:9090).
Create dashboards to visualize your Laravel application metrics.

Conclusion
By following these steps, you now have:

Laravel exposing metrics via /metrics
Redis storing Prometheus data
(Optional) Grafana visualizing application performance.

Thank you for reading. In my next article, I will dive deep into how to add more custom metrics like histograms, counters, gauge etc. If you love this article, don't forget to follow and also save for future use.

Top 10 Lessons from 40 Years of Writing Code: What Every Software Engineer Should Know

George Iheanyi — Mon, 18 Nov 2024 14:32:53 +0000

I read an essay written by Lars Wirzenius in celebration of his 40 years of programming. Lars started his programming journey when he was 14 years old and has been building software till date.

In his early years of programming, Lars was told programming was meant for only young people (the cool kids) and that by 25 years, he'd be too old to write codes. Well... Lars still writes code till date, after 40 years and says he is not stopping any time soon. There are some lessons I picked from his 40 years experience in his essay:

The fundamental, core skills to have as a programmer is communication and collaboration. Team work can be a force multiplier.
To do good work, you have to take care of yourself. If you are tired or are too stressed, you will make mistakes and inevitably, bad decisions.
For every collaboration or team project, governance must be explicit. There must be a clear-cut definition of roles. Uncertainty about power results in confusion and quarrel.
Software development is a political and ethical act. Make sure the software you build resonates with your values.
To build quality software, enable diversity of thought among the people contributing to it.
Mistakes are inevitable. Make room for people's mistakes, and expect that from others too.
Write things down. Writing enables clarity of thoughts.
Learn to have good meetings. Prepare for meetings so you don't waste people's time.
Simplify things as much as you can. Simple, obvious code is easier to write, easier to get to work, and easier to change without breaking it.
Ask for help when you need it or get stuck. Accept help when offered.

I hope this helped.

90/10 Barbell Strategy in Tech

George Iheanyi — Tue, 17 Sep 2024 21:30:25 +0000

The 90/10 barbell strategy, as posited by Nassim Taleb, is a powerful framework that can be adapted to programming, startups, and tech as a whole. The idea, which balances extreme caution with calculated risk, suggests allocating 85-90% of your assets to safe investments and the remaining 10-15% to high-risk, high-reward ventures. This dual approach ensures that you preserve the bulk of your resources while still exposing yourself to the possibility of significant upside.

Applying the Barbell Strategy to Programming and Tech
In tech, innovation is constant. A new framework or tool seems to gain traction every few months, leading to a "fear of missing out" on the next big thing. But as with investing, an all-in approach is reckless. The barbell strategy suggests that you should continue to focus on stable, proven technologies for 85-90% of your work. These are the tools that have stood the test of time—well-documented, widely adopted, and battle-tested in production.

However, it's equally important to dedicate 10-15% of your time or energy to exploring emerging technologies. This way, you're not caught off guard by industry shifts, and if a new technology turns out to be a game changer, you've already built up some familiarity with it. But the key is proportionality—dip your toes in, don't dive headfirst.

Breaking into Tech with the Barbell Approach
For those transitioning into tech from other industries, the barbell strategy also applies. Keep your current job while learning new tech skills, dedicating 10-15% of your time to mastering those skills and applying to new roles. This way, you hedge against the uncertainty of landing a tech role quickly, while maintaining financial stability.

Startup Ventures and the Barbell Strategy
The same logic holds for entrepreneurship. Don't go all-in on a startup venture from the outset. Instead, invest a small portion—10-15% of your time or resources—while keeping a stable income source. This reduces the risk of failure affecting your entire livelihood. If the startup gains traction, you can gradually scale your involvement. If it fails, you’ve limited your losses and can move on to the next idea without a catastrophic impact.

Conclusion
The barbell strategy is fundamentally about managing risk while positioning yourself to seize high-reward opportunities. Applied to tech, it allows you to stay grounded in proven methods and technologies while still keeping an eye on the horizon for innovation. It's a powerful framework to navigate both personal development and professional ventures in the fast-evolving tech landscape.

How to Solve Hydration Errors in Next.js

George Iheanyi — Fri, 06 Sep 2024 11:56:52 +0000

"Hydration failed because the server-rendered HTML did not match the client...."

If you've been using Next.js to build applications, you must have gotten the above error or something similar. It is called Hydration Error.

I used to get this error when I first started out with Next.js but didn't know what to do and never cared to look it up because it wasn't really affecting my code at the time. Not until I was asked by an interviewer, what I'd do to solve an hydration error in Next.js. I was dumbfounded because now it was not a case of the interviewer trying to bring me down, but a case of nonchalance and sheer ignorance. I don't want you to be like me in your next interview. So let's discuss on Hydration.

Hydration is the process where static HTML becomes interactive by adding Javascript to it. So normally when a webpage is rendered on the server, it loses its interactivity and event handlers before getting to the client. React is responsible for building the component tree on the client. This is called hydration, because it adds the interactivity and event handlers that were lost when the HTML was server-side rendered. React compares it with the actual server-side rendered DOM. They must be the same so React can adopt it.

If there is a mismatch between the page we have and what the client-side thinks we should have, we get a "Hydration Error." Some common hydration error causes include: Incorrect HTML element nesting, different data used for rendering, using browser-only APIs, side effects, etc.

Whatever the cause, you'd have to figure it out by reading the error message that you get. Possible solutions include;

1. Using useEffect to run on the client only.
To prevent a hydration mismatch, make sure the component renders the same content on the server-side as it does on the initial client-side render. You can use the useEffect hook to intentionally render content on the client. See example below:

import { useState, useEffect } from 'react'

export default function App() {
  const [isClient, setIsClient] = useState(false)

  useEffect(() => {
    setIsClient(true)
  }, [])

  return <h1>{isClient ? 'This is never prerendered' : 'Prerendered'}</h1>
}

2. Disabling server-side rendering on specific components.
You can use the disable prerendering feature on Next.js on specific components. This can prevent hydration mismatches. See example below:

import dynamic from 'next/dynamic'

const NoSSR = dynamic(() => import('../components/no-ssr'), { ssr: false })

export default function Page() {
  return (
    <div>
      <NoSSR />
    </div>
  )
}

3. Using Suppress Hydration Warning
There are times when content will inevitably be different on the server and client, instances like timestamp. What you can do is to silence the hydration mismatch warning by adding suppressHydrationWarning={true} to the element.

<time datetime="2016-10-25" suppressHydrationWarning />

So with these three methods, you should be able to resolve that hydration error the next time it pops up when building on Next.js.

Don't forget to subscribe to my page to get more eye-opening content on Programming.