DEV Community

Roberto Luna
Roberto Luna

Posted on

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

#playadev #buildinpublic #ai #devops

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

TL;DR: I integrated Sentry for error tracking and improved End-to-End (E2E) testing in the tvview project, enhancing the CI/CD pipeline. This resulted in a score increase from 85 to 95+.

The Problem

The tvview project lacked comprehensive error tracking and E2E testing, making it difficult to identify and resolve issues in production. The existing CI/CD pipeline needed improvement to ensure smoother deployments and better code quality.

What I Tried First

Initially, I focused on setting up E2E tests using Vitest, but encountered issues with the test configuration. I also attempted to integrate Sentry, but faced challenges with the DSN (Data Source Name) configuration.

The Implementation

Step 1: Configuring Sentry

To integrate Sentry, I created separate configuration files for the client, edge runtime, and server:

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

Sentry.init({
  dsn: "https://385038c88b6eb6ddac52d05a144ab8c1@o4511628189630464.ingest.us.sent",
  // Additional configuration options
});
Enter fullscreen mode Exit fullscreen mode 
// sentry.edge.config.ts
import * as Sentry from "@sentry/nextjs";

Sentry.init({
  dsn: "https://385038c88b6eb6ddac52d05a144ab8c1@o4511628189630464.ingest.us.sent",
  // Additional configuration options
});
Enter fullscreen mode Exit fullscreen mode 
// sentry.server.config.ts
import * as Sentry from "@sentry/nextjs";

Sentry.init({
  dsn: "https://385038c88b6eb6ddac52d05a144ab8c1@o4511628189630464.ingest.us.sentry.io",
  // Additional configuration options
});
Enter fullscreen mode Exit fullscreen mode

Step 2: Enhancing CI/CD Pipeline

I updated the .github/workflows/ci-e2e.yml file to include Sentry configuration and E2E testing:

name: 📺 CI + E2E — TVView

on:
  push:
    branches: [main]
  workflow_dispatch: {}
  schedule:
    - cron: "35 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
Enter fullscreen mode Exit fullscreen mode

Step 3: Updating next.config.ts

I modified next.config.ts to include Sentry configuration:

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

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

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

Key Takeaway

The integration of Sentry and E2E testing significantly improved the project's error tracking and code quality. A well-configured CI/CD pipeline is crucial for ensuring smooth deployments and reliable code.

What's Next

In the next iteration, I plan to focus on optimizing the E2E tests and exploring additional Sentry features to further enhance error tracking and debugging.

vibecoding #buildinpublic #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/tvview · 2026-07-11

#playadev #buildinpublic

Top comments (0)