Day 9: Handling Avatar Errors & Recovery #AIChatbot #ErrorHandling

On Day 9, we’ll focus on error handling and fallback mechanisms for our AI-powered digital assistant. Since AI chatbots rely on APIs, voice recognition, and animations, errors are inevitable—but we’ll ensure the assistant responds gracefully when something goes wrong.

Table of Contents

1. Why Implement Error Handling?

✅ User Trust: Errors without feedback confuse users; a friendly fallback response keeps them engaged.
✅ Robust Experience: The assistant remains functional even if the network or voice fails.
✅ Prevents Crashes: Helps avoid app crashes due to failed API calls or speech issues.

2. Common Errors You’ll Encounter

Component	Potential Error	User Impact
GPT API	Network issue, invalid API key, quota exceeded	No response from assistant
Speech-to-Text	Mic permissions, background noise, timeout	Can’t hear user’s voice
Text-to-Speech	Device muted, unsupported language, iOS bug	Bot stays silent
Avatar Animation	React Three Fiber load delay, missing model	Avatar freezes

3. Handling GPT API Failures

Modify your sendMessage method in ChatBot.js:

const sendMessage = async (input) => {
    if (!input.trim()) return;

    const personalityHint = personalityModes[personality];

    try {
        const response = await axios.post(
            'https://api.openai.com/v1/chat/completions',
            {
                model: 'gpt-4',
                messages: [{ role: 'user', content: `${personalityHint} ${input}` }],
            },
            { headers: { Authorization: `Bearer ${OPENAI_API_KEY}` } }
        );

        const botReply = response.data.choices[0].message.content;
        setMessages([...messages, { text: botReply, sender: 'bot' }]);
        speakResponse(botReply);
    } catch (error) {
        console.error('GPT API Error:', error);
        const fallbackMessage = "Hmm, something went wrong. Could you try again later?";
        setMessages([...messages, { text: fallbackMessage, sender: 'bot' }]);
        speakResponse(fallbackMessage);
    }
};

4. Handling Speech-to-Text Errors

Modify VoiceInput.js to detect mic issues:

Voice.onSpeechError = (event) => {
    console.error('Speech recognition error:', event.error);
    Alert.alert('Oops!', 'I couldn’t hear you. Try speaking again in a quieter place.');
};

✅ Permission Check Before Starting

const { status } = await Audio.requestPermissionsAsync();
if (status !== 'granted') {
    Alert.alert('Microphone Access Required', 'Please enable microphone access in your settings.');
}

5. Handling Text-to-Speech Failures

Modify speakResponse in ChatBot.js:

const speakResponse = (text) => {
    try {
        Speech.speak(text, {
            pitch: voiceSettings.pitch,
            rate: voiceSettings.rate,
            onError: (error) => {
                console.error('TTS Error:', error);
                Alert.alert('Voice Issue', 'I couldn’t speak. Please check your sound settings.');
            },
        });
    } catch (error) {
        console.error('TTS Catch Block Error:', error);
    }
};

✅ Check Volume Settings:
If using iOS, silent mode might block speech.
Guide the user:

Alert.alert('Sound Check', 'Ensure your device volume is up and silent mode is off.');

6. Handling Avatar Animation Freezes

When loading 3D models or animations in AvatarAnimation.js:

useEffect(() => {
    try {
        loadAvatarModel(); // Sample function loading the avatar
    } catch (error) {
        console.error('Avatar Load Error:', error);
        setFallbackExpression('neutral'); // Prevent crash if model fails
    }
}, []);

✅ Display Placeholder While Loading:

{avatarLoaded ? <AvatarModel /> : <Text>Loading Avatar...</Text>}

7. User-Friendly Fallback Messages

Error Type	Example Fallback Message
GPT API Error	“I’m having connection issues. Please try later.”
Voice Input Error	“I didn’t catch that. Could you repeat?”
Voice Output Error	“I can’t speak right now. Please read my message.”
Avatar Load Issue	“Avatar’s still waking up. Give me a second!”

✅ Make Fallbacks Friendly:

const fallbackMessage = `Oops! Something glitched. I'm here though. Let's try again! 😅`;

✅ Use Emojis for Tone Matching

😅 Friendly for small errors
🛠️ Professional for config issues
🔇 Clear for sound-related problems

8. Optional: Add a ‘Retry’ Button

<Button title="Retry" onPress={() => sendMessage(lastInput)} />

Where lastInput stores the user’s last message.

9. Testing Error Scenarios

Test	Expected Result
Turn off Wi-Fi & send message	GPT API fallback
Deny mic permission	Voice input alert
Mute phone & enable TTS	TTS error alert
Comment out avatar model	Avatar loading fallback

10. Improving Error Resilience

✅ Offline Mode: Pre-program fallback responses for common questions.

const offlineResponses = {
    'hello': 'Hey there! I’m offline but still here for a quick chat.',
};

✅ Timeout for API Calls:

axios.post('...', data, { timeout: 10000 }); // 10s timeout

✅ Store Last Working Input:

useEffect(() => {
    if (messages.length > 0 && messages[messages.length - 1].sender === 'user') {
        setLastInput(messages[messages.length - 1].text);
    }
}, [messages]);

11. Key Concepts Covered

✅ Added GPT API error handling & fallback messages.
✅ Implemented voice input/output failure detection.
✅ Improved avatar loading resilience.

12. Next Steps: Final App Optimization & Deployment

Tomorrow, we’ll:
🔹 Optimize performance, bundle size, and battery usage.
🔹 Package the assistant for Google Play & App Store.

13. References & Learning Resources

14. SEO Keywords:

AI chatbot error handling, React Native GPT fallback, voice assistant error recovery, OpenAI GPT-4 API errors, React Native speech-to-text issues.

Post Views: 117