✅ 에러바운더리 도입하기

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    console.log(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children; 
  }
}

// Usage in a component
class App extends React.Component {
  render() {
    return (
      <ErrorBoundary>
        <MyComponent />
      </ErrorBoundary>
    );
  }
}

const 실험전_마지막페이지 = 4;
const 실험후_마지막페이지 = 3;

let AsyncStorage의_마지막페이지 = 실험전_마지막페이지;// 예시로 AsyncStorage를 let으로 작성했다.

const getDataFrom = (index: number) => {
    switch (index) {
        case 1:
            return { title: '페이지1', content: '페이지1의 내용' };
        case 2:
            return { title: '페이지2', content: '페이지2의 내용' };
        case 3:
            return { title: '페이지3', content: '페이지3의 내용' };
        default:
            throw new Error('없는 페이지입니다.'); // 실험 후 마지막 페이지는 3이니까 3보다 큰값은 안 들어올거야
    }
};

function ScreenThrowingError() {
    const [index, setIndex] = React.useState(1);
    const pageData = getDataFrom(index);

    const handlePress = () => {
        if (실험후_마지막페이지 === index) {
            return;
        }
        setIndex(index + 1);
    };

    useEffect(() => {
        const AsyncStorage의_데이터불러오기 = true;
        if (AsyncStorage의_데이터불러오기) {
            setIndex(AsyncStorage의_마지막페이지);
        }
    }, []);

    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <View>
                <PagerView data={pageData} />
            </View>
            <TouchableOpacity style={{ position: 'absolute', bottom: 12 }} onPress={handlePress}>
                <Text style={{ fontSize: 32, color: 'teal' }}>{`다음페이지`}</Text>
            </TouchableOpacity>
        </View>
    );
}

export class ErrorBoundary extends React.Component<{ hasError: boolean }> {
    constructor(props: { children: ReactNode }) {
        super(props);
        this.state = { hasError: false };
    }

    static getDerivedStateFromError() {
        return { hasError: true };
    }

    componentDidCatch(error: Error) {
        // bugsnag.notify(error);
        console.log(error);
    }

    render() {
        if (this.state.hasError) {
            return (
                <View style={{ justifyContent: 'center', alignItems: 'center', rowGap: 12 }}>
                    <Text style={{ fontSize: 32 }}>에러 발생 ☠️</Text>
                    <TouchableOpacity
                        style={{ borderColor: 'red', borderWidth: 1, padding: 10, borderRadius: 10 }}
                        onPress={() => {
                            AsyncStorage의_마지막페이지 = 실험후_마지막페이지;
                            this.setState({ hasError: false });
                        }}>
                        <Text style={{ fontSize: 30, color: 'red' }}>재시도 하기</Text>
                    </TouchableOpacity>
                </View>
            );
        }

        return this.props.children;
    }
}

function App() {
    return (
        <SafeAreaView style={{ justifyContent: 'center', alignItems: 'center', flex: 1, rowGap: 12 }}>
            <ErrorBoundary>
                <ScreenThrowingError />
            </ErrorBoundary>
        </SafeAreaView>
    );
}

// AS-IS
function AScreen() {
    const [data, setData] = useState(null);
    useEffect(() => {
        fetchData().then((data) => setData(data));
    }, []);


    return (
        <Layout>
            <Header/>
            {data ? <AScreenContent data={data} /> : <Loading />}
        </Layout>
    )
}

// TO-BE 1. 컴포넌트로 감싸주기 

function AScreen() {
    return (
        <ErrorBoundary>
            <AScreenContainer />
        </ErrorBoundary>)
}

function AScreenContainer(){
    const [data, setData] = useState(null);
    useEffect(() => {
        fetchData().then((data) => setData(data));
    }, []);


    return (
        <Layout>
            <Header/>
            {data ? <AScreenContent data={data} /> : <Loading />}
        </Layout>
    )
}


// TO-BE 2. HOC로 감싸주기
function AScreen() {
    const [data, setData] = useState(null);
    useEffect(() => {
        fetchData().then((data) => setData(data));
    }, []);
    
    return (
        <Layout>
            <Header/>
            {data ? <AScreenContent data={data} /> : <Loading />}
        </Layout>
    )
}

export default withErrorBoundary(AScreen);

type Props = {
    screen: 'AScreen'|'BScreen'|'CScreen'|'DScreen';
    fallbackHeader?: React.FunctionComponentElement<ScreenHeaderPropsInterface>;
    style?: StyleProp<ViewStyle>;
};
export const RuntimeErrorBoundary: React.FC<PropsWithChildren<Props>> = ({
    children,
    screen,
    style,
    fallbackHeader,
}) => {
    const handleError = useCallback(
        (error: Error, info: React.ErrorInfo) => {
            errorLogging.sendError({
                error: new Error('화이트 스크린 에러발생'),
                originalError: error,
                tag: ErrorTag.WhiteScreen,
            });
        },
        [screen],
    );
    
    const fallbackRender = useCallback(() => {
        return (
            <View style={[styles.container, style]}>
                {isNotNil(fallbackHeader) && fallbackHeader}
                <ErrorContent
                    title={'오류가 발생했습니다'}
                    content={'잠시 후 다시 시도해주세요'}
                />
            </View>
        );
    }, [fallbackHeader, style]);
    return (
        <ErrorBoundary fallbackRender={fallbackRender} onError={handleError}>
            {children}
        </ErrorBoundary>
    );
};
const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
});

// 공통 헤더를 사용하는 경우
function AScreen() {
    return (
        <Layout>
            <Header/>
            <RuntimeErrorBoundary screen={'AScreen'}>
                <AScreenContainer />
            </RuntimeErrorBoundary>
        </Layout>
    )
}

function AScreenContainer(){
    const [data, setData] = useState(null);
    useEffect(() => {
        fetchData().then((data) => setData(data));
    }, []);

    if(!data){
        return <Loading />
    }

    return (
        <AScreenContent data={data} />
    )
}

// 공통 헤더를 사용할 수 없는 경우
function BScreen() {
    return (
        <Layout>
            <RuntimeErrorBoundary
                screen={'BScreen'}
                fallbackHeader={<Header/>}
                style={{ backgroundColor: 'black' }}
            >
                <BScreenContainer />
            </RuntimeErrorBoundary>
        </Layout>
    )
}

function BScreenContainer(){
    const [data, setData] = useState(null);
    useEffect(() => {
        fetchData().then((data) => setData(data));
    }, []);

    return (
        <>
            <BHeader/>
            {data?<BScreenContent data={data} />:<Loading />}
        </>
    )
}

// src/screens/index.tsx 내부 스크린 설정
type RootStackParamList={
    Start: undefined;
    Home: undefined;
    Login: undefined;
    Signup: undefined;
    Profile: { userId: string};
    ProfileModal: { userId: string};
    Feed: {feedId: string, userId: string};
    FeedModal: {feedId: string, userId: string};
    InviteEvent: {eventId: string};
    NotFound: undefined;
    OldRequest: {requestId: string};
}

enum ScreenKeyEnum {
    Start='Start',
    Home = 'Home',
    Login = 'Login',
    Signup = 'Signup',
    Profile = 'Profile',
    ProfileModal = 'ProfileModal',
    Feed = 'Feed',
    FeedModal = 'FeedModal',
    InviteEvent = 'InviteEvent',
    NotFound = 'NotFound',
    OldRequest= 'OldRequest',
}




// tsconfig.json 설정으로 프로젝트 생성
const project = new Project({
    tsConfigFilePath: 'tsconfig.json',
});

type ScreenKey = `${ScreenKeyEnum}`;

// 파일 경로
const SCREEN_KEY_ENUM_PATH = 'src/screens/index.tsx';
const SCREENS_DIR = 'src/screens';

const checkIsScreenKey = (screenKey: string): screenKey is ScreenKey => {
    const screenKeyEnumValues: ScreenKey[] = Object.values(ScreenKeyEnum);
    return screenKeyEnumValues.includes(screenKey as ScreenKey);
};

const filterScreenKeys = (keys: string[]): ScreenKey[] => {
    return keys.filter(checkIsScreenKey);
};

// RuntimeErrorBoundary 컴포넌트를 사용하는 파일을 찾기 위한 함수
const findFilesUsingRuntimeErrorBoundary = (dirPath: string): ScreenKey[] => {
    const screenKeys: string[] = [];
    const items = fs.readdirSync(dirPath, { withFileTypes: true });

    items.forEach((item) => {
        const itemPath = path.join(dirPath, item.name);
        if (item.isDirectory()) {
            screenKeys.push(...findFilesUsingRuntimeErrorBoundary(itemPath));
        } else if (item.isFile() && item.name.endsWith('.tsx')) {
            const sourceFile = project.addSourceFileAtPath(itemPath);
            const fileText = sourceFile.getText();
            if (fileText.includes('<RuntimeErrorBoundary')) {
                // 정규식을 사용하여 스크린 내부 RuntimeErrorBoundary 컴포넌트의 screen prop의 ScreenKeyEnum 값을 추출
                const regex = /<RuntimeErrorBoundary[^>]*screen\s*=\s*\{(ScreenKeyEnum\.\w+)\}/;
                const match = regex.exec(fileText);
                if (match != null) {
                    const screenValue = match[1];
                    const screenKeyRegex = /ScreenKeyEnum\.(\w+)/;
                    const screenKeyMatch = screenKeyRegex.exec(screenValue);
                    if (screenKeyMatch != null) {
                        screenKeys.push(screenKeyMatch[1]);
                    }
                }
            }
        }
    });

    return filterScreenKeys(screenKeys);
};

// ScreenKeyEnum enum의 key 값을 가져오는 함수
const getScreenKeyEnumKeys = (): ScreenKey[] => {
    const sourceFile = project.addSourceFileAtPath(SCREEN_KEY_ENUM_PATH);
    const keys: string[] = [];

    sourceFile.forEachDescendant((node) => {
        if (node.getKind() === SyntaxKind.EnumDeclaration) {
            if (node.getText().includes('ScreenKeyEnum')) {
                node.getChildrenOfKind(SyntaxKind.EnumMember).forEach((member) => {
                    keys.push(member.getName());
                });
            }
        }
    });

    return filterScreenKeys(keys);
};

const main = () => {
    const screenKeys = getScreenKeyEnumKeys();
    const screenKeysInScreenDir = findFilesUsingRuntimeErrorBoundary(SCREENS_DIR);
    const DuplicatedScreenKeys: ScreenKey[] = [
        ScreenKeyEnum.ProfileDetailModal, // ProfileDetail와 중복
        ScreenKeyEnum.FeedModal // Feed와 중복
    ];
    const DelayedScreenKeys: ScreenKey[] = [ScreenKeyEnum.OldRequest, ScreenKeyEnum.ModalRequestReview];
    const NotRequiredScreenKeys: ScreenKey[] = [ScreenKeyEnum.Start, ScreenKeyEnum.NotFound];

    const DoneArr = new Set([...screenKeysInScreenDir, ...screenKeysInComponentDir]);

    const AlreadyCheckedArr = new Set([...NotRequiredScreenKeys, ...DuplicatedScreenKeys, ...DelayedScreenKeys]);

    const requiredScreenArr = screenKeys.filter((screenKey) => !AlreadyCheckedArr.has(screenKey));
    const missingArr = requiredScreenArr.filter((screenKey) => !DoneArr.has(screenKey));

    // 결과 출력
    console.debug('--------------------------------');
    console.debug('전체:', screenKeys.length);
    console.debug('불필요:', NotRequiredScreenKeys.length);
    console.debug('중복:', DuplicatedScreenKeys.length);
    console.debug('보류:', DelayedScreenKeys.length);
    console.debug('필요:', requiredScreenArr.length);
    console.debug('계산결과:', DoneArr.size);
    console.debug('누락된 스크린:', missingArr);
    console.debug('--------------------------------');
};

main();

import React from 'react';
import Screen from '@component/Screen'; 
import { Text, View } from 'react-native';
import { ScreenKeyEnum } from '@screen/index';
import ScreenHeader from '@component/ScreenHeader';
import { RuntimeErrorBoundary } from '@component/RuntimeErrorBoundary';
import Screen from '@component/Screen';
        

export function FooScreen() {     
    return (
        <Layout>
            <ScreenHeader title={''} />
            <RuntimeErrorBoundary screen={ScreenKeyEnum.Foo}>
                <${screenName}Content />
            </RuntimeErrorBoundary>
        </Layout>
    );
} 

function FooContent() {     
    return (
        <View>
            <Text>bcg</Text>
        </View>
    );
};