DEV Community

Roberto Luna
Roberto Luna

Posted on

TL;DR

#playadev #buildinpublic #ai #docker

TL;DR

I updated the CI/CD pipeline to ensure compatibility with npm v12 and added Sentry error monitoring to the application. The changes involved modifying the .github/workflows/ci-cd.yml file, adding Sentry configuration files, and updating the next.config.ts file.

The Problem

The initial problem was related to npm v12 readiness, which caused issues with the CI/CD pipeline. The error message wasn't explicitly mentioned, but the symptom was a failing pipeline due to incompatibilities with the new npm version. Additionally, I wanted to enhance the application's error monitoring capabilities by integrating Sentry.

What I Tried First

Initially, I attempted to update the package.json file to use the latest versions of dependencies, but this didn't resolve the npm v12 compatibility issue. I then focused on modifying the CI/CD pipeline to accommodate the changes.

The Implementation

Updating the CI/CD Pipeline

The first change was to update the .github/workflows/ci-cd.yml file to ignore scripts during the npm ci command and rebuild bcryptjs explicitly:

- run: NODE_ENV=development npm ci --legacy-peer-deps
Enter fullscreen mode Exit fullscreen mode

was changed to:

- run: NODE_ENV=development npm ci --ignore-scripts
Enter fullscreen mode Exit fullscreen mode

This change ensures that the pipeline ignores scripts during the npm ci command, which helps with npm v12 compatibility.

Adding Sentry Error Monitoring

To add Sentry error monitoring, I created several new files:

sentry.client.config.ts 

import * as Sentry from "@sentry/nextjs";

Sentry.init({
  dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
  // ...
});
Enter fullscreen mode Exit fullscreen mode

This file initializes Sentry on the client-side.

instrumentation-client.ts 

// This file configures the initialization of Sentry on the client.
// The added config here will be used whenever a users loads a page in their browser.
// https://docs.sentry.io/
import * as Sentry from "@sentry/nextjs";

Sentry.init({
  // ...
});
Enter fullscreen mode Exit fullscreen mode

This file configures Sentry instrumentation on the client-side.

app/api/sentry-example-api/route.ts 

import * as Sentry from "@sentry/nextjs";
export const dynamic = "force-dynamic";

class SentryExampleAPIError extends Error {
  constructor(message: string | undefined) {
    super(message);
    this.name = "SentryExampleAPIError";
  }
}

export async function GET(request: Request) {
  try {
    // ...
  } catch (error) {
    Sentry.captureException(error);
    throw new SentryExampleAPIError("API error");
  }
}
Enter fullscreen mode Exit fullscreen mode

This file demonstrates how to use Sentry in an API route.

app/sentry-example-page/page.tsx 

"use client";

import * as Sentry from "@sentry/nextjs";
import Head from "next/head";
import { useEffect, useState } from "react";

class SentryExampleFrontendError extends Error {
  constructor(message: string | undefined) {
    super(message);
    this.name = "SentryExampleFrontendError";
  }
}

export default function SentryExamplePage() {
  const [error, setError] = useState(null);

  useEffect(() => {
    try {
      // ...
    } catch (error) {
      Sentry.captureException(error);
      setError(new SentryExampleFrontendError("Frontend error"));
    }
  }, []);

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <div>
      <Head>
        <title>Sentry Example Page</title>
      </Head>
      <h1>Sentry Example Page</h1>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

This file shows how to use Sentry in a frontend page.

Updating next.config.ts 

import { withSentryConfig } from "@sentry/nextjs";
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  // ...
};

export default withSentryConfig(nextConfig, {
  // ...
});
Enter fullscreen mode Exit fullscreen mode

This file updates the next.config.ts file to include Sentry configuration.

Key Takeaway

The key takeaway from this experience is the importance of explicitly configuring dependencies and scripts in the CI/CD pipeline to ensure compatibility with new versions of tools like npm. Additionally, integrating Sentry error monitoring provides valuable insights into application errors.

What's Next

The next step is to monitor the application's errors and performance using Sentry and make data-driven decisions to improve the application's reliability and user experience.

Tags: #vibecoding #buildinpublic #DevOps #Cybersecurity #Productivity #LearningPersonal #Cloud

Part of my Build in Public series — sharing the real process of building Building Ismerely KB from Playa del Carmen, México.

Repo: zaerohell/bienestar-integral-kb · 2026-06-26

#playadev #buildinpublic

Top comments (0)