Skip to main content

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()
}
})