Forem: Hassan Azhar

Serverless Observability with AWS Lambda Powertools and AWS CDK

Hassan Azhar — Fri, 27 Dec 2024 15:05:05 +0000

Introduction

This guide demonstrates how to use AWS CDK to deploy a Lambda function with AWS Lambda Powertools for TypeScript. We'll enable structured logging, distributed tracing (via AWS X-Ray), and custom metrics, all while automating infrastructure provisioning.

Setting Up the CDK Project

Prerequisites

AWS CDK: Install AWS CDK if you haven’t already:

npm install -g aws-cdk

Bootstrap CDK:

cdk bootstrap

Project Initialisation:

mkdir lambda-powertools-cdk && cd lambda-powertools-cdk cdk init app --language=typescript

Installing Dependencies

Install the required libraries:

npm install @aws-cdk/aws-lambda @aws-cdk/aws-lambda-nodejs @aws-cdk/aws-apigateway @aws-cdk/aws-iam @aws-cdk/aws-cloudwatch

Install Lambda Powertools:

npm install @aws-lambda-powertools/logger @aws-lambda-powertools/tracer @aws-lambda-powertools/metrics axios

Lambda Code(`lambda/index.ts`)

Save the Lambda function code in the lambda directory.

import { Logger } from "@aws-lambda-powertools/logger";
import { Tracer } from "@aws-lambda-powertools/tracer";
import { Metrics, MetricUnits } from "@aws-lambda-powertools/metrics";
import axios from "axios";

// Initialize Powertools utilities
const logger = new Logger();
const tracer = new Tracer();
const metrics = new Metrics();

const WEATHER_API_URL = process.env.WEATHER_API_URL || "https://api.weatherapi.com/v1/current.json";
const API_KEY = process.env.API_KEY || "your_weather_api_key";

export const handler = async (event: any): Promise<any> => {
  logger.info("Lambda function invoked", { event });

  const city = event.queryStringParameters?.city || "London";

  try {
    tracer.annotateColdStart();
    logger.info("Fetching weather data", { city });

    const response = await tracer.captureAWSv3Client(axios).get(`${WEATHER_API_URL}`, {
      params: {
        key: API_KEY,
        q: city,
      },
    });

    logger.info("Weather data fetched successfully", { data: response.data });

    metrics.addMetric("WeatherAPICallSuccess", MetricUnits.Count, 1);

    return {
      statusCode: 200,
      body: JSON.stringify({
        message: "Weather data fetched successfully",
        data: response.data,
      }),
    };
  } catch (error) {
    logger.error("Failed to fetch weather data", { error });

    metrics.addMetric("WeatherAPICallFailure", MetricUnits.Count, 1);

    return {
      statusCode: 500,
      body: JSON.stringify({
        message: "Failed to fetch weather data",
        error: error.message,
      }),
    };
  }
};

CDK Stack (`lib/lambda-powertools-stack.ts`)

This CDK stack provisions the Lambda function with X-Ray tracing enabled, along with an API Gateway.

import * as cdk from "aws-cdk-lib";
import { Construct } from "constructs";
import * as lambda from "aws-cdk-lib/aws-lambda";
import * as apigateway from "aws-cdk-lib/aws-apigateway";
import * as path from "path";

export class LambdaPowertoolsStack extends cdk.Stack {
  constructor(scope: Construct, id: string, props?: cdk.StackProps) {
    super(scope, id, props);

    // Create the Lambda function
    const weatherLambda = new lambda.Function(this, "WeatherLambda", {
      runtime: lambda.Runtime.NODEJS_18_X,
      handler: "index.handler",
      code: lambda.Code.fromAsset(path.join(__dirname, "../lambda")),
      environment: {
        WEATHER_API_URL: "https://api.weatherapi.com/v1/current.json",
        API_KEY: "your_weather_api_key", // Replace with your API key
      },
      tracing: lambda.Tracing.ACTIVE, // Enable X-Ray tracing
    });

    // Grant permissions to Lambda for X-Ray
    weatherLambda.addToRolePolicy(
      new cdk.aws_iam.PolicyStatement({
        actions: ["xray:PutTraceSegments", "xray:PutTelemetryRecords"],
        resources: ["*"],
      })
    );

    // Create an API Gateway to invoke the Lambda function
    const api = new apigateway.LambdaRestApi(this, "WeatherAPI", {
      handler: weatherLambda,
      proxy: true,
    });

    // Output the API endpoint
    new cdk.CfnOutput(this, "APIEndpoint", {
      value: api.url,
    });
  }
}

Deploy the Stack

Build and Deploy:

cdk deploy

2.Test the API : Use the output API endpoint to test the function:

curl https://<API_ENDPOINT>?city=New%20York

Observability in Action

1. CloudWatch Logs
Structured logs from the Lambda function will be available in CloudWatch Logs. For example:

{ "level": "INFO", "message": "Weather data fetched successfully", "data": { ... } }

2. AWS X-Ray Traces
X-Ray traces will show:

The Lambda execution.
A subsegment for the external API call.

3. Custom Metrics
View the custom metrics (WeatherAPICallSuccess and WeatherAPICallFailure) in the CloudWatch Metrics console.

Key Features of the CDK Integration

Automation:
Automates infrastructure provisioning, ensuring consistency across environments.
X-Ray Integration:
Automatically enables X-Ray tracing for the Lambda function.
Environment Configuration:
Manages environment variables (e.g., API keys) securely.
API Gateway Integration:
Provides an easy way to expose the Lambda function via an API Gateway.

Conclusion

AWS Lambda Powertools, combined with AWS CDK, simplifies observability for serverless applications. You can enhance your application's monitoring and debugging capabilities by leveraging structured logging, distributed tracing, and custom metrics. With CDK, you can automate infrastructure provisioning, ensuring consistency and scalability.

Integrate these practices into your serverless projects to achieve better observability and operational excellence.

Routing in Next.js – How to Use App Router in your Next Apps

Hassan Azhar — Mon, 04 Nov 2024 08:12:36 +0000

The App Router for Next.js 14 means developers can build more structured, modular, and highly performing applications by introducing an approach of file-based routing within the app/ directory. Here's a guideline on how to effectively apply the App Router in Next.js for your applications:

What is the App Router?

The App Router allows one to define routes in an entirely new way: simply by structuring components in folders. Each folder located in the /app directory maps to a URL path. Such an organization gives features such as nested layouts and group routes while making data fetching easier when dealing with larger applications and thus improving route management.

Setting Up the App Router

Create a new Next.js project (If you haven't already):
npx create-next-app@latest
Enable the App router:
In Next.js 14, the /app directory is set up by default, and this enables the App Router. No extra configuration is needed.

Basic Routing

Each folder and file inside the app/ directory automatically maps to a route in your application.

app/ ├── page.tsx # Home page (e.g., "/") ├── about/ │ └── page.tsx # About page (e.g., "/about") └── blog/ ├── page.tsx # Blog index page (e.g., "/blog") └── [slug]/ └── page.tsx # Dynamic blog post (e.g., "/blog/my-post")

-Static Routes: app/about/page.tsx will automatically be available at /about.
-Dynamic Routes: You can create dynamic routes using square brackets ([ ]). For example, app/blog/[slug]/page.tsx will dynamically render pages at paths like /blog/my-first-post or /blog/hello-world.

Layout and Nesting

The App Router lets you define layouts in just one place and reuse them across different pages, so it is rather effortless to consistently design UI elements throughout sections of your app.

Create a Layout

To create a layout, add a layout.tsx file in a folder. This layout will apply to all pages and components within that folder.

app/ ├── layout.tsx # Root layout for the entire app ├── about/ │ ├── layout.tsx # About page-specific layout │ └── page.tsx # About page content

// app/layout.tsx export default function RootLayout({ children }) { return ( <html lang="en"> <body> <header>My App</header> {children} </body> </html> ); }

Nested Routes and Layouts

Each layout file applies to its folder and any nested folders, allowing for nested route structure with consistent layouts.

app/ ├── dashboard/ │ ├── layout.tsx # Layout for the entire dashboard section │ ├── page.tsx # Dashboard home ("/dashboard") │ └── settings/ │ └── page.tsx # Dashboard settings ("/dashboard/settings")

Dashboard Layout: The layout.tsx file inside /dashboard applies to both /dashboard and /dashboard/settings

Route Groups

Route groups allow for organizing routes without affecting the URL structure by adding a group folder in parentheses. This is useful for structuring your app’s code without impacting the URLs.

app/ ├── (dashboard)/ │ ├── profile/ │ │ └── page.tsx # "/profile" │ ├── settings/ │ │ └── page.tsx # "/settings"

The folder's profile and settings will appear at /profile and /settings, but using (dashboard) groups them visually for the code structure.

Catch-All Routes

Catch-all routes are used when you want to handle multiple URL segments under a single route file. This is achieved by using ... in the file name.

Example:[...slug].tsx captures multiple path segments like /blog/a/b/c.

Handling Errors and Loading States

Next.js 14 lets you manage errors and loading states using special components within each route.

Error Boundary

Add error.tsx in a folder to handle errors within a route.

app/ ├── blog/ │ ├── error.tsx # Error boundary for blog pages │ └── page.tsx # Blog main page

Loading States Use loading.tsx to show loading indicators for specific routes.

Data Fetching in App Router

With Next.js 14, you can fetch data server-side directly in the component using the use hook or async/await.

`// app/dashboard/page.tsx
async function getData() {
const res = await fetch('https://api.example.com/data');
return res.json();
}

export default async function DashboardPage() {
const data = await getData();
return

{JSON.stringify(data)};
}`

Server Actions

Server Actions allow you to handle server-side logic directly within component code, such as handling form submissions.

``// app/contact/page.tsx
"use client";

import { useForm } from 'react-hook-form';

export default function ContactForm() {
const { register, handleSubmit } = useForm();

const onSubmit = async (data) => {
"use server";
await fetch('/api/contact', { method: 'POST', body: JSON.stringify(data) });
};

return (

Submit

);
}``

Deploying an app using the App Router is the same as any Next.js app. Platforms like Vercel are optimized for Next.js applications and offer the best performance and integration.

Deployment Process

Configure Environment Variables for API keys or other sensitive data.
Build and Export the project with: npm rum build
Deploy to Vercel: Use the Vercel CLI or connect your repository for seamless deployment.

App Router in Next.js 14 is flexible and modular in terms of building scalable and fast applications with cleaner code. So, with the approach described above, you would have the ability to tap all the power of the App Router in your Next.js projects.

Detailed Comparison of Prettier, Biomejs, and VoidZero

Hassan Azhar — Fri, 25 Oct 2024 08:42:19 +0000

The problem of keeping the codebase clean and reasonably consistent through the proper use of code-formatting tools and linters has made writing much more efficient within the modern web development landscape. The following is a review of three of the most popular tools, namely Prettier, Biome, and VoidZero. From Prettier's opinionated and widely adopted approach to Biome's all-in-one performance-driven solution to VoidZero's customizable, lightweight design, we get in-depth pros and cons and use cases for each, taking you through which tool best suits a specific need in your development work.

1. Prettier:

Prettier is an opinionated code formatter that supports multiple languages and frameworks. With the rules of this formatter, it is used to enforce a consistent style in code by how it parses your code and prints out according to its own set of rules. This will provide safe avoidance from style preferences, and it makes the code cleaner and easier to maintain.

Keypoints:

No configuration of rules like ESLint. Prettier enforces a consistent style.
It supports multiple languages including JavaScript, TypeScript, HTML, CSS, JSON, GraphQL, and more.
integrates well with the majority of popular IDEs (VSCode, WebStorm, etc).
Once applied, it automatically formats codes as per the set of rules.

Benefits:

Eliminates arguments about code styles.
Zero or minimal configuration is used in ease.
Excellent multi-language support.

Drawbacks:

Less control over customizability. Users have less control over specific style decisions.

Sometimes, this will not be the best solution for big projects requiring complex linting rules

Why We Should Use Prettier

Prettier ensures consistent formatting throughout the codebase, which rejects all arguments regarding code style put forward by different developers. Everyone thus follows one set of rules.
It is pretty easy to install and apply. Additionally, it doesn't demand complex configurations. The application takes care of formatting by itself if given only some default rules.
Prettier supports multiple languages, including JavaScript, TypeScript, HTML, CSS, JSON, etc., so it makes projects of various types of files even more versatile. -Most modern IDEs (VSCode, WebStorm, etc.) do native integration or are available through extensions for Prettier, which allows code to be formatted automatically the moment it gets saved.

Why Not Use Prettier?

Prettier is pretty opinionated and does not provide much configuration. In case you have a project for which you need something more specific formatting rules, then you will find Prettiers features pretty inconvenient.
In case you have a linter with really detailed rules there can be quite a lot of conflict between Prettier's formatting and linting rules, and this may be very hard to resolve.
Better will reformat everything according to its rules, which can result in very unnecessary changes in file size because of issues like white space, and trailing commas particularly in bigger projects.

2. Biome

Biome is code analysis, formatting, linting, bundling, and compilation into a single coding tool. All this would replace ESLint, Prettier, Babel, and Webpack. It offers a unified solution towards the entire JavaScript / TypeScript Ecosystem.

Key Features:

Everything in one tool linting, formatting, bundling, and compiling
Full TypeScript support with advanced type checking
Much faster performance than JavaScript-based tooling
Based on strict rules, best practices, with reasonable defaults

Pros

Built-in support for newer JavaScript/TypeScript standards
Deep integration in the TypeScript ecosystem
High-performance due to the Rust backend
Unified toolchain-no configuration of multiple tools

Cons

Configuration and tooling might not cater to niche requirements yet.
More mature than other tools; still young in terms of features and adoption.

Why We Should Use Biome:

Biome provides not only code formatting but also linting, type-checking, and bundling. Therefore, the lines of management concerning Prettier, ESLint, Babel, and Webpack would not be necessary.
Biome is written in Rust, so it's faster than most JavaScript-based tools like ESLint or Prettier for build times and for formatting large projects.
Your project will be working according to modern JavaScript and TypeScript standards, and you'll be up-to-date in best practices.
Biome supports TypeScript with type checking that is usually better integrated than other tools like ESLint.
It integrates multiple functionalities into a single tool; hence, you can simplify your development setup or avoid having different configurations for different tools.

Why We Should Not Use Biome:

Biome is a rather recent concept, and to my knowledge, not as widely adopted by the community as something like Prettier or ESLint, which can make debugging a bit more challenging.
Depending on Biome's growth scope, it may not cover enough edge cases or provide enough granular control that might be desired for highly specific linting or formatting rules by developers.
For anything smaller or extremely simple, Biome's setup comes off as overkill if you do not really need all of the extra features like bundling or advanced type checking.
If a project was already configured with ESLint, Prettier, etc., then migrating it to Biome would be highly painful and demanding, requiring a lot of refactoring and adjustments on previous configurations

## VoidZero The player is relatively more recent, acting as a minimalist, customizable code formatting and linting tool. Unlike Prettier and Biome, VoidZero delivers maximum flexibility and control over formatting rules to seamlessly integrate it with your development pipeline.

Key Features:

Supports many integrations can integrate with other popular tools such as ESLint.
It is a bit minimalist. It is rather simple and efficient. It targets teams that want strict control over how the code is formatted.
It is highly customizable. Users have complete control over the rules.

Pros:

Less in memory and fast because of simplicity in design
Integration to works well with other tools such as ESLint.
More configurable for those who need finer control

Cons:

Need much more effort during configuration and maintenance of rules
Smaller community and less adoption compared to Prettier or Biome.

Why We Should Use VoidZero:

Prettier can't be customized to this extent as VoidZero. The developer of Void Zero designed it for teams or projects requiring control over fine-grained formatting and linting rules. You can define exactly how your code should be formatted and styled.
Concentrating solely on formatting and linting, void zero is lighter than similar tools such as Biome. This makes it a good fit for projects that do not need one-stop solution formats but still want flexible formatting.
If everything's meshing up correctly, ESLint can perfectly blend with it, so it will definitely be a pretty versatile element of the toolchain.
If a project does not require all the scopes Prettier or Biome can offer, VoidZero can provide the necessary balance of low setup and high customizability.

Why We Should Not Use VoidZero:

VoidZero is a much smaller community and less codified ruleset compared to more mature tools such as Prettier and ESLint; therefore, it has fewer pre-built integrations and support from the community.
With great flexibility comes complexity. Configuration of and maintenance of VoidZero require much more manual effort to fine-tune formatting rules, especially if your team grows or has changing needs.
While Prettier is not opinionated, VoidZero does not offer an opinionated setup, which might make it less efficient for teams seeking a fast, out-of-the-box setup without configuring their own formatting standard.
oidZero might not support as much language compared to Prettier, especially for projects with mixed tech stacks such as JavaScript, CSS, HTML, JSON, etc.

Conclusion:

The choice of a code formatting and linting tool depends on your project's needs, but Prettier has an edge as the most popular one because of its simplicity and the fact that there is widespread usage in teams; it provides easy setup and ease of consistent style enforcement. Biome offers a well-featured, all-in-one option and does much more than simple formatting; it will really be well-suited for more-large requirements including performance and modern standards. VoidZero is far more customizable to teams that need far more control over their formatting rules. Each one does something different. Knowing these will help you pick a better tool for your development workflow.

Forem: Hassan Azhar

Serverless Observability with AWS Lambda Powertools and AWS CDK

Introduction

Setting Up the CDK Project

Installing Dependencies

Lambda Code(lambda/index.ts)

CDK Stack (lib/lambda-powertools-stack.ts)

Deploy the Stack

Observability in Action

Conclusion

Routing in Next.js – How to Use App Router in your Next Apps

What is the App Router?

Setting Up the App Router

Basic Routing

Layout and Nesting

Create a Layout

Nested Routes and Layouts

Route Groups

Catch-All Routes

Handling Errors and Loading States

Error Boundary

Data Fetching in App Router

Server Actions

Deployment Process

Detailed Comparison of Prettier, Biomejs, and VoidZero

1. Prettier:

Keypoints:

Benefits:

Drawbacks:

Why We Should Use Prettier

Why Not Use Prettier?

2. Biome

Key Features:

Pros

Cons

Why We Should Use Biome:

Why We Should Not Use Biome:

Key Features:

Pros:

Cons:

Why We Should Use VoidZero:

Why We Should Not Use VoidZero:

Conclusion:

Lambda Code(`lambda/index.ts`)

CDK Stack (`lib/lambda-powertools-stack.ts`)