구형 스마트 TV 브라우저 es-toolkit 호환성 트러블슈팅

최근 오프라인 박람회 부스에 배치한 스마트 디스플레이 기기(LG 스탠바이미 등)에서 페이지를 띄웠을 때 특정 통계 그래프가 화면에 전혀 출력되지 않는 장애가 보고되었다.

보통의 크롬 브라우저 환경에서는 정상동작하던 통계 화면이 임베디드 기기에서만 오동작하는 원인을 파악해 보니 최신 자바스크립트 표준 API의 하위 호환성 문제였다.

장애 원인 분석

디버깅 콘솔을 통해 확인한 에러 메시지는 다음과 같았다.

TypeError: Object.hasOwn is not a function
at assets/WasteStatisticsView-CdzOCbpi.js

해당 통계 뷰 컴포넌트 내에서 데이터를 그룹화하기 위해 es-toolkit의 groupBy 함수를 도입하여 활용하고 있었는데, 이것이 화근이었다. 원래는 lodash 를 사용하고 있었음

es-toolkit의 내부 groupBy 구현 코드는 다음과 같다.

function groupBy(arr, getKeyFromItem) {
  const result = {};
  for (let i = 0; i < arr.length; i++) {
    const item = arr[i];
    const key = getKeyFromItem(item, i, arr);
    if (!Object.hasOwn(result, key)) { // 이 부분에서 크래시 발생
      result[key] = [];
    }
    result[key].push(item);
  }
  return result;
}

Object.hasOwn은 ES2022 표준에 포함된 비교적 최신 문법이다. 기존의 Object.prototype.hasOwnProperty를 간결하게 쓸 수 있도록 도입되었다. 데스크톱 크롬 93+(2021년 출시) 이상에서는 문제없이 동작하지만, 스탠바이미의 웹 브라우저 엔진은 이에 해당하는 함수가 없어서 런타임 에러가 발생한 것이다.

라이브러리별 호환성 비교 (es-toolkit vs lodash)

전통적으로 많이 쓰이는 lodash의 groupBy 함수 구현부를 확인하면 다음과 같이 범용적인 호환성을 확보하고 있다.

var groupBy = createAggregator(function(result, value, key) {
  if (hasOwnProperty.call(result, key)) { // 안전한 예전 문법 사용
    result[key].push(value);
  } else {
    baseAssignValue(result, key, [value]);
  }
});

lodash는 모든 자바스크립트 환경에서 동작하는 Object.prototype.hasOwnProperty.call() 방식을 사용하기 때문에, 저사양 임베디드 브라우저에서도 정상적으로 동작한다.

최근 자바스크립트 번들 크기를 줄이고 최신 브라우저 성능을 100% 활용하기 위해 es-toolkit과 같은 Modern 라이브러리를 많이 차용하지만, 구형 스마트 TV, 무인 키오스크, 혹은 오래된 하이브리드 태블릿 디바이스를 지원해야 하는 프로젝트에서는 치명적인 런타임 오류의 원인이 될 수 있다.

해결 방안

이 문제를 극복하기 위한 방법은 간단히 요약할 수 있다.

• lodash 등 이전 문법 사용
• 폴리필 설정
  • 프로젝트 전역 Entry 지점에 Object.hasOwn 관련 폴리필을 수동으로 주입하여 브라우저의 빌트인 API가 없는 경우 스스로 정의하게 한다.
  ts

  WrapCopy

  const hasOwn = (obj, key) => Object.prototype.hasOwnProperty.call(obj, key);
  

• Transpile 대상 브라우저 정의
  • 빌드 도구 설정에서 브라우저 지원 범위를 스마트 TV 등 구형 기기를 포함하도록 낮춰 선언하고 폴리필 주입 옵션을 활성화한다.