User Feedback

The Pionne SDK exposes a feedback API that lets your users leave a free-form message from your app. Perfect for catching the UX bugs that stack traces alone don’t reveal (“the checkout page stays blank when I click Pay”).

Available from @pionne/react-native@0.7.0.

Recommended API — Pionne.captureFeedback()

This is the stable path. You build your own screen (TextInput + button) and call captureFeedback with the message:

import { Pionne } from '@pionne/react-native';

async function submitFeedback() {
  const res = await Pionne.captureFeedback({
    message: "The X button doesn't react when…",
    name: 'Alice',                         // optional
    email: 'alice@example.com',            // optional
    eventId: 1234,                         // optional — links to a crash
  });
  if (res.ok) showToast('Thanks!');
  else showToast('Failed, try again.');
}

The SDK routes the message to POST /api/feedback (or POST /api/events/{id}/feedback if eventId is provided), attaches it to the project identified by your pio_live_* token, and surfaces it under Settings → User feedback in the mobile dashboard.

Full screen example

import { useState } from 'react';
import { Alert, Button, TextInput, View } from 'react-native';
import { Pionne } from '@pionne/react-native';

export function FeedbackScreen() {
  const [message, setMessage] = useState('');
  const [submitting, setSubmitting] = useState(false);

  async function submit() {
    if (message.trim().length < 5) return;
    setSubmitting(true);
    const res = await Pionne.captureFeedback({ message });
    setSubmitting(false);
    if (res.ok) {
      Alert.alert('Thanks!', 'Message sent.');
      setMessage('');
    } else {
      Alert.alert('Failed', 'Try again in a moment.');
    }
  }

  return (
    <View style={{ padding: 24 }}>
      <TextInput
        value={message}
        onChangeText={setMessage}
        multiline
        placeholder="Describe what's not working…"
        style={{ borderWidth: 1, borderRadius: 8, padding: 12, minHeight: 120 }}
      />
      <Button
        title={submitting ? 'Sending…' : 'Send'}
        onPress={submit}
        disabled={submitting || message.trim().length < 5}
      />
    </View>
  );
}

Attach feedback to an existing crash

If you want to link the feedback to a specific event (e.g. right after an error was shown to the user), pass the eventId:

try {
  await checkout();
} catch (err) {
  Pionne.captureException(err);
  // The eventId isn't known client-side yet — you can either fetch the
  // last event via an admin route, or send the feedback standalone
  // (without eventId) — it'll still be attached to the project.
  await Pionne.captureFeedback({
    message: prompt('What were you doing?') ?? '',
  });
}

Caution

The SDK runs a client-side then server-side PII scrubber on the message: a user pasting a JWT or a card number gets that data replaced with [REDACTED] before storage. The name and email fields are kept as-is — they are intentional.

<PionneFeedbackModal> component — experimental

Caution

Status: experimental, not recommended in prod yet. Mounting <PionneFeedbackModal> at the root of the RN tree triggers a silent crash in some Expo SDK 54 configs. A 0.7.1 is planned to fix this. In the meantime, use Pionne.captureFeedback() with your own screen.

The component was designed as a turn-key modal (Pionne.showFeedback() opens, the user types, the SDK sends). The code is exported but mounting at root is problematic in some configs. If you still want to try:

import { Pionne, PionneFeedbackModal } from '@pionne/react-native';

// Somewhere near your root, knowing it might crash:
<PionneFeedbackModal context={Pionne.getFeedbackContext()} />

// To open it:
Pionne.showFeedback({ eventId: 1234 });

Endpoints

• POST /api/feedback — free-form feedback (no event)
• POST /api/events/{id}/feedback — feedback attached to an existing event

See API · Feedback for the full schemas.