DEV Community

Roberto Luna
Roberto Luna

Posted on

TL;DR

#playadev #buildinpublic #ai #docker

TL;DR

I updated the bienestar-integral-kb repository to ensure npm v12 readiness and integrated Sentry for error monitoring. Key changes include modifying the CI/CD workflow to use --ignore-scripts and explicitly rebuilding bcryptjs, along with adding Sentry configuration files and example usage in API and frontend code.

The Problem

The initial problem was related to npm version updates and ensuring compatibility with the latest versions of dependencies. Specifically, the project needed to be ready for npm v12, which introduced changes that required adjustments in the CI/CD pipeline.

Additionally, I aimed to enhance error monitoring and handling by integrating Sentry, a popular error tracking and monitoring platform.

What I Tried First

Initially, I attempted to update the dependencies and run the project with the latest npm version. However, this led to issues with bcryptjs and peer dependency conflicts. I tried using --legacy-peer-deps but realized that a more robust solution was needed.

For Sentry integration, I started by configuring the Sentry client and server-side settings but encountered issues with the initialization and capturing of errors.

The Implementation

Fixing npm v12 Readiness

The first step was to adjust the CI/CD workflow to accommodate npm v12. This involved modifying the .github/workflows/ci-cd.yml file:

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v2
      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '20'
          cache: 'npm'
      - run: NODE_ENV=development npm ci --ignore-scripts
Enter fullscreen mode Exit fullscreen mode

I replaced npm ci --legacy-peer-deps with npm ci --ignore-scripts to ensure that the build process ignores script execution during the CI phase, which helped resolve issues related to dependency scripts.

Adding Sentry Error Monitoring

To integrate Sentry, I added several configuration files and modified existing ones.

First, I created a Sentry client configuration file sentry.client.config.ts:

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

Sentry.init({
  dsn: "https://public_key:secret_key@app.getsentry.com/1",
  // Additional configuration options
});
Enter fullscreen mode Exit fullscreen mode

Next, I configured the Sentry server-side settings in sentry.server.config.ts:

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

Sentry.init({
  dsn: "https://public_key:secret_key@app.getsentry.com/1",
  // Additional server-side configuration options
});
Enter fullscreen mode Exit fullscreen mode

I also added example API and frontend code to demonstrate Sentry usage. In 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 {
    // Example API logic
    return new Response("Success");
  } catch (error) {
    Sentry.captureException(error);
    throw new SentryExampleAPIError("API error occurred");
  }
}
Enter fullscreen mode Exit fullscreen mode

And in 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 {
      // Example frontend logic
    } catch (error) {
      Sentry.captureException(error);
      setError(new SentryExampleFrontendError("Frontend error occurred"));
    }
  }, []);

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

  return <div>Sentry Example Page</div>;
}
Enter fullscreen mode Exit fullscreen mode

Additional Changes

Other changes included updating next.config.ts to integrate with Sentry:

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

const nextConfig: NextConfig = {
  // Existing configuration
};

export default withSentryConfig(nextConfig);
Enter fullscreen mode Exit fullscreen mode

Key Takeaway

The key takeaway from this experience is the importance of explicitly managing dependencies and scripts during the CI/CD process, especially when dealing with npm version updates. Additionally, integrating Sentry for error monitoring provides a robust way to capture and handle errors in both API and frontend code.

What's Next

Next, I plan to fine-tune the Sentry configuration to better suit the project's specific needs, such as setting up more detailed error tracking and integrating Sentry with other monitoring tools.

vibecoding #buildinpublic #DevOps #error-monitoring #npm-v12

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)