Final Application: Full Guide

ylwong

Let's go through all the steps systematically, making sure all code is correct and addressing any potential issues. Below is the complete and corrected code for building the Ionic Angular app with NextJS as the backend, MSSQL as the database, JWT authentication, role-based access control (RBAC), employee CRUD, and form validation.

Final Application: Full Guide

Backend - NextJS with MSSQL, TypeORM, and JWT

Step 1: Set Up the Backend Environment

1.1. Install Necessary Packages

npm install next express typeorm reflect-metadata mssql jsonwebtoken bcryptjs cors body-parser class-validator class-transformer

Step 2: Database and ORM Setup

2.1. Create a TypeORM Data Source

// backend/data-source.ts
import { DataSource } from "typeorm";
import { Employee } from "./entities/Employee";

export const AppDataSource = new DataSource({
  type: "mssql",
  host: "localhost",
  username: "your_db_user",
  password: "your_db_password",
  database: "your_db_name",
  synchronize: true, // Automatically synchronize schema during development
  entities: [Employee],
});

Step 3: Employee Entity

Create the Employee entity with validation using class-validator:

// backend/entities/Employee.ts
import { Entity, PrimaryGeneratedColumn, Column } from "typeorm";
import { IsEmail, IsNotEmpty, MinLength, Matches } from "class-validator";

@Entity()
export class Employee {
  @PrimaryGeneratedColumn()
  id: number;

  @Column()
  @IsNotEmpty({ message: "Name is required" })
  name: string;

  @Column()
  @IsEmail({}, { message: "Invalid email" })
  email: string;

  @Column()
  @IsNotEmpty({ message: "Password is required" })
  @MinLength(8, { message: "Password must be at least 8 characters" })
  @Matches(/^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]+)$/, {
    message: "Password must contain both letters and numbers",
  })
  password: string;

  @Column()
  @IsNotEmpty({ message: "Position is required" })
  position: string;

  @Column({ default: true })
  isActive: boolean;

  @Column({ nullable: true })
  resetToken: string;

  @Column({ nullable: true })
  resetTokenExpires: Date;

  @Column({ default: 'User' })
  role: string;
}

Step 4: JWT Utility Functions

Create helper functions to generate and verify JWT tokens:

// backend/utils/jwt.ts
import jwt from "jsonwebtoken";

const SECRET_KEY = "your_secret_key";

export const generateToken = (employee) => {
  return jwt.sign(
    { id: employee.id, email: employee.email, role: employee.role },
    SECRET_KEY,
    { expiresIn: "1h" }
  );
};

export const verifyToken = (token) => {
  return jwt.verify(token, SECRET_KEY);
};

Step 5: JWT Middleware

Verify JWT tokens and implement role-based access control:

// backend/utils/verifyToken.ts
import { NextApiRequest, NextApiResponse } from "next";
import { verifyToken } from "./jwt";

export const verifyJwt = (handler) => async (req: NextApiRequest, res: NextApiResponse) => {
  const token = req.headers.authorization?.split(" ")[1];
  if (!token) {
    return res.status(401).json({ message: "No token provided" });
  }

  try {
    const decoded = verifyToken(token);
    req.user = decoded;
    return handler(req, res);
  } catch (error) {
    return res.status(401).json({ message: "Invalid token" });
  }
};

export const verifyRole = (handler, role) => async (req: NextApiRequest, res: NextApiResponse) => {
  const token = req.headers.authorization?.split(" ")[1];
  if (!token) {
    return res.status(401).json({ message: "No token provided" });
  }

  try {
    const decoded = verifyToken(token);
    if (decoded.role !== role) {
      return res.status(403).json({ message: "Forbidden" });
    }
    req.user = decoded;
    return handler(req, res);
  } catch (error) {
    return res.status(401).json({ message: "Invalid token" });
  }
};

Step 6: Authentication API Routes

6.1. Registration API

// backend/pages/api/employees/register.ts
import { NextApiRequest, NextApiResponse } from "next";
import bcrypt from "bcryptjs";
import { AppDataSource } from "../../../data-source";
import { Employee } from "../../../entities/Employee";
import { validate } from "class-validator";

AppDataSource.initialize();

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method === "POST") {
    const { name, email, password, position } = req.body;

    const employeeRepository = AppDataSource.getRepository(Employee);
    const newEmployee = new Employee();
    newEmployee.name = name;
    newEmployee.email = email;
    newEmployee.password = bcrypt.hashSync(password, 8);
    newEmployee.position = position;

    const errors = await validate(newEmployee);
    if (errors.length > 0) {
      return res.status(400).json({ errors });
    }

    await employeeRepository.save(newEmployee);
    res.status(201).json(newEmployee);
  } else {
    res.status(405).json({ message: "Method Not Allowed" });
  }
}

6.2. Login API

// backend/pages/api/employees/login.ts
import { NextApiRequest, NextApiResponse } from "next";
import bcrypt from "bcryptjs";
import { AppDataSource } from "../../../data-source";
import { Employee } from "../../../entities/Employee";
import { generateToken } from "../../../utils/jwt";

AppDataSource.initialize();

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method === "POST") {
    const { email, password } = req.body;

    const employeeRepository = AppDataSource.getRepository(Employee);
    const employee = await employeeRepository.findOne({ where: { email } });

    if (!employee || !bcrypt.compareSync(password, employee.password)) {
      return res.status(400).json({ message: "Invalid email or password" });
    }

    const token = generateToken(employee);
    res.status(200).json({ token });
  } else {
    res.status(405).json({ message: "Method Not Allowed" });
  }
}

Step 7: Employee CRUD Operations

7.1. Fetch All Employees (JWT Protected)

// backend/pages/api/employees/index.ts
import { NextApiRequest, NextApiResponse } from "next";
import { AppDataSource } from "../../../data-source";
import { Employee } from "../../../entities/Employee";
import { verifyJwt } from "../../../utils/verifyToken";

AppDataSource.initialize();

const handler = async (req: NextApiRequest, res: NextApiResponse) => {
  const employeeRepository = AppDataSource.getRepository(Employee);

  if (req.method === "GET") {
    const employees = await employeeRepository.find();
    res.status(200).json(employees);
  } else {
    res.status(405).json({ message: "Method Not Allowed" });
  }
};

export default verifyJwt(handler);

7.2. Edit and Delete Employee (Admin-Only)

// backend/pages/api/employees/[id].ts
import { NextApiRequest, NextApiResponse } from "next";
import { AppDataSource } from "../../../data-source";
import { Employee } from "../../../entities/Employee";
import { verifyRole } from "../../../utils/verifyToken";

AppDataSource.initialize();

const handler = async (req: NextApiRequest, res: NextApiResponse) => {
  const employeeRepository = AppDataSource.getRepository(Employee);
  const { id } = req.query;

  if (req.method === "PUT") {
    const { name, email, position, isActive } = req.body;

    const employee = await employeeRepository.findOne({ where: { id: Number(id) } });
    if (!employee) {
      return res.status(404).json({ message: "Employee not found" });
    }

    employee.name = name || employee.name;
    employee.email = email || employee.email;
    employee.position = position || employee.position;
    employee.isActive = isActive !== undefined ? isActive : employee.isActive;

    await employeeRepository.save(employee);
    res.status(200).json(employee);
  }

  if (req.method === "DELETE") {
    const employee = await employeeRepository.findOne({ where: { id: Number(id) } });
    if (!employee) {
      return res.status(404).json({ message: "Employee not found" });
    }

    await employeeRepository.remove(employee);
    res.status(204).send();
  }
};

export default verifyRole(handler, "Admin");

Step 8: Frontend - Ionic Angular

8.1. Install Dependencies

npm install axios @angular/forms

8.2. Create `

EmployeeService` for API Interactions

// src/app/services/employee.service.ts
import { Injectable } from "@angular/core";
import axios from "axios";

@Injectable({
  providedIn: "root",
})
export class EmployeeService {
  private apiUrl = "http://localhost:3000/api/employees";

  async login(email: string, password: string) {
    const response = await axios.post(`${this.apiUrl}/login`, { email, password });
    return response.data;
  }

  async getEmployees(token: string) {
    const response = await axios.get(this.apiUrl, {
      headers: { Authorization: `Bearer ${token}` },
    });
    return response.data;
  }

  async getEmployeeById(token: string, employeeId: number) {
    const response = await axios.get(`${this.apiUrl}/${employeeId}`, {
      headers: { Authorization: `Bearer ${token}` },
    });
    return response.data;
  }

  async addEmployee(token: string, employeeData: any) {
    const response = await axios.post(this.apiUrl, employeeData, {
      headers: { Authorization: `Bearer ${token}` },
    });
    return response.data;
  }

  async updateEmployee(token: string, employeeId: number, employeeData: any) {
    const response = await axios.put(`${this.apiUrl}/${employeeId}`, employeeData, {
      headers: { Authorization: `Bearer ${token}` },
    });
    return response.data;
  }

  async deleteEmployee(token: string, employeeId: number) {
    const response = await axios.delete(`${this.apiUrl}/${employeeId}`, {
      headers: { Authorization: `Bearer ${token}` },
    });
    return response.data;
  }

  async requestPasswordReset(email: string) {
    const response = await axios.post(`${this.apiUrl}/reset-request`, { email });
    return response.data;
  }

  async resetPassword(token: string, newPassword: string) {
    const response = await axios.post(`${this.apiUrl}/reset-password`, { token, newPassword });
    return response.data;
  }
}

Step 9: Login Page

9.1. Create the Login Page

ionic generate page login

9.2. Login Page Template

<ion-header>
  <ion-toolbar>
    <ion-title>Login</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <form [formGroup]="loginForm" (ngSubmit)="login()">
    <ion-item>
      <ion-label position="floating">Email</ion-label>
      <ion-input type="email" formControlName="email"></ion-input>
    </ion-item>
    <ion-note *ngIf="loginForm.get('email').hasError('required') && loginForm.get('email').touched">
      Email is required
    </ion-note>
    <ion-note *ngIf="loginForm.get('email').hasError('email') && loginForm.get('email').touched">
      Invalid email
    </ion-note>

    <ion-item>
      <ion-label position="floating">Password</ion-label>
      <ion-input type="password" formControlName="password"></ion-input>
    </ion-item>
    <ion-note *ngIf="loginForm.get('password').hasError('required') && loginForm.get('password').touched">
      Password is required
    </ion-note>

    <ion-button expand="block" type="submit" [disabled]="loginForm.invalid">Login</ion-button>
  </form>
</ion-content>

9.3. Login Page Logic

// src/app/pages/login/login.page.ts
import { Component, OnInit } from "@angular/core";
import { FormBuilder, FormGroup, Validators } from "@angular/forms";
import { EmployeeService } from "../../services/employee.service";
import { Router } from "@angular/router";

@Component({
  selector: "app-login",
  templateUrl: "./login.page.html",
  styleUrls: ["./login.page.scss"],
})
export class LoginPage implements OnInit {
  loginForm: FormGroup;

  constructor(
    private fb: FormBuilder,
    private employeeService: EmployeeService,
    private router: Router
  ) {}

  ngOnInit() {
    this.loginForm = this.fb.group({
      email: ["", [Validators.required, Validators.email]],
      password: ["", [Validators.required]],
    });
  }

  async login() {
    if (this.loginForm.valid) {
      const { email, password } = this.loginForm.value;
      try {
        const { token } = await this.employeeService.login(email, password);
        localStorage.setItem("token", token);
        this.router.navigate(["/employee-list"]);
      } catch (error) {
        console.log("Login failed:", error);
      }
    }
  }
}

Step 10: Employee List Page

10.1. Create the Employee List Page

ionic generate page employee-list

10.2. Employee List Template

<ion-header>
  <ion-toolbar>
    <ion-title>Employees</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item *ngFor="let employee of employees">
      <ion-label>{{ employee.name }} ({{ employee.position }})</ion-label>
      <ion-button color="primary" (click)="editEmployee(employee.id)">Edit</ion-button>
      <ion-button *ngIf="isAdmin" color="danger" (click)="deleteEmployee(employee.id)">Delete</ion-button>
    </ion-item>
  </ion-list>

  <ion-button expand="block" (click)="loadEmployees()">Refresh</ion-button>
</ion-content>

10.3. Employee List Logic

// src/app/pages/employee-list/employee-list.page.ts
import { Component, OnInit } from "@angular/core";
import { EmployeeService } from "../../services/employee.service";
import { Router } from "@angular/router";

@Component({
  selector: "app-employee-list",
  templateUrl: "./employee-list.page.html",
  styleUrls: ["./employee-list.page.scss"],
})
export class EmployeeListPage implements OnInit {
  employees = [];
  isAdmin = false;

  constructor(private employeeService: EmployeeService, private router: Router) {}

  async ngOnInit() {
    const token = localStorage.getItem("token");
    const decodedToken = this.decodeToken(token);
    this.isAdmin = decodedToken.role === "Admin";
    this.loadEmployees();
  }

  decodeToken(token: string) {
    const base64Url = token.split(".")[1];
    const base64 = base64Url.replace("-", "+").replace("_", "/");
    return JSON.parse(atob(base64));
  }

  async loadEmployees() {
    const token = localStorage.getItem("token");
    try {
      this.employees = await this.employeeService.getEmployees(token);
    } catch (error) {
      console.log("Failed to load employees:", error);
    }
  }

  async deleteEmployee(id: number) {
    const token = localStorage.getItem("token");
    try {
      await this.employeeService.deleteEmployee(token, id);
      this.loadEmployees();
    } catch (error) {
      console.log("Failed to delete employee:", error);
    }
  }

  editEmployee(id: number) {
    this.router.navigate([`/edit-employee/${id}`]);
  }
}

Final Thoughts

This final application integrates login, employee listing with edit/delete options, admin access control, and JWT authentication. By following these steps, you can now build a full-featured app with a backend powered by NextJS and MSSQL, and a frontend with Ionic Angular. The forms have proper validation, and the app follows role-based access control for sensitive actions.

ylwong

To implement proper exception and error handling in a NextJS application, you can handle errors on both the API route level and globally at the server level. Here’s how to add error handling at multiple levels:

Step 1: Adding Error Handling in API Routes

For each API route, you can use try/catch blocks to catch any runtime errors and return appropriate HTTP status codes with error messages.

Example: Error Handling in Login API Route

// backend/pages/api/employees/login.ts
import { NextApiRequest, NextApiResponse } from 'next';
import bcrypt from 'bcryptjs';
import { AppDataSource } from '../../../data-source';
import { Employee } from '../../../entities/Employee';
import { generateToken } from '../../../utils/jwt';

AppDataSource.initialize();

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  try {
    if (req.method === 'POST') {
      const { email, password } = req.body;

      const employeeRepository = AppDataSource.getRepository(Employee);
      const employee = await employeeRepository.findOne({ where: { email } });

      if (!employee || !bcrypt.compareSync(password, employee.password)) {
        return res.status(400).json({ message: 'Invalid email or password' });
      }

      const token = generateToken(employee);
      return res.status(200).json({ token });
    } else {
      return res.status(405).json({ message: 'Method Not Allowed' });
    }
  } catch (error) {
    console.error('Error during login:', error);
    return res.status(500).json({ message: 'Internal Server Error' });
  }
}

Step 2: Centralized Error Handler Middleware (Optional)

For more complex applications, you can create an error-handling middleware that can capture exceptions globally for all API routes, reducing the need for repeated try/catch blocks in every route.

Here’s how you can create a middleware for centralized error handling:

Create Error Handling Middleware

Create a custom errorHandler.ts file in the utils folder:

// backend/utils/errorHandler.ts
import { NextApiRequest, NextApiResponse } from 'next';

export const errorHandler = (handler) => async (req: NextApiRequest, res: NextApiResponse) => {
  try {
    await handler(req, res);
  } catch (error) {
    console.error('Error caught in middleware:', error);
    res.status(500).json({ message: 'Something went wrong on the server.' });
  }
};

Apply Middleware to API Routes

Instead of adding try/catch blocks to every route, wrap the entire route handler with the errorHandler middleware. This way, any unhandled errors are automatically caught and processed.

// backend/pages/api/employees/login.ts
import { NextApiRequest, NextApiResponse } from 'next';
import bcrypt from 'bcryptjs';
import { AppDataSource } from '../../../data-source';
import { Employee } from '../../../entities/Employee';
import { generateToken } from '../../../utils/jwt';
import { errorHandler } from '../../../utils/errorHandler';

AppDataSource.initialize();

const loginHandler = async (req: NextApiRequest, res: NextApiResponse) => {
  if (req.method === 'POST') {
    const { email, password } = req.body;

    const employeeRepository = AppDataSource.getRepository(Employee);
    const employee = await employeeRepository.findOne({ where: { email } });

    if (!employee || !bcrypt.compareSync(password, employee.password)) {
      return res.status(400).json({ message: 'Invalid email or password' });
    }

    const token = generateToken(employee);
    return res.status(200).json({ token });
  } else {
    return res.status(405).json({ message: 'Method Not Allowed' });
  }
};

export default errorHandler(loginHandler);

Step 3: Handle 404 Errors for Missing API Routes

You can handle requests to undefined API routes by adding a default 404 handler in the _app.tsx file or creating a 404 API route.

// backend/pages/api/404.ts
import { NextApiRequest, NextApiResponse } from 'next';

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  res.status(404).json({ message: 'API route not found' });
}

Then, modify your custom server (if needed) to handle unknown routes by redirecting to the 404 API route.

Step 4: Global Error Handling for Server-Side Errors (Optional)

If you are using a custom NextJS server (with Express or another Node.js framework), you can set up a global error-handling middleware to catch all unhandled errors.

Here’s an example of how you might add a global error handler using Express as a custom server for NextJS:

// server.js (Express Example)
const express = require('express');
const next = require('next');

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  const server = express();

  // Middleware to handle API routes
  server.use('/api', require('./backend/api'));

  // Global error handling
  server.use((err, req, res, next) => {
    console.error('Global error handler:', err);
    res.status(500).json({ message: 'Something went wrong on the server.' });
  });

  // Handle Next.js pages
  server.get('*', (req, res) => {
    return handle(req, res);
  });

  server.listen(3000, (err) => {
    if (err) throw err;
    console.log('> Ready on http://localhost:3000');
  });
});

Step 5: Return Detailed Errors in Development

When working in development, you can also choose to return more detailed error information, which can help with debugging. You can check the environment and return error stack traces in development mode.

In your error handler middleware or directly in your API routes:

const isDev = process.env.NODE_ENV === 'development';

export const errorHandler = (handler) => async (req: NextApiRequest, res: NextApiResponse) => {
  try {
    await handler(req, res);
  } catch (error) {
    console.error('Error caught in middleware:', error);
    const statusCode = error.status || 500;
    const message = isDev ? error.message : 'Something went wrong on the server';
    const stack = isDev ? error.stack : null;
    res.status(statusCode).json({ message, stack });
  }
};

Summary of Best Practices

Use try/catch in API routes to catch specific errors.
Create a centralized error handler middleware to reduce redundancy.
Ensure proper HTTP status codes are returned for different error scenarios (e.g., 400 for bad requests, 401 for unauthorized, 404 for not found, and 500 for server errors).
Log errors to the console or external logging services for production environments.
Customize error responses for different environments (e.g., return detailed error information in development and generic messages in production).

With this setup, your NextJS API will handle errors gracefully and provide meaningful feedback to users and developers.

ylwong

To implement error logging in your NextJS application, you can log errors to both the console and external logging services. This ensures that important error information is captured and can be reviewed for production environments, where debugging on the console might not be enough.

Here's how to implement this:

Step 1: Set Up a Logging Utility

Create a utility that logs errors both to the console and external services (such as Sentry, Loggly, or Datadog). In this example, we'll demonstrate how to use console logging and Sentry for error logging.

1.1. Install Sentry (or another logging service)

First, install Sentry in your NextJS project:

npm install @sentry/node @sentry/react

1.2. Create a Logging Utility

In the backend/utils/ folder, create a logger.ts file that will handle logging:

// backend/utils/logger.ts
import * as Sentry from "@sentry/node";
import { NextApiRequest, NextApiResponse } from "next";

const isProduction = process.env.NODE_ENV === "production";

// Initialize Sentry for production environments
if (isProduction) {
  Sentry.init({ dsn: "your_sentry_dsn_here" }); // Replace with your Sentry DSN
}

export const logError = (error: any, req?: NextApiRequest) => {
  if (isProduction) {
    // Log to external services like Sentry
    Sentry.captureException(error);

    // Optionally, attach request context if available
    if (req) {
      Sentry.configureScope((scope) => {
        scope.setTag("method", req.method);
        scope.setContext("request", {
          url: req.url,
          headers: req.headers,
        });
      });
    }
  } else {
    // Log errors to the console in development
    console.error("Error:", error.message);
    if (error.stack) {
      console.error("Stack Trace:", error.stack);
    }
  }
};

This utility initializes Sentry in production and logs errors to the console in development. When an error occurs, it captures the exception and optionally logs request-related information for more context.

Step 2: Integrate the Logging Utility into the Error Handler

Now, use the logError utility to log errors in your custom error handler or directly in your API routes.

2.1. Modify the Error Handler Middleware

In errorHandler.ts, log errors to both Sentry and the console:

// backend/utils/errorHandler.ts
import { NextApiRequest, NextApiResponse } from "next";
import { logError } from "./logger";

export const errorHandler = (handler) => async (req: NextApiRequest, res: NextApiResponse) => {
  try {
    await handler(req, res);
  } catch (error) {
    logError(error, req); // Log the error using the utility
    res.status(500).json({ message: "Something went wrong on the server." });
  }
};

By doing this, any unhandled error will be logged to the console (in development) or sent to an external logging service (in production).

Step 3: Add Error Logging in API Routes

For API routes that may not use the global error handler, you can manually log errors in a try/catch block.

Example: Login Route with Error Logging

// backend/pages/api/employees/login.ts
import { NextApiRequest, NextApiResponse } from "next";
import bcrypt from "bcryptjs";
import { AppDataSource } from "../../../data-source";
import { Employee } from "../../../entities/Employee";
import { generateToken } from "../../../utils/jwt";
import { logError } from "../../../utils/logger";

AppDataSource.initialize();

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  try {
    if (req.method === 'POST') {
      const { email, password } = req.body;

      const employeeRepository = AppDataSource.getRepository(Employee);
      const employee = await employeeRepository.findOne({ where: { email } });

      if (!employee || !bcrypt.compareSync(password, employee.password)) {
        return res.status(400).json({ message: 'Invalid email or password' });
      }

      const token = generateToken(employee);
      return res.status(200).json({ token });
    } else {
      return res.status(405).json({ message: 'Method Not Allowed' });
    }
  } catch (error) {
    logError(error, req); // Log the error
    res.status(500).json({ message: 'Internal Server Error' });
  }
}

Step 4: Sentry Setup for Client-Side (Optional)

If you also want to capture errors on the client side (in the frontend), you can initialize Sentry for the NextJS frontend.

4.1. Initialize Sentry in `_app.tsx`

In pages/_app.tsx, initialize Sentry for the frontend:

// pages/_app.tsx
import * as Sentry from "@sentry/react";
import { Integrations } from "@sentry/tracing";

if (process.env.NODE_ENV === "production") {
  Sentry.init({
    dsn: "your_sentry_dsn_here", // Replace with your Sentry DSN
    integrations: [new Integrations.BrowserTracing()],
    tracesSampleRate: 1.0, // Adjust the sampling rate as needed
  });
}

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

Now, any unhandled errors on the frontend will also be captured by Sentry.

Step 5: Monitoring and Logging in Production

In production, Sentry (or any other logging service) will capture all logged errors.
You can monitor the errors through the Sentry dashboard or whatever logging service you use.

Optional: Add More Context to Errors

In production, you might want to add more context to errors, such as the current user, specific API request parameters, or application state. With Sentry, you can easily add tags and extra context.

// Adding more context in logger.ts
export const logError = (error: any, req?: NextApiRequest) => {
  if (isProduction) {
    Sentry.captureException(error);

    if (req) {
      Sentry.configureScope((scope) => {
        scope.setTag("method", req.method);
        scope.setContext("request", {
          url: req.url,
          headers: req.headers,
          body: req.body, // Capture request body if needed
        });
      });
    }
  } else {
    console.error("Error:", error.message);
    if (error.stack) {
      console.error("Stack Trace:", error.stack);
    }
  }
};

Summary of Logging Setup

Error Logging Utility (logger.ts): Logs errors to Sentry (or any other external service) in production and to the console in development.
Global Error Handler (errorHandler.ts): A middleware that catches all unhandled errors in API routes and logs them.
API Route-Level Logging: Each API route can catch specific errors and log them using the logging utility.
Sentry for Client-Side Logging: Optional setup for capturing frontend errors.

With this setup, your application can log errors in both development and production environments, helping you track issues in real-time while giving you insights into what's going wrong in production.

ylwong

If you're looking for a local logging service that can run on your own infrastructure or development environment, there are several alternatives to cloud-based logging services like Sentry. Here are a few local logging solutions you can use:

1. Winston

Winston is a popular and flexible logging library for Node.js that allows you to log to various transports, including files, console, or even HTTP services. It's highly customizable, and you can run it locally without relying on external services.

How to Set Up Winston:

npm install winston

Create a logging utility using Winston:

// backend/utils/logger.ts
import winston from 'winston';

const logger = winston.createLogger({
  level: 'info', // Log level (error, warn, info, debug)
  format: winston.format.combine(
    winston.format.timestamp(),
    winston.format.json()
  ),
  transports: [
    new winston.transports.Console(), // Logs to the console
    new winston.transports.File({ filename: 'logs/error.log', level: 'error' }), // Logs errors to a file
    new winston.transports.File({ filename: 'logs/combined.log' }), // Logs all messages to a file
  ],
});

// Log error function
export const logError = (error: any) => {
  logger.error({
    message: error.message,
    stack: error.stack,
  });
};

// Log info function
export const logInfo = (message: string) => {
  logger.info(message);
};

You can now log errors or other events using Winston without needing to use an external service.

Example Usage:

// backend/pages/api/employees/login.ts
import { logError } from '../../../utils/logger';

export default async function handler(req, res) {
  try {
    // Your route logic here
  } catch (error) {
    logError(error); // Logs to file and console
    res.status(500).json({ message: 'Internal Server Error' });
  }
}

Winston can also be configured with log rotation, which prevents log files from growing too large.

Pros:

Can log to multiple locations (file, console, HTTP, etc.).
No external service required.
Flexible configuration.

Cons:

No built-in web interface or dashboards for viewing logs (though you can use other tools to visualize logs).

2. Log4js (Log4j for Node.js)

Log4js is another powerful logging library inspired by Log4j. It supports logging to files, rotating logs, and logging to different transports.

How to Set Up Log4js:

npm install log4js

Create a logging utility using Log4js:

// backend/utils/logger.ts
import log4js from 'log4js';

log4js.configure({
  appenders: {
    out: { type: 'stdout' }, // Log to console
    file: { type: 'file', filename: 'logs/app.log' }, // Log to file
    errorFile: { type: 'file', filename: 'logs/error.log', level: 'error' }, // Log errors to a separate file
  },
  categories: {
    default: { appenders: ['out', 'file'], level: 'info' },
    error: { appenders: ['out', 'errorFile'], level: 'error' },
  },
});

const logger = log4js.getLogger();
const errorLogger = log4js.getLogger('error');

// Log error function
export const logError = (error: any) => {
  errorLogger.error(`${error.message}\n${error.stack}`);
};

// Log info function
export const logInfo = (message: string) => {
  logger.info(message);
};

Example Usage:

// backend/pages/api/employees/login.ts
import { logError } from '../../../utils/logger';

export default async function handler(req, res) {
  try {
    // Your route logic here
  } catch (error) {
    logError(error); // Logs to error log file and console
    res.status(500).json({ message: 'Internal Server Error' });
  }
}

Pros:

Supports rolling file logs.
Highly configurable, with multiple appenders (e.g., file, console).
Log filtering by log level.

Cons:

No built-in web interface for viewing logs.
Requires external tools for visualizing logs if needed.

3. Graylog

Graylog is an open-source log management platform that you can host locally. It provides a central interface for managing and visualizing logs, and you can integrate it with Winston or Log4js to send logs to Graylog.

How to Set Up Graylog:

Graylog requires setup of a server, and it typically runs alongside Elasticsearch and MongoDB.
Once installed, you can send logs from Winston or Log4js to Graylog using the GELF (Graylog Extended Log Format) protocol.

To integrate Graylog with Winston:

npm install winston-gelf

Configure Winston to send logs to Graylog:

import winston from 'winston';
import WinstonGelf from 'winston-gelf';

const gelfTransport = new WinstonGelf({
  gelfPro: {
    fields: { facility: 'my-nodejs-app' },
    adapterOptions: { host: '127.0.0.1' }, // Your Graylog server IP
  },
});

const logger = winston.createLogger({
  transports: [
    gelfTransport,
    new winston.transports.Console(),
    new winston.transports.File({ filename: 'logs/app.log' }),
  ],
});

export const logError = (error: any) => {
  logger.error({
    message: error.message,
    stack: error.stack,
  });
};

Pros:

Provides a web interface for visualizing logs.
Supports search and filtering of logs.
Scalable and can manage large amounts of logs.

Cons:

Requires more setup (Graylog server, Elasticsearch, MongoDB).
Higher resource usage than file-based logging solutions.

4. Papertrail (Local Option via Syslog)

Papertrail is a cloud service, but you can also use the Syslog protocol locally to manage logs with a Papertrail-like experience. Tools like Syslog-ng or RSYSLOG can provide real-time log monitoring locally.

You can configure Winston or Log4js to send logs to Syslog, which can then be visualized using Kibana (or a similar visualization tool).

Example: Configuring Syslog with Winston

npm install winston-syslog

import winston from 'winston';
import Syslog from 'winston-syslog';

const logger = winston.createLogger({
  transports: [
    new Syslog({
      host: 'localhost', // Your syslog server
      port: 514, // Syslog port
      protocol: 'udp4',
    }),
    new winston.transports.File({ filename: 'logs/app.log' }),
  ],
});

export const logError = (error: any) => {
  logger.error({
    message: error.message,
    stack: error.stack,
  });
};

Pros:

Can be used locally via Syslog.
Lightweight and efficient.
Can be integrated with local or remote monitoring tools.

Cons:

Requires additional tools for visualization (like Kibana).

Summary of Local Logging Services

Winston: Highly flexible and can log to files, console, or external services. Best suited for most Node.js applications and can be run locally.
Log4js: Powerful logging system inspired by Log4j with support for file rotation and multiple appenders.
Graylog: A complete open-source log management solution with a web interface for viewing logs. Requires more setup but ideal for larger infrastructures.
Syslog (via Papertrail-like setup): A lightweight local logging solution using Syslog or RSYSLOG for real-time log monitoring.

Recommended Approach

For simple logging requirements: Use Winston or Log4js. They are easy to set up and can log to files or the console.
For larger setups with visualization: Consider Graylog if you need a web interface and advanced search/filter options for your logs.

Each solution has different strengths depending on your use case and infrastructure requirements.