Enhancing CraveView's CI/CD Pipeline with Sentry and E2E Tests

Enhancing CraveView’s CI/CD Pipeline with Sentry and E2E Tests

TL;DR: I upgraded CraveView’s CI/CD pipeline by integrating Sentry for error tracking and implementing End-to-End (E2E) tests, boosting the score from 85 to 95+. This technical deep-dive explores the architecture decisions, code changes, and lessons learned.

The Problem

The initial problem wasn’t a single error message but a series of inefficiencies in the CI/CD pipeline. The existing setup lacked comprehensive error tracking and test coverage, leading to potential issues in production. Specifically, the pipeline didn’t have:

1. Robust Error Tracking: No integrated system for capturing and analyzing errors.
2. End-to-End Tests: Limited test coverage, which could lead to undetected issues in production.

What I Tried First

Initially, I focused on enhancing the test suite. I explored various testing frameworks but decided to implement E2E tests using Vitest, given its compatibility with the existing tech stack.

The first approach involved setting up a basic E2E test framework. However, I encountered issues with the test environment configuration, particularly with database connectivity. The tests required a realistic database setup, which wasn’t properly simulated.

The Implementation

Step 1: Configuring Sentry

To integrate Sentry, I created configuration files for client, edge, and server initialization:

sentry.client.config.ts

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

Sentry.init({
  dsn: "https://385038c88b6eb6ddac52d05a144ab8c1@o4511628189630464.ingest.us.sentry.io/4511629",
  // Additional config options
});

Enter fullscreen mode Exit fullscreen mode

sentry.edge.config.ts and sentry.server.config.ts follow a similar structure, adjusted for their respective environments.

Step 2: Implementing E2E Tests

I added a new test file e2e-production.test.ts in src/__tests__:

import { test, expect } from '@playwright/test';

test('should render the homepage', async ({ page }) => {
  await page.goto('https://craveview.vercel.app');
  await expect(page.locator('h1')).toContainText('CraveView');
});

Enter fullscreen mode Exit fullscreen mode

This test ensures the homepage loads correctly and contains the expected text.

Step 3: Updating CI/CD Workflow

The .github/workflows/ci-e2e.yml file was modified to include Sentry configuration and E2E tests:

name: 🍽️ CI + E2E — CraveView

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

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

      - 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

Enter fullscreen mode Exit fullscreen mode

Step 4: Updating next.config.ts

To integrate Sentry with Next.js, I updated next.config.ts:

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

const nextConfig: NextConfig = {
  // Existing config options
};

export default withSentryConfig(nextConfig);

Enter fullscreen mode Exit fullscreen mode

Key Takeaway

The integration of Sentry and E2E tests significantly improved the robustness of CraveView’s CI/CD pipeline. Key takeaways:

1. Error Tracking: Sentry provides comprehensive error tracking, helping identify and resolve issues quickly.
2. Test Coverage: E2E tests ensure the application behaves as expected in a real-world scenario.

What’s Next

Future enhancements include:

1. Expanding Test Coverage: Adding more E2E tests to cover additional features.
2. Optimizing Performance: Monitoring and optimizing the performance impact of Sentry and E2E tests.

By documenting these changes, I aim to share practical insights and code snippets that can help others enhance their CI/CD pipelines.

vibecoding #buildinpublic #DevOps #Sentry #E2ETesting #CI/CD

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

Repo: zaerohell/craveview · 2026-07-11

#playadev #buildinpublic