User Feedback

/**
 * Present the user with a report dialog
 * @param options - Dialog configuration options
 */
function showReportDialog(options?: ReportDialogOptions): void;

import { showReportDialog, lastEventId } from "@sentry/browser";

// Show dialog for last error
showReportDialog({
  eventId: lastEventId(),
  title: "It looks like we're having issues.",
  subtitle: "Our team has been notified. If you'd like to help, tell us what happened below.",
  onLoad: () => console.log("Dialog loaded"),
  onClose: () => console.log("Dialog closed"),
});

/**
 * Get the current feedback widget instance
 * @returns Feedback widget or null
 */
function getFeedback(): FeedbackWidget | null;

/**
 * Send feedback programmatically
 * @param feedback - User feedback data
 */
function sendFeedback(feedback: UserFeedback): void;

/**
 * Capture feedback as an event
 * @param feedback - Feedback event data
 * @param hint - Event hint
 * @returns Event ID
 */
function captureFeedback(feedback: FeedbackEvent, hint?: EventHint): string;

/**
 * Asynchronous feedback widget
 * @param options - Async feedback options
 * @returns Async feedback integration
 */
function feedbackAsyncIntegration(options?: FeedbackAsyncOptions): Integration;

/**
 * Synchronous feedback widget  
 * @param options - Sync feedback options
 * @returns Sync feedback integration
 */
function feedbackSyncIntegration(options?: FeedbackSyncOptions): Integration;

/**
 * Alias for feedbackSyncIntegration
 */
const feedbackIntegration = feedbackSyncIntegration;

interface ReportDialogOptions {
  /** Event ID to associate with the report */
  eventId?: string;
  
  /** DSN override */
  dsn?: string;
  
  /** User information */
  user?: User;
  
  /** Dialog title */
  title?: string;
  
  /** Dialog subtitle */
  subtitle?: string;
  
  /** Secondary subtitle */
  subtitle2?: string;
  
  /** Name field label */
  labelName?: string;
  
  /** Email field label */
  labelEmail?: string;
  
  /** Comments field label */
  labelComments?: string;
  
  /** Close button label */
  labelClose?: string;
  
  /** Submit button label */
  labelSubmit?: string;
  
  /** Generic error message */
  errorGeneric?: string;
  
  /** Form validation error message */
  errorFormEntry?: string;
  
  /** Success message */
  successMessage?: string;
  
  /** Callback when dialog loads */
  onLoad?: () => void;
  
  /** Callback when dialog closes */
  onClose?: () => void;
}

interface UserFeedback {
  /** User's name */
  name?: string;
  
  /** User's email */
  email?: string;
  
  /** Feedback message */
  message: string;
  
  /** Associated event ID */
  event_id?: string;
}

interface FeedbackEvent {
  /** User's name */
  name?: string;
  
  /** User's email */
  email?: string;
  
  /** Feedback message */
  message: string;
  
  /** Associated event ID */
  event_id?: string;
  
  /** URL where feedback was given */
  url?: string;
  
  /** User information */
  user?: User;
  
  /** Additional tags */
  tags?: { [key: string]: Primitive };
}

interface FeedbackWidget {
  /** Open the feedback widget */
  open(): void;
  
  /** Close the feedback widget */
  close(): void;
  
  /** Check if widget is open */
  isOpen(): boolean;
  
  /** Remove the widget */
  remove(): void;
}

/**
 * Create user feedback envelope for transport
 * @param feedback - User feedback data
 * @param options - Envelope options
 * @returns Feedback envelope
 */
function createUserFeedbackEnvelope(
  feedback: UserFeedback,
  options?: { tunnel?: string; dsn?: DsnComponents }
): Envelope;

import { feedbackIntegration } from "@sentry/browser";

Sentry.init({
  dsn: "YOUR_DSN",
  integrations: [
    feedbackIntegration({
      // Widget appears as floating button
      buttonLabel: "Report Bug",
      submitButtonLabel: "Send Bug Report",
      formTitle: "Bug Report",
      
      // Styling
      colorScheme: "dark",
      showBranding: false,
      
      // Auto-inject on errors
      autoInject: false,
      showOnError: true,
    }),
  ],
});

import { sendFeedback, captureFeedback } from "@sentry/browser";

// Send feedback directly
sendFeedback({
  name: "John Doe",
  email: "john@example.com", 
  message: "The checkout button doesn't work on mobile",
});

// Capture feedback as event with context
captureFeedback({
  name: "Jane Smith",
  email: "jane@example.com",
  message: "Love the new design!",
  tags: { feature: "ui_redesign", sentiment: "positive" },
});