[ STAGE 1: INIT ] -> [ STAGE 2: AUTH ] -> [ STAGE 3: NAV ] -> [ STAGE 4: ACTION ]
       |                   |                  |                   |
       v                   v                  v                   v
+--------------+    +--------------+    +--------------+    +--------------+
| Privacy      |    | Identity     |    | Pages        |    | Track        |
| (Masking)    |    | (UID/Vars)   |    | (Lifecycles) |    | (Events)     |
+--------------+    +--------------+    +--------------+    +--------------+
       |                   |                  |                   v
       +-------------------/                  |            +--------------+
                                              +----------> | Errors       |
                                                           | (Catch/Track)|
                                                           +--------------+

import React, { useEffect } from 'react';
import { View, TextInput } from 'react-native';
import FullStory from '@fullstory/react-native';

const CheckoutProcess = ({ user, orderData }) => {
  useEffect(() => {
    // STEP 1: Privacy (Set before page start to ensure data is masked immediately)
    // Skill: mobile-react-native-privacy

    // STEP 2: Page Lifecycle
    // Skill: mobile-react-native-pages
    const pageHandle = FullStory.page.start('Checkout Review', {
      cart_value_num: orderData.total
    });

    return () => FullStory.page.end(pageHandle);
  }, []);

  const onConfirm = async () => {
    try {
      // STEP 3: Business Logic Event
      // Skill: mobile-react-native-track
      FullStory.track('Order Completed', { order_id_str: orderData.id });
    } catch (e) {
      // STEP 4: Error Capture
      // Skill: mobile-react-native-errors
      FullStory.track('API Error', { status_code_num: 500 });
    }
  };

  return (
    <View data-component="checkout-view">
      {/* STEP 5: Element Naming (CUA Visibility) */}
      <TextInput fs-mask={true} data-element="cc-input" />
    </View>
  );
};

// ❌ WRONG: Tracking an event without starting a page or identifying
const BadComponent = () => {
  const handleTap = () => {
    // ERROR: This event is "homeless" because no page.start() was called.
    FullStory.track('Button Tapped', { label_str: 'Go' });
  };
  
  return <Button onPress={handleTap} title="Go" />;
};