Performance Profiling | Bootspring Docs

Patterns for identifying and fixing performance bottlenecks.

Overview#

Profiling helps you find and fix performance issues systematically. This pattern covers:

React DevTools Profiler
Server-side profiling
Database query profiling
Custom performance metrics
Web Vitals monitoring

Prerequisites#

npm install web-vitals @opentelemetry/api

Code Example#

React DevTools Profiler#

// components/ProfiledComponent.tsx
'use client'

import { Profiler, ProfilerOnRenderCallback } from 'react'

const onRender: ProfilerOnRenderCallback = (
  id,
  phase,
  actualDuration,
  baseDuration,
  startTime,
  commitTime
) => {
  // Log or send to analytics
  console.log({
    id,
    phase, // "mount" or "update"
    actualDuration, // Time spent rendering
    baseDuration, // Estimated time without memoization
    startTime,
    commitTime
  })

  // Send to monitoring service in production
  if (process.env.NODE_ENV === 'production') {
    sendMetric('react_render', {
      component: id,
      phase,
      duration: actualDuration
    })
  }
}

export function ProfiledDashboard({ children }: { children: React.ReactNode }) {
  return (
    <Profiler id="Dashboard" onRender={onRender}>
      {children}
    </Profiler>
  )
}

Custom Performance Hooks#

// hooks/usePerformance.ts
'use client'

import { useEffect, useRef } from 'react'

export function useRenderCount(componentName: string) {
  const renderCount = useRef(0)

  useEffect(() => {
    renderCount.current++

    if (process.env.NODE_ENV === 'development') {
      console.log(`${componentName} rendered ${renderCount.current} times`)
    }
  })

  return renderCount.current
}

export function useMountTime(componentName: string) {
  const mountTime = useRef(performance.now())

  useEffect(() => {
    const duration = performance.now() - mountTime.current

    if (duration > 100) {
      console.warn(`${componentName} took ${duration.toFixed(2)}ms to mount`)
    }
  }, [componentName])
}

export function useUpdateTime(componentName: string, deps: any[]) {
  const lastUpdate = useRef(performance.now())

  useEffect(() => {
    const now = performance.now()
    const duration = now - lastUpdate.current
    lastUpdate.current = now

    if (duration > 16) { // More than one frame
      console.warn(`${componentName} update took ${duration.toFixed(2)}ms`)
    }
  }, deps)
}

Server-Side Performance Tracing#

// lib/performance.ts
import { trace, SpanStatusCode } from '@opentelemetry/api'

const tracer = trace.getTracer('my-app')

export async function withSpan<T>(
  name: string,
  fn: () => Promise<T>,
  attributes?: Record<string, string | number>
): Promise<T> {
  return tracer.startActiveSpan(name, async span => {
    if (attributes) {
      span.setAttributes(attributes)
    }

    try {
      const result = await fn()
      span.setStatus({ code: SpanStatusCode.OK })
      return result
    } catch (error) {
      span.setStatus({
        code: SpanStatusCode.ERROR,
        message: error instanceof Error ? error.message : 'Unknown error'
      })
      span.recordException(error as Error)
      throw error
    } finally {
      span.end()
    }
  })
}

// Usage
const users = await withSpan(
  'fetch-users',
  () => prisma.user.findMany(),
  { 'db.operation': 'findMany', 'db.table': 'users' }
)

Database Query Profiling#

// lib/db-profiler.ts
import { Prisma } from '@prisma/client'
import { prisma } from '@/lib/db'

// Query logging middleware
export const queryLogger: Prisma.Middleware = async (params, next) => {
  const before = Date.now()

  const result = await next(params)

  const after = Date.now()
  const duration = after - before

  // Log slow queries
  if (duration > 100) {
    console.warn('Slow query detected:', {
      model: params.model,
      action: params.action,
      duration: `${duration}ms`,
      args: JSON.stringify(params.args).slice(0, 200)
    })
  }

  // Send metrics
  sendMetric('db_query', {
    model: params.model ?? 'unknown',
    action: params.action,
    duration
  })

  return result
}

// prisma.$use(queryLogger)

// Query explain for debugging
export async function explainQuery(query: string) {
  const result = await prisma.$queryRawUnsafe(`EXPLAIN ANALYZE ${query}`)
  return result
}

Web Vitals Monitoring#

// app/layout.tsx
import { WebVitals } from '@/components/WebVitals'

export default function RootLayout({
  children
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <WebVitals />
      </body>
    </html>
  )
}

// components/WebVitals.tsx
'use client'

import { useEffect } from 'react'
import { onCLS, onFID, onLCP, onFCP, onTTFB } from 'web-vitals'

export function WebVitals() {
  useEffect(() => {
    function sendToAnalytics(metric: any) {
      const body = JSON.stringify({
        name: metric.name,
        value: metric.value,
        rating: metric.rating,
        delta: metric.delta,
        id: metric.id,
        navigationType: metric.navigationType
      })

      // Use sendBeacon for reliability
      if (navigator.sendBeacon) {
        navigator.sendBeacon('/api/vitals', body)
      } else {
        fetch('/api/vitals', { body, method: 'POST', keepalive: true })
      }
    }

    onCLS(sendToAnalytics) // Cumulative Layout Shift
    onFID(sendToAnalytics) // First Input Delay
    onLCP(sendToAnalytics) // Largest Contentful Paint
    onFCP(sendToAnalytics) // First Contentful Paint
    onTTFB(sendToAnalytics) // Time to First Byte
  }, [])

  return null
}

Performance Budget#

// lib/performance-budget.ts
interface PerformanceBudget {
  lcp: number // Largest Contentful Paint (ms)
  fid: number // First Input Delay (ms)
  cls: number // Cumulative Layout Shift
  ttfb: number // Time to First Byte (ms)
  bundleSize: number // JS bundle size (KB)
}

const BUDGET: PerformanceBudget = {
  lcp: 2500,
  fid: 100,
  cls: 0.1,
  ttfb: 800,
  bundleSize: 200
}

export function checkBudget(metrics: Partial<PerformanceBudget>) {
  const violations: string[] = []

  for (const [key, threshold] of Object.entries(BUDGET)) {
    const value = metrics[key as keyof PerformanceBudget]
    if (value !== undefined && value > threshold) {
      violations.push(
        `${key}: ${value} exceeds budget of ${threshold}`
      )
    }
  }

  return {
    passed: violations.length === 0,
    violations
  }
}

// CI integration
// scripts/check-performance.ts
async function checkPerformanceBudget() {
  const metrics = await runLighthouse('https://example.com')

  const result = checkBudget({
    lcp: metrics.lcp,
    cls: metrics.cls,
    ttfb: metrics.ttfb
  })

  if (!result.passed) {
    console.error('Performance budget exceeded:')
    result.violations.forEach(v => console.error(`  - ${v}`))
    process.exit(1)
  }

  console.log('Performance budget passed!')
}

Custom Performance Marks#

// lib/marks.ts
export function startMark(name: string) {
  if (typeof performance !== 'undefined') {
    performance.mark(`${name}-start`)
  }
}

export function endMark(name: string) {
  if (typeof performance !== 'undefined') {
    performance.mark(`${name}-end`)

    try {
      performance.measure(name, `${name}-start`, `${name}-end`)

      const entries = performance.getEntriesByName(name)
      const duration = entries[entries.length - 1]?.duration

      console.log(`${name}: ${duration?.toFixed(2)}ms`)

      // Cleanup
      performance.clearMarks(`${name}-start`)
      performance.clearMarks(`${name}-end`)
      performance.clearMeasures(name)

      return duration
    } catch (e) {
      // Mark not found
    }
  }
}

// Usage
startMark('data-fetch')
const data = await fetchData()
endMark('data-fetch') // Logs: data-fetch: 123.45ms

Usage Instructions#

Use React DevTools Profiler to identify slow renders
Add performance tracing to server-side operations
Monitor database query performance
Track Core Web Vitals in production
Set and enforce performance budgets

Best Practices#

Profile in production mode - Development mode adds overhead
Test on real devices - Use device lab or BrowserStack
Establish baselines - Know your starting point
Automate checks - Include performance tests in CI
Monitor trends - Watch for regressions over time
Focus on user impact - Prioritize visible performance issues
Use sampling - Don't log every request in production

Monitoring - Application monitoring
Optimization - Optimize performance
Bundle Analysis - Analyze JS bundles
Caching - Reduce server load