Error Tracking Components

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

export default function DashboardPage() {
  return (
    <div className="p-8">
      <h1>Dashboard</h1>

      <ErrorBoundary
        fallback={
          <div className="p-4 border border-red-200 rounded-lg bg-red-50">
            <p className="text-red-800">Widget failed to load</p>
          </div>
        }
      >
        <AnalyticsWidget />
      </ErrorBoundary>

      <ErrorBoundary
        fallback={<p>Chart unavailable</p>}
      >
        <RevenueChart />
      </ErrorBoundary>
    </div>
  )
}

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

export default function App() {
  return (
    <SylphxErrorBoundary
      onError={(error, errorInfo) => {
        // Error is automatically reported to Sylphx
        console.log('Error reported:', error.message)
      }}
    >
      <MyApplication />
    </SylphxErrorBoundary>
  )
}

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

export default function App() {
  return (
    <>
      <main>
        <YourApplication />
      </main>

      {/* Floating feedback button */}
      <FeedbackWidget
        position="bottom-right"
        onSubmit={(feedback) => {
          console.log('Feedback received:', feedback)
        }}
      />
    </>
  )
}

interface Feedback {
  // User message
  message: string

  // Selected category
  category?: 'Bug' | 'Feature' | 'Question' | 'Other' | string

  // Sentiment indicator
  sentiment?: 'positive' | 'negative' | null

  // Base64 encoded screenshot
  screenshot?: string

  // User email (if collected)
  email?: string

  // Attached error report ID
  errorReportId?: string

  // Auto-collected context
  context: {
    url: string
    userAgent: string
    timestamp: string
    viewport: { width: number; height: number }
  }

  // User ID (if authenticated)
  userId?: string
}

import { SylphxErrorBoundary, FeedbackWidget } from '@sylphx/platform-sdk/react'

export function AppProviders({ children }) {
  return (
    <SylphxErrorBoundary
      showFeedbackDialog={false} // We'll use our own
      fallback={({ error, resetErrorBoundary, reportId }) => (
        <div className="min-h-screen flex items-center justify-center p-8">
          <div className="max-w-lg text-center">
            <Bug className="w-16 h-16 text-red-500 mx-auto mb-4" />
            <h1 className="text-2xl font-bold mb-2">Something went wrong</h1>
            <p className="text-muted-foreground mb-6">
              We've been notified and are looking into it.
            </p>

            {/* Inline feedback for errors */}
            <FeedbackWidget
              mode="inline"
              title="What were you trying to do?"
              placeholder="Describe what happened..."
              categories={['Page crashed', 'Button not working', 'Data not loading']}
              attachErrorReport={true}
              showScreenshotButton={false}
              onSubmit={async (feedback) => {
                await submitFeedback({ ...feedback, errorReportId: reportId })
                toast.success('Thanks! This helps us fix the issue faster.')
              }}
            />

            <button
              onClick={resetErrorBoundary}
              className="mt-4 px-6 py-2 border rounded-lg hover:bg-muted transition-colors"
            >
              Try Again
            </button>
          </div>
        </div>
      )}
    >
      {children}

      {/* Global floating feedback widget */}
      <FeedbackWidget position="bottom-right" />
    </SylphxErrorBoundary>
  )
}