[JS 오류 해결] JavaScript 라이브러리 로드 실패, try/catch로 우아하게 대응하기!

요약

외부 JavaScript 라이브러리 로드 실패 시 발생하는 스크립트 오류를 try/catch 문과 조건부 체크를 활용하여 안정적으로 처리하고, 서비스의 우아한 성능 저하(Graceful Degradation)를 구현하는 방법을 알아봅니다.

본문

웹 애플리케이션 개발 시, 외부 JavaScript 라이브러리(CDN 또는 자체 호스팅)를 사용하는 것은 흔한 일입니다. 하지만 네트워크 문제, 서버 오류, 경로 오타 등으로 인해 라이브러리 로드에 실패할 경우, 해당 라이브러리에 의존하는 스크립트에서 ReferenceError와 같은 치명적인 오류가 발생하여 전체 서비스가 멈추는 불상사가 생길 수 있습니다.

이러한 문제를 방지하고, 특정 기능이 작동하지 않더라도 서비스의 핵심 기능은 유지되도록 하는 우아한 성능 저하(Graceful Degradation) 전략을 try/catch와 조건부 체크를 통해 구현하는 방법을 살펴보겠습니다.

---

1. 기본 구조: try/catch 활용법

try/catch 문은 특정 코드 블록 실행 중 발생한 오류를 잡아내어 프로그램이 중단되지 않고 다음 로직으로 진행될 수 있도록 합니다. 외부 라이브러리 객체 호출 시도 시 발생할 수 있는 오류를 처리하는 가장 기본적인 방법입니다.

JavaScript

try {
    // 외부 라이브러리 객체 호출 시도 (예: Chart.js 인스턴스 생성)
    const myChart = new Chart(ctx, config);
    console.log("✅ 라이브러리 로드 및 초기화 성공!");
    // 라이브러리 성공 시 실행할 추가 로직
    renderChart(myChart); 
} catch (error) {
    // 라이브러리 로드/초기화 실패 시 실행될 로직
    console.warn("⚠️ 라이브러리 로드에 실패했습니다. 다음을 확인하세요:", error.message);
    console.warn("대체 UI 또는 기본 텍스트 모드로 전환합니다.");
    displayFallbackUI(); // 대체 UI를 보여주는 함수 호출
} finally {
    // 성공/실패 여부와 상관없이 항상 실행되어야 할 다음 프로세스
    console.log("➡️ 다음 프로세스를 시작합니다.");
    startNextProcess();
}

• try 블록: 오류 발생 가능성이 있는 코드를 포함합니다.
• catch 블록: try 블록에서 오류가 발생했을 때 실행될 코드를 정의합니다. error 객체를 통해 오류 정보를 얻을 수 있습니다.
• finally 블록: try와 catch 블록의 실행 여부와 관계없이 항상 실행되어야 하는 코드를 포함합니다.

---

2. 더 세련된 방법: 조건부 체크 (Optional Chaining)

try/catch는 코드 블록 전체를 감싸야 하므로 때로는 코드가 길어지고 가독성이 떨어질 수 있습니다. 객체가 존재하는지 먼저 확인하는 방식은 더 깔끔하고 간결하게 오류를 방지할 수 있습니다. 특히 ES2020에 도입된 Optional Chaining (?.) 문법을 활용하면 더욱 편리합니다.

2.1. typeof를 이용한 존재 여부 확인

JavaScript

// Kakao SDK가 전역 객체에 로드되었는지 확인
if (typeof Kakao !== 'undefined') {
    Kakao.init('YOUR_APP_KEY');
    console.log("카카오 SDK 초기화 성공!");
} else {
    console.error("❌ 카카오 SDK를 불러오지 못했습니다. 대체 로직을 실행합니다.");
    handleKakaoSdkLoadFailure(); // 대체 로직 호출
}

2.2. Optional Chaining (?.) 활용 (ES2020+)

객체가 null 또는 undefined일 경우 에러 없이 undefined를 반환합니다.

JavaScript

// 라이브러리 객체가 존재할 때만 메서드 실행
window.ExternalLib?.initialize();

// 또는 특정 속성 접근 시
const userName = user?.profile?.name; // user나 profile이 없으면 undefined 반환, 에러 X

// if 문과 함께 사용하면 더 명확하게 대체 로직 구현 가능
if (window.ExternalLib?.isInitialized()) {
    console.log("외부 라이브러리가 초기화되었습니다.");
} else {
    console.warn("외부 라이브러리 초기화 실패 또는 로드되지 않음.");
    showAlternativeFeature();
}

---

3. 실전 가이드: 단계별 대응 전략

단순히 에러를 잡는 것을 넘어, 사용자가 불편함을 최소화하도록 단계별 대응 전략을 마련하는 것이 중요합니다.

단계	전략	설명
1단계: 재시도 로직	네트워크 일시 오류일 수 있으므로 1~2회 재호출 시도	setTimeout이나 setInterval을 이용해 짧은 간격으로 재로드 시도. 너무 많은 재시도는 자원 낭비.
2단계: Dummy 객체 생성	라이브러리 함수 호출 코드가 많다면, 에러 방지를 위해 빈 함수를 가진 가짜 객체(Mock) 생성	라이브러리가 로드되지 않아도 이후 코드에서 라이브러리명.함수() 호출 시 ReferenceError가 발생하지 않도록 합니다.
3단계: 사용자 알림	기능 사용이 불가능함을 사용자에게 부드럽게 안내 (예: "차트를 불러올 수 없습니다")	<div class="fallback-message">차트를 불러올 수 없습니다. 잠시 후 다시 시도해 주세요.</div> 와 같은 메시지 표시.
4단계: 대체 기능 제공	라이브러리 없이 구현 가능한 대체 기능을 제공 (예: 차트 대신 테이블 데이터 보여주기)	차트 라이브러리 로드 실패 시, 시각적인 차트 대신 데이터를 표 형태로 보여주는 것으로 대체합니다.
5단계: 로깅	개발자 콘솔 또는 서버로 오류 로그 전송	console.error()를 사용하거나 Sentry, Bugsnag와 같은 오류 로깅 서비스에 전송하여 문제 분석에 활용합니다.

예시: Dummy 객체로 에러 방지하기

특정 라이브러리(Kakao SDK)가 없을 때, 이후 코드에서 Kakao.init()과 같은 함수 호출 시 에러가 나지 않도록 '빈 껍데기' 객체를 만들어주는 방식입니다.

JavaScript

// Kakao SDK가 로드되지 않았을 경우, 더미 객체를 생성하여 ReferenceError 방지
if (typeof Kakao === 'undefined') {
    var Kakao = {
        init: function(apiKey) { 
            console.warn("🚨 Kakao SDK가 없어 더미 함수를 실행합니다. 실제 기능은 작동하지 않습니다."); 
            // 필요한 경우 여기에 대체 로직 추가
        },
        isInitialized: function() { return false; },
        Auth: {
            login: function() { console.warn("로그인 기능 사용 불가"); }
        },
        // 필요한 다른 메서드들도 여기에 추가
    };
}

// 이제 아래 코드는 Kakao SDK 로드 실패와 상관없이 에러를 뿜지 않고,
// 더미 객체의 함수들이 호출됩니다.
Kakao.init('your-real-api-key'); 
if (Kakao.isInitialized()) {
    // 실제 초기화가 되었을 때의 로직
} else {
    // 더미 객체가 호출되었을 때의 로직 (또는 추가 대체 로직)
    document.getElementById('kakao-login-button').style.display = 'none';
    document.getElementById('fallback-login-message').innerText = '카카오 로그인 기능을 사용할 수 없습니다.';
}

---

💡 주의할 점

• 전역 스코프 확인: 대부분의 외부 라이브러리는 window 객체에 자신을 등록합니다. typeof window.LibraryName 또는 단순히 typeof LibraryName으로 확인하는 것이 가장 안전합니다.
• 의존성 순서: try/catch나 조건부 체크로 에러를 막더라도, 해당 라이브러리가 뒤에 올 다른 로직의 필수 데이터나 반환 값을 제공한다면, 그 데이터가 없을 경우에 대한 예외 처리도 반드시 함께 해주어야 합니다. 예를 들어, chart.getData()와 같이 데이터를 가져오는 함수가 라이브러리 로드 실패로 인해 호출되지 못한다면, 해당 데이터를 사용하는 다른 로직들도 모두 문제가 생길 수 있습니다.
• 번들러 사용 시: Webpack, Rollup과 같은 번들러를 사용한다면 import() 동적 임포트를 활용하여 라이브러리 로드를 조건부로 하거나 실패 시 대체 로직을 구현할 수 있습니다.

---

외부 JavaScript 라이브러리 로드 실패는 언제든 발생할 수 있는 문제입니다. try/catch와 조건부 체크, 그리고 단계별 대응 전략을 통해 사용자에게 더욱 안정적이고 친화적인 웹 서비스를 제공하시길 바랍니다!