Error Handling

in React

Hong Shik Branden Kim

Why Error Handling ?
What is Error Handling?
What is Error (to handle) ?
How to handle Error ?
- Type Checking
- Conditional Rendering
- Error Boundary
- Good Old try ... catch

Why Error Handling?

👩‍💻

프론트앤드는 완벽해요!

Why Error Handling?

👩‍💻

프론트앤드는 완벽해요!

서버가 오늘 아파요..

Why Error Handling?

👩‍💻

프론트앤드는 완벽해요!

서버가 오늘 아파요..

TRUNCATE TABLE *;

Why Error Handling?

서버가 오늘 아파요..

TRUNCATE TABLE *;

Why Error Handling?

에러가 발생해도,

기존 UI를 해치지 않고 / 서버 작동을 멈추지 않고

코드가 잘 작동하게 해야 한다 !

Why Error Handling?

Morris worm

프로그램 설치 여부를 확인

... 확인이 안되는 경우

다시 확인

1,000,000 $ LOSS

Why Error Handling?

에러 핸들링은

의도치 않게 발생한 에러가
기존에 작성한 코드 실행을 막는 것을 방지하고
에러를 가능한 정확히 분류 및 분석하여
코드 유지보수를 원할히 하는 것

에 의의가 있습니다.

What is Error Handling?

Error Handling

Known error
Known unknown error
Unknown unknown error

Error Handling

🙍

오빠 배고파..

🤔

Error Handling

Type Checking : 혹시 못먹는 거 있어?
Conditional Check : 어제 뭐 먹었어?

🙅‍♂️

🙍

오빠 배고파..

Error Handling

Type Checking : 혹시 못먹는 거 있어?
Conditional Check : 어제 뭐 먹었어?

🙅‍♂️

🙍

오빠 배고파..

🙆‍♂️

오! 그럼 우리 여치니가 좋아하던 뜨-끈 한 국밥 먹자

Error Handling

🙅‍♂️

몰라.. 배고파 (Error)

🙍

Type Checking : 혹시 못먹는 거 있어?
Conditional Check : 어제 뭐 먹었어?

🙍

오빠 배고파..

🙆‍♂️

오! 그럼 우리 여치니가 좋아하던 뜨-끈 한 국밥 먹자

Error Handling

🙅‍♂️

몰라.. 배고파 (Error)

🙍

🤦‍♂️

국밥 말고는 라면 밖에 없지만, 이거라도 먹을레?
(Error Handling)

Type Checking : 혹시 못먹는 거 있어?
Conditional Check : 어제 뭐 먹었어?

🙍

오빠 배고파..

Error Handling

여자친구 만드는데 실패했다... (SyntaxError)

👀

Error Handling

Known error

👀

여자친구 만드는데 실패했다... (SyntaxError)

🙆‍♀️

여자친구 만드는 법을 배우고 실천한다

Error Handling

Known unknown error

🙅‍♂️

Type Checking : 혹시 못먹는 거 있어?
Conditional Check : 어제 뭐 먹었어?

🙆‍♂️

if (어제 먹은거 === 일식)

{ 후보군.filter((food) => (food !== 일식))}

🙆‍♀️

오빠 멋있어! 역시 곱창이야!

🙍

오빠 배고파..

Error Handling

unknown unknown error

🙅‍♂️

몰라.. 배고파 (Error)

🙍

🤦‍♂️

국밥 말고는 라면 밖에 없지만, 이거라도 먹을레?
(Error Handling)

Type Checking : 혹시 못먹는 거 있어?
Conditional Check : 어제 뭐 먹었어?

🙍

오빠 배고파..

💁

내가 원하던 곱창은 아니지만.. 괜찮아...

Error Handling

Known error
Known unknown error
Unknown unknown error

What is Error?
(to handle)

Examples

Error to handle

Known error
Known unknown error
Unknown unknown error

Error to handle

Known error

let word = "apple";
let word = "banana";
// 이중 선언 불가

Error to handle

Known unknown error

function printUsername(firstName, lastName){
  // firstName과 lastName이 없는 경우
  // firstName과 lastName이 타입 불분명, 
  // 둘 중 string이 아닌 경우 이상한 값 리턴.
  // 이를 엄격하게 에러로 간주,
  // 커스텀한 에러 제작 가능.
  return firstName + " " + lastName;
}

Error to handle

Known unknown error

function printUsername(firstName, lastName){
  if (!firstName) {/* do sth */}
  else if (typeof firstName !== string)
  {/* do sth */}
  else {
    return firstName + " " + lastName;
  }
}

Error to handle

Unknown unknown error

let firstName = get().parseJSON().firstName
// 잘못된 JSON이 넘어온다면?

function printUsername(firstName, lastName){
  if (!firstName) {/* do sth */}
  else if (typeof firstName !== string)
  {/* do sth */}
  else {
    return firstName + " " + lastName;
  }
}

Error to handle

Unknown unknown error

let firstName;
try {
  firstName = get().parseJSON().firstName
} catch (error) {
  sendLogToServer(error)
  showFallbackUI()
}

function printUsername(firstName, lastName){
  if (!firstName) {/* do sth */}
  else if (typeof firstName !== string)
  {/* do sth */}
  else {
    return firstName + " " + lastName;
  }
}

Error to handle

Known error
Known unknown error
Unknown unknown error

How to handle error?
(in React)

How to handle error?

Type Checking
Conditional Rendering
Error Boundary
Good Old Javascript

How to handle error?

Type Checking
Conditional Rendering
Error Boundary
Good Old Javascript

How to handle error?

Type Checking

왜 쉼표가 없지?

How to handle error?

Type Checking

class Summary extends React.Component {
  render() {
    const { totalRecovered } = this.props;

    return (
      <div>
        <div className="divValue">
         {totalRecovered.toLocaleString()}
        </div>
      </div>
    );
  }
}

How to handle error?

Type Checking

if 문 사용
prop-types 사용
flow, typescript 사용

How to handle error?

prop-types

Summary.propTypes = {
  totalConfirmed: PropTypes.number,
  totalDeaths: PropTypes.number,
  totalRecovered: PropTypes.number
};

How to handle error?

Conditional Checking

How to handle error?

Conditional Checking

class Component extends React.Component {
  /* ... */
  render() {
    if (data) {
      result = <Hello />
    } else {
      result = <Error />
    }
    return result
  }
}

How to handle error?

Conditional Checking

class Component extends React.Component {
  /* ... */
  render() {
    return data ? <Hello /> : <Error />
  }
}

How to handle error?

Conditional Checking

class Component extends React.Component {
  /* ... */
  render() {
    return (
      {isError && <ErrorAlert />}
      <Hello />
    ) 
    
    
  }
}

How to handle error?

Error Boundary

try...catch 역할을 하는
React Component

How to handle error?

Error Boundary

static getDerivedStateFromError

에러가 발생하면 Error Boundary의 state를 변경

componentDidCatch(error, info)

예외 처리 후의 동작을 수행

render()

error state가 true => fallback UI

error state가 false => this.props.children

(자식 컴포넌트를 전달)

Error Boundary

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

  static getDerivedStateFromError(error) {
    // state를 갱신하여 다음 렌더링에서 대체 UI를 표시합니다.
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // Example "componentStack":
    //   in ComponentThatThrows (created by App)
    //   in ErrorBoundary (created by App)
    //   in div (created by App)
    //   in App
    logComponentStackToMyService(info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      // 별도로 작성한 대체 UI를 렌더링할 수도 있습니다.
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

Error Boundary

class App extends React.Component {
  constructor(props) {
    super(props);
  }

/* ... */

  render() {
    return (
      <ErrorBoundary>
        <Header />
        <Summary />
        <Detail />
      </ErrorBoundary>
    )
  }
}

Error Boundary

class App extends React.Component {
  constructor(props) {
    super(props);
  }

/* ... */

  render() {
    return (
      <>
        <Header />
        <Summary />
        <DetailErrorBounadary>
          <Detail />
        </DetailErrorBounadary>
      </>
    )
  }
}

Error Handling

in React

Contents

Why Error Handling ?

What is Error Handling?

What is Error (to handle) ?

How to handle Error ?

Why Error Handling?

Why Error Handling?

👩‍💻

Why Error Handling?

👩‍💻

Why Error Handling?

👩‍💻

Why Error Handling?

Why Error Handling?

Why Error Handling?

Morris worm

Why Error Handling?

What is Error Handling?

Error Handling

Known error

Known unknown error

Unknown unknown error

Error Handling

🙍

🤔

Error Handling

🙅‍♂️

🙍

Error Handling

🙅‍♂️

🙍

🙆‍♂️

Error Handling

🙅‍♂️

🙍

🙍

🙆‍♂️

Error Handling

🙅‍♂️

🙍

🤦‍♂️

🙍

Error Handling

👀

Error Handling

Known error

👀

🙆‍♀️

Error Handling

Known unknown error

🙅‍♂️

🙆‍♂️

🙆‍♀️

🙍

Error Handling

unknown unknown error

🙅‍♂️

🙍

🤦‍♂️

🙍

💁

Error Handling

Known error

Known unknown error

Unknown unknown error

What is Error? (to handle)

Error to handle

Known error

Known unknown error

Unknown unknown error

Error to handle

Known error

Error to handle

Known unknown error

Error to handle

Known unknown error

Error to handle

Unknown unknown error

What is Error?
(to handle)

How to handle error?
(in React)

try...catch 역할을 하는
React Component