Error Tracking | Sylphx Documentation

Auto Capture

Unhandled errors & rejections

Source Maps

Readable stack traces

User Context

Link errors to users

Smart Grouping

Deduplicated by fingerprint

Overview

The error tracking service captures exceptions and errors from your application, providing stack traces, user context, and aggregated error analytics. No need for third-party services like Sentry.

Capture Exceptions

Capture errors and exceptions:

Server-side

import { platform } from '@/lib/platform'

try {
  await riskyOperation()
} catch (error) {
  await platform.monitoring.captureException({
    error,
    context: {
      operation: 'checkout',
      orderId: order.id,
    },
    userId: user?.id,
    tags: {
      severity: 'high',
      component: 'payment',
    },
  })

  // Re-throw or handle gracefully
  throw error
}

Client-side (React)

'use client'

import { useMonitoring } from '@sylphx/platform-sdk/react'

export function MyComponent() {
  const { captureException } = useMonitoring()

  const handleAction = async () => {
    try {
      await someAction()
    } catch (error) {
      captureException(error, {
        context: { action: 'button_click' },
      })
    }
  }

  return <button onClick={handleAction}>Do Something</button>
}

Capture Messages

Capture warnings and informational messages:

// Warning message
await platform.monitoring.captureMessage({
  message: 'API rate limit approaching',
  level: 'warning',
  context: {
    currentUsage: 4500,
    limit: 5000,
  },
})

// Info message
await platform.monitoring.captureMessage({
  message: 'Unusual login pattern detected',
  level: 'info',
  userId: user.id,
  context: {
    loginCount: 15,
    timeWindow: '1h',
  },
})

Global Error Handler

Automatically capture unhandled errors:

Next.js Error Boundary

// app/error.tsx
'use client'

import { useMonitoring } from '@sylphx/platform-sdk/react'
import { useEffect } from 'react'

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  const { captureException } = useMonitoring()

  useEffect(() => {
    captureException(error)
  }, [error, captureException])

  return (
    <div>
      <h2>Something went wrong!</h2>
      <button onClick={reset}>Try again</button>
    </div>
  )
}

Global client handler

// app/providers.tsx
'use client'

import { SylphxProvider } from '@sylphx/platform-sdk/react'

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <SylphxProvider
      appId={process.env.NEXT_PUBLIC_SYLPHX_APP_ID!}
      monitoring={{
        captureUnhandledErrors: true,
        captureUnhandledRejections: true,
      }}
    >
      {children}
    </SylphxProvider>
  )
}

User Context

Associate errors with users for better debugging:

// Set user context for all future errors
import { useMonitoring } from '@sylphx/platform-sdk/react'

function App() {
  const { setUser } = useMonitoring()
  const { user } = useUser()

  useEffect(() => {
    if (user) {
      setUser({
        id: user.id,
        email: user.email,
        name: user.name,
      })
    }
  }, [user, setUser])
}

// Now all captured errors will include user info

Error Grouping

Errors are automatically grouped by:

Error message and type
Stack trace fingerprint
Source file and line number

You can customize grouping with a fingerprint:

await platform.monitoring.captureException({
  error,
  fingerprint: ['payment-failure', paymentProvider],
  // All errors with same fingerprint are grouped together
})

Source Maps

Upload source maps for readable stack traces:

Build configuration

// next.config.js
module.exports = {
  productionBrowserSourceMaps: true,
}

// Upload source maps after build
// npx @sylphx/cli sourcemaps upload ./out --app-id your-app-id

Automatic Upload

Enable automatic source map uploads in your CI/CD pipeline for the best experience.

Dashboard Features

The error tracking dashboard provides:

Real-time error feed

Error grouping and deduplication

Stack traces with source map support

User impact analysis

Error trends over time

Alerts and notifications

Issue status tracking (open/resolved)

Background Jobs

Schedule and run async tasks

Storage Access

Manage file permissions