Implementing PostHog Tracking and Optimizing Web Vitals in PlayaMXCRM

TL;DR: I integrated PostHog tracking for funnel step analysis and optimized web vitals by implementing a reverse proxy via /ingest rewrite, along with null safety fixes in requestAnimationFrame. These changes enhance analytics and performance monitoring.

The Problem

The initial problem was two-fold: firstly, the need to accurately track user interactions and conversion funnels within the PlayaMXCRM application; secondly, optimizing web vitals to improve the overall user experience. The error messages and symptoms included Module not found errors for posthog-js and null safety issues in requestAnimationFrame.

What I Tried First

Initially, I attempted to integrate PostHog tracking by directly importing posthog-js into the application. However, this resulted in a Module not found error, indicating a need for proper installation and configuration.

The Implementation

PostHog Tracking Integration

To integrate PostHog tracking, I started by installing posthog-js and configuring it within the application. This involved modifying apps/web/src/app/providers/PostHogProvider.tsx to include the PostHog provider and setting up funnel step tracking.

// apps/web/src/app/providers/PostHogProvider.tsx
import { PostHogProvider as PHProvider, usePostHog } from 'posthog-js/react';
import { useEffect, useRef, Suspense } from 'react';
import { usePathname, useSearchParams } from 'next/navigation';

function PostHogPageView() {
  // ...
}

// Web Vitals
useEffect(() => {
  if (!client || typeof window === 'undefined') return;
  const handleWebVitals = (metric) => {
    client.capture('web_vital', metric);
  };
  const webVitals = window.webVitals;
  if (webVitals) {
    webVitals.onPerfEntry = handleWebVitals;
  }
}, [client]);

Optimizing Web Vitals

To optimize web vitals, I implemented a reverse proxy via /ingest rewrite in next.config.mjs. This involved modifying the configuration to capture web vitals and send them to PostHog.

// apps/web/next.config.mjs
const nextConfig = {
  // ...
  async rewrites() {
    return [
      {
        source: '/ingest',
        destination: 'https://ingest.posthog.com',
      },
    ];
  },
};

Null Safety Fix

I also addressed the null safety issue in requestAnimationFrame by modifying apps/web/src/app/layout.tsx.

// apps/web/src/app/layout.tsx
export default function RootLayout({ children }: { children: ReactNode }) {
  // ...
  useEffect(() => {
    const banner = document.getElementById('banner');
    if (!banner) return;
    // ...
  }, []);
}

Key Takeaway

The key takeaway from this implementation is the importance of properly configuring and integrating third-party libraries like PostHog for analytics and performance monitoring. Additionally, optimizing web vitals through reverse proxying and ensuring null safety in critical functions like requestAnimationFrame significantly enhances the application's performance and reliability.

What's Next

Next, I plan to further optimize the application's performance by implementing more advanced web vitals tracking and exploring other PostHog features for deeper insights into user behavior.

Roberto Luna Osorio – Full Stack Developer & Project Lead
Playa del Carmen, México

vibecoding #buildinpublic #posthog #webvitals #performanceoptimization

---

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

Repo: zaerohell/VS · 2026-07-04

#playadev #buildinpublic