fix

Author: pauldambra

packages/browser/src/__tests__/segment.test.ts

@@ -82,6 +82,9 @@ describe(`Segment integration`, () => {
                 })
             },
         }
+
+        // logging of network requests during init causes this to flake
+        console.error = jest.fn()
     })
 
     it('should call loaded after the segment integration has been set up', async () => {

playground/react-nextjs/app/EventDisplay.tsx

@@ -1,32 +1,14 @@
 'use client'
 
 import { CaptureResult } from 'posthog-js'
-import { useState, useEffect } from 'react'
+import { useState } from 'react'
 
 interface EventDisplayProps {
     events: CaptureResult[]
 }
 
-interface EventWithTimestamp extends CaptureResult {
-    capturedAt: number
-}
-
 export function EventDisplay({ events }: EventDisplayProps) {
     const [expandedEvents, setExpandedEvents] = useState<Set<string>>(new Set())
-    const [eventsWithTimestamp, setEventsWithTimestamp] = useState<EventWithTimestamp[]>([])
-    const [, setTick] = useState(0)
-
-    useEffect(() => {
-        const newEvents = events.filter((e) => !eventsWithTimestamp.find((existing) => existing.uuid === e.uuid))
-        if (newEvents.length > 0) {
-            setEventsWithTimestamp((prev) => [...prev, ...newEvents.map((e) => ({ ...e, capturedAt: Date.now() }))])
-        }
-    }, [events, eventsWithTimestamp])
-
-    useEffect(() => {
-        const interval = setInterval(() => setTick((t) => t + 1), 1000)
-        return () => clearInterval(interval)
-    }, [])
 
     const toggleExpanded = (uuid: string) => {
         setExpandedEvents((prev) => {
@@ -40,15 +22,6 @@ export function EventDisplay({ events }: EventDisplayProps) {
         })
     }
 
-    const getTimeAgo = (timestamp: number) => {
-        const seconds = Math.floor((Date.now() - timestamp) / 1000)
-        if (seconds < 60) return `${seconds}s ago`
-        const minutes = Math.floor(seconds / 60)
-        if (minutes < 60) return `${minutes}m ago`
-        const hours = Math.floor(minutes / 60)
-        return `${hours}h ago`
-    }
-
     return (
         <div
             style={{
@@ -69,11 +42,11 @@ export function EventDisplay({ events }: EventDisplayProps) {
             <h2 style={{ fontSize: '1.125rem', fontWeight: 'bold', marginBottom: '0.75rem', color: '#1f2937' }}>
                 PostHog Events
             </h2>
-            {eventsWithTimestamp.length === 0 ? (
+            {events.length === 0 ? (
                 <p style={{ color: '#6b7280', fontSize: '0.875rem' }}>No events captured yet...</p>
             ) : (
                 <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
-                    {eventsWithTimestamp.map((event) => (
+                    {events.map((event) => (
                         <div
                             key={event.uuid}
                             style={{
@@ -86,18 +59,7 @@ export function EventDisplay({ events }: EventDisplayProps) {
                             }}
                             onClick={() => toggleExpanded(event.uuid)}
                         >
-                            <div
-                                style={{
-                                    display: 'flex',
-                                    justifyContent: 'space-between',
-                                    alignItems: 'center',
-                                }}
-                            >
-                                <div style={{ fontWeight: '600', color: '#2563eb' }}>{event.event}</div>
-                                <div style={{ color: '#9ca3af', fontSize: '0.65rem' }}>
-                                    {getTimeAgo(event.capturedAt)}
-                                </div>
-                            </div>
+                            <div style={{ fontWeight: '600', color: '#2563eb' }}>{event.event}</div>
                             {expandedEvents.has(event.uuid) && (
                                 <div
                                     style={{