Skip to main content
Muta will automatically handle errors and prevent the flow from displaying if there are any issues. You can listen for these errors to show appropriate messages to your users.

​
Example Usage

import { Muta } from '@mutalabs/react-native-muta';

function Onboarding() {
  useEffect(() => {
    // Listen for error events
    const subscription = Muta.on('error', (error) => {
      if (error.type === 'network_error') {
        // Handle network errors (e.g., show "No internet connection" message)
        console.log('Network error:', error.message);
      } else if (error.type === 'placement_error') {
        // Handle placement errors (e.g., show "Invalid placement ID" message)
        console.log('Placement error:', error.message);
      }
    });

    // Show the placement
    Muta.displayPlacement({
      placementId: 'your-placement-id',
      bgColor: '#000000'
    });

    return () => subscription.remove();
  }, []);

  return <View style={{ flex: 1 }} />;
}

​
Error Types

​
1. Network Errors

  • Emitted when there’s no internet connection
  • The flow will not display
  • You should show an appropriate “No internet connection” message

​
2. Placement Errors

  • Emitted when there’s an issue with the placement ID or API key
  • The flow will not display
  • You should show an appropriate error message to the user

​
Error Event Structure

​
Network Error

{
  type: 'network_error',
  message: string,      // Error message
  timestamp: number     // Unix timestamp in ms
}

​
Placement Error

{
  type: 'placement_error',
  message: string,      // Error message
  code: string,         // Error code
  timestamp: number,    // Unix timestamp in ms
  placementId: string   // ID of the placement that failed
}

​
Best Practices

  1. User-Friendly Messages: Display error messages that are clear and actionable for users.
  2. Error Recovery: Implement retry mechanisms for network errors.
  3. Error Logging: Log errors for debugging and monitoring purposes.
  4. Fallback Content: Provide fallback content or alternative flows when errors occur.
  5. Error Prevention: Validate placement IDs and API keys before attempting to display flows.

​
Example Implementation

import { Muta } from '@mutalabs/react-native-muta';
import { Alert } from 'react-native';

function Onboarding() {
  useEffect(() => {
    const subscription = Muta.on('error', (error) => {
      switch (error.type) {
        case 'network_error':
          Alert.alert(
            'Connection Error',
            'Please check your internet connection and try again.',
            [
              {
                text: 'Retry',
                onPress: () => {
                  // Retry the placement
                  Muta.displayPlacement({
                    placementId: 'your-placement-id',
                    bgColor: '#000000'
                  });
                }
              },
              {
                text: 'Cancel',
                style: 'cancel'
              }
            ]
          );
          break;

        case 'placement_error':
          Alert.alert(
            'Error',
            'Unable to load the onboarding flow. Please try again later.',
            [
              {
                text: 'OK',
                style: 'default'
              }
            ]
          );
          break;

        default:
          console.error('Unknown error:', error);
      }
    });

    // Show the placement
    Muta.displayPlacement({
      placementId: 'your-placement-id',
      bgColor: '#000000'
    });

    return () => subscription.remove();
  }, []);

  return <View style={{ flex: 1 }} />;
}

​
Error Codes

​
Network Errors

  • NETWORK_ERROR: General network connectivity issues
  • TIMEOUT_ERROR: Request timeout
  • OFFLINE_ERROR: Device is offline

​
Placement Errors

  • INVALID_PLACEMENT_ID: The provided placement ID is invalid or doesn’t exist
  • INVALID_API_KEY: The API key is invalid or has been revoked
  • PLACEMENT_NOT_FOUND: The placement could not be found
  • PLACEMENT_DISABLED: The placement has been disabled
  • PLACEMENT_EXPIRED: The placement has expired
⌘I