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