Error Handling
Handle errors gracefully in your voice conversations with comprehensive error management and user feedback.
Basic Error Handling
Listen for errors using the Error event:
import { Micdrop } from '@micdrop/client'
// Listen for all errors
Micdrop.on('Error', (error) => {
console.error('Error:', error.code, error.message)
})
State-Based Error Handling
Access error information from the state:
// Check for errors in state
Micdrop.on('StateChange', (state) => {
if (state.error) {
console.error('Error:', state.error.code, state.error.message)
updateErrorDisplay(state.error)
} else {
clearErrorDisplay()
}
})
With React hook:
// React component example
function ErrorDisplay() {
const state = useMicdropState()
if (!state.error) return null
return (
<div className="error-banner">
<span className="error-icon">⚠️</span>
<span className="error-message">
{getUserFriendlyMessage(state.error)}
</span>
<button
className="error-action"
onClick={() => handleErrorAction(state.error)}
>
{getErrorActionLabel(state.error.code)}
</button>
</div>
)
}
Error Types
Micdrop provides specific error codes to help you handle different scenarios:
Connection Errors
Micdrop.on('Error', (error) => {
switch (error.code) {
case 'MissingUrl':
showError('Please provide a server URL to connect to')
break
case 'Connection':
showError(
'Failed to connect to server. Please check your internet connection.'
)
break
case 'BadRequest':
showError('Invalid request parameters. Please check your configuration.')
break
case 'NotFound':
showError('Voice server not found. Please check the server URL.')
break
case 'Unauthorized':
showError('Authentication failed. Please check your credentials.')
showLoginDialog()
break
case 'InternalServer':
showError('Server error occurred. Please try again later.')
break
}
})
Microphone Error
Micdrop.on('Error', (error) => {
if (error.code === 'Mic') {
console.error('Microphone error:', error.message)
showMicPermissionDialog()
}
})