Enhancing CI/CD and E2E Testing with Sentry Integration in GreenView

 

TL;DR: This article details the technical implementation of Sentry for error tracking and end-to-end (E2E) testing enhancements in the GreenView project, focusing on the CI/CD pipeline improvements. Key changes include integrating Sentry for better error monitoring and updating the CI workflow for more robust E2E tests.

The Problem

The GreenView project faced challenges with error tracking and monitoring in production. Although the existing testing suite was comprehensive, there was a need for more integrated and proactive error tracking. Additionally, the CI/CD pipeline required optimizations to ensure smoother and more reliable E2E testing.

What I Tried First

Initially, I focused on enhancing the existing test suite by adding more test cases. However, it became clear that a more integrated solution was needed to capture errors in production effectively. I explored various error tracking tools and chose Sentry due to its seamless integration with Next.js and comprehensive error monitoring capabilities.

The Implementation

Sentry Integration

To integrate Sentry, I initialized it in three main areas: client-side, edge runtime, and server-side. This involved creating configuration files for each:

// sentry.client.config.ts
import * as Sentry from "@sentry/nextjs";

Sentry.init({
  dsn: "https://[e-mail]/0",
  // Additional configuration options
});

// sentry.edge.config.ts
import * as Sentry from "@sentry/nextjs";

Sentry.init({
  dsn: "https://[e-mail]/0",
  // Additional configuration options
});

// sentry.server.config.ts
import * as Sentry from "@sentry/nextjs";

Sentry.init({
  dsn: "https://[e-mail]/0",
  // Additional configuration options
});

CI/CD and E2E Testing Enhancements

The CI workflow was updated to include Sentry and improved E2E testing. Key changes included adding a dummy DATABASE_URL for Prisma generation and enhancing the workflow to support E2E tests:

# .github/workflows/ci-e2e.yml
name: 🌿 CI + E2E — GreenView

on:
  push:
    branches: [main]
  workflow_dispatch: {}
  schedule:
    - cron:  "30 6 * * *"

jobs:
  build-and-test:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Install dependencies
        run: npm install

      - name: Generate Prisma client
        env:
          DATABASE_URL: "postgresql://dummy:dummy@localhost:5432/dummy"
        run: npm run db:generate

      - name: Run E2E tests
        run: npm run test:e2e

Next.js Configuration

The next.config.ts file was updated to include Sentry configuration:

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

const nextConfig: NextConfig = {
  // Configuration options
};

export default withSentryConfig(nextConfig);

Key Takeaway

The integration of Sentry for error tracking and the enhancements to the CI/CD pipeline have significantly improved the reliability and maintainability of the GreenView project. A key takeaway is the importance of proactive error monitoring and the value of integrating such tools early in the development process.

What's Next

Future enhancements will focus on optimizing the E2E tests further and exploring additional Sentry features for more granular error analysis. Additionally, I plan to monitor the impact of these changes on the project's overall performance and adjust configurations as needed.

vibecoding #buildinpublic #Sentry #E2ETesting #CICD #Nextjs #GreenView

---

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

Repo: zaerohell/greenview · 2026-07-11

#playadev #buildinpublic