User Feedback

Pionne SDK fournit une API de feedback qui permet à tes utilisateurs de laisser un message libre depuis ton app. Idéal pour rattraper les bugs UX que les stack traces seules ne révèlent pas (« la page de checkout reste blanche quand je clique sur Payer »).

Disponible à partir de @pionne/react-native@0.7.0.

API recommandée — Pionne.captureFeedback()

C’est la voie stable. Tu construis ton propre écran (TextInput + bouton) et tu appelles captureFeedback avec le message saisi :

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

async function submitFeedback() {
  const res = await Pionne.captureFeedback({
    message: 'Le bouton X ne réagit pas quand…',
    name: 'Alice',                         // optionnel
    email: 'alice@example.com',            // optionnel
    eventId: 1234,                         // optionnel — lie à un crash
  });
  if (res.ok) showToast('Merci !');
  else showToast('Échec, réessaie.');
}

Le SDK route le message vers POST /api/feedback (ou POST /api/events/{id}/feedback si eventId est fourni), l’attache au projet identifié par ton pio_live_* token, et le rend visible dans Settings → Feedback utilisateurs du dashboard mobile.

Exemple d’écran complet

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('Merci !', 'Message envoyé.');
      setMessage('');
    } else {
      Alert.alert('Échec', 'Réessaie dans un instant.');
    }
  }

  return (
    <View style={{ padding: 24 }}>
      <TextInput
        value={message}
        onChangeText={setMessage}
        multiline
        placeholder="Décris ce qui ne fonctionne pas…"
        style={{ borderWidth: 1, borderRadius: 8, padding: 12, minHeight: 120 }}
      />
      <Button
        title={submitting ? 'Envoi…' : 'Envoyer'}
        onPress={submit}
        disabled={submitting || message.trim().length < 5}
      />
    </View>
  );
}

Attacher un feedback à un crash existant

Si tu veux lier le feedback à un événement précis (par ex. juste après qu’une erreur ait été affichée à l’utilisateur), passe l’eventId :

try {
  await checkout();
} catch (err) {
  Pionne.captureException(err);
  // L'eventId n'est pas encore connu côté client — tu peux soit récupérer
  // le dernier event via une route admin, soit envoyer le feedback en
  // standalone (sans eventId) — il sera quand même rattaché au projet.
  await Pionne.captureFeedback({
    message: prompt('Que faisais-tu ?') ?? '',
  });
}

Attention

Le SDK applique un PII scrubber côté client puis serveur sur le message : un user qui colle un JWT ou un numéro de carte voit ces données remplacées par [REDACTED] avant stockage. Les champs name et email sont conservés tels quels — ils sont volontaires.

Composant <PionneFeedbackModal> — expérimental

Attention

Statut : expérimental, non recommandé en prod pour le moment. Monter <PionneFeedbackModal> à la racine de l’arbre RN provoque un crash silencieux dans certaines configs Expo SDK 54. Une 0.7.1 est prévue pour résoudre ce point. En attendant, utilise Pionne.captureFeedback() avec ton propre écran.

L’idée du composant était de fournir une modale clé-en-main (Pionne.showFeedback() ouvre, l’utilisateur tape, le SDK envoie). Le code est exporté mais le mount au root pose problème dans certaines configs. Si tu veux quand même tester :

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

// Quelque part près de ton root, en sachant que ça peut crasher :
<PionneFeedbackModal context={Pionne.getFeedbackContext()} />

// Pour l'ouvrir :
Pionne.showFeedback({ eventId: 1234 });

Endpoints

• POST /api/feedback — feedback libre (sans event)
• POST /api/events/{id}/feedback — feedback attaché à un event existant

Voir API · Feedback pour les schémas complets.