OpenTelemetry를 이용한 Vue 앱 프론트엔드 가시성

출처: Dev.to

프론트엔드 애플리케이션이 복잡해질수록 프로덕션 이슈를 디버깅하는 것이 점점 더 어려워집니다.

사용자가 이렇게 보고합니다: “페이지가 느리게 느껴져요.” 혹은 “대시보드가 가끔 멈춰요.”

하지만 로그를 확인해 보면… 모든 것이 정상적으로 보입니다.

전통적인 프론트엔드 모니터링은 무엇이 실패했는지는 알려주지만 왜 발생했는지는 알려주지 못합니다.

여기서 관측 가능성(observability) 이 등장합니다. 그리고 현대 관측 가능성을 위한 가장 인기 있는 도구가 OpenTelemetry 입니다.

이 글에서는 다음을 살펴봅니다:

• 프론트엔드 관측 가능성이란?
• 전통적인 모니터링과의 차이점
• OpenTelemetry 가 왜 업계 표준이 되고 있는가
• Vue 애플리케이션에 OpenTelemetry 를 추가하는 방법
• 유용한 텔레메트리를 수집하기 위한 모범 사례

그럼 바로 들어가 보겠습니다.

🤔 프론트엔드 관측 가능성이란?

관측 가능성은 텔레메트리 데이터를 수집해 애플리케이션 내부에서 무슨 일이 일어나고 있는지 이해할 수 있는 능력입니다.

보통 다음을 포함합니다:

• 트레이스
• 메트릭
• 로그

전통적인 모니터링과 달리, 관측 가능성은 다음과 같은 질문에 답하도록 도와줍니다:

• 왜 이 페이지가 느린가?
• 어떤 API 요청이 지연을 초래했는가?
• 오류가 발생하기 전에 무슨 일이 있었는가?
• 어떤 사용자가 영향을 받았는가?

단순히 무언가가 실패했다는 사실을 아는 것이 아니라…

👉 문제에 이르게 된 전체 이벤트 체인을 이해할 수 있습니다.

🟢 프론트엔드 관측 가능성이 중요한 이유

대부분의 팀은 백엔드 관측 가능성에 막대한 투자를 합니다.

그들은 다음을 추적합니다:

• 데이터베이스 쿼리
• API 지연 시간
• 서버 오류
• 인프라 메트릭

하지만 사용자는 프론트엔드와 상호작용합니다.

많은 문제가 요청이 백엔드에 도달하기 전에도 발생합니다.

예시:

• 느린 컴포넌트 렌더링
• 메인 스레드 차단
• 실패한 네트워크 요청
• 라우팅 문제
• 서드파티 스크립트 지연

프론트엔드 관측 가능성이 없으면 이러한 문제는 대부분 눈에 보이지 않습니다.

🟢 OpenTelemetry 란?

OpenTelemetry(줄여서 OTel)는 텔레메트리 데이터를 수집하고 내보내기 위해 사용되는 오픈소스 관측 가능성 프레임워크입니다.

다음 데이터를 표준화된 방식으로 수집합니다:

• 트레이스
• 메트릭
• 로그

그리고 이를 다음과 같은 도구로 전송합니다:

• Grafana
• Jaeger
• Datadog
• New Relic
• Honeycomb
• Elastic

가장 큰 장점? 벤더 중립적인 계측입니다.

관측 제공자를 바꾸어도 계측 코드를 다시 작성할 필요가 없습니다.

🟢 OpenTelemetry 가 Vue 애플리케이션에 도움이 되는 방법

사용자가 대시보드를 로드한다고 가정해 봅시다.

다음과 같은 일련의 과정이 일어납니다:

Route change
↓
Component mounts
↓
API request starts
↓
Data is fetched
↓
UI renders

Enter fullscreen mode
Exit fullscreen mode

보통 이러한 이벤트들은 서로 연결되지 않은 채로 존재합니다.

OpenTelemetry 를 사용하면 전체 흐름을 트레이스할 수 있습니다.

이를 통해 다음과 같은 질문에 답할 수 있습니다:

• 어떤 API 호출이 페이지를 느리게 만들었는가?
• 렌더링에 얼마나 걸렸는가?
• 어떤 라우트가 성능 문제를 일으키는가?

🟢 Vue 에 OpenTelemetry 설정하기

간단한 설정 예시를 살펴보겠습니다.

필요한 패키지를 설치합니다:

npm install \
  @opentelemetry/api \
  @opentelemetry/sdk-trace-web \
  @opentelemetry/instrumentation-fetch \
  @opentelemetry/instrumentation-xml-http-request

Enter fullscreen mode
Exit fullscreen mode

기본 초기화

import { WebTracerProvider } from '@opentelemetry/sdk-trace-web'

const provider = new WebTracerProvider()

provider.register()

Enter fullscreen mode
Exit fullscreen mode

이 코드는 브라우저에서 텔레메트리를 수집할 수 있는 트레이서를 생성합니다.

🟢 커스텀 트레이스 만들기

가장 강력한 기능 중 하나는 커스텀 트레이싱입니다.

예시:

import { trace } from '@opentelemetry/api'

const tracer = trace.getTracer('vue-app')

Enter fullscreen mode
Exit fullscreen mode

컴포넌트 내부에서:

const span = tracer.startSpan('load-users')

try {
  await fetchUsers()
} finally {
  span.end()
}

Enter fullscreen mode
Exit fullscreen mode

이제 해당 작업이 정확히 얼마나 걸렸는지 확인할 수 있습니다.

프로덕션 이슈를 디버깅할 때 매우 유용합니다.

🟢 라우트 성능 추적하기

Vue Router 역시 트레이스를 추가하기 좋은 지점입니다.

예시:

router.beforeEach((to, from, next) => {
  performance.mark('navigation-start')
  next()
})

router.afterEach(() => {
  performance.measure(
    'navigation',
    'navigation-start'
  )
})

Enter fullscreen mode
Exit fullscreen mode

OpenTelemetry 내보내기와 결합하면 느린 라우트와 네비게이션 병목 현상을 식별할 수 있습니다.

🟢 API 요청 모니터링

많은 성능 문제는 네트워크 호출에서 비롯됩니다.

OpenTelemetry 는 다음에 대한 자동 계측을 제공합니다:

• Fetch API
• XMLHttpRequest

예시:

registerInstrumentations({
  instrumentations: [
    new FetchInstrumentation()
  ]
})

Enter fullscreen mode
Exit fullscreen mode

이제 요청마다 자동으로 트레이스가 생성됩니다.

• 요청 지속 시간
• 실패 여부
• 액션 간 의존 관계

와 같은 정보를 수동으로 계측 코드를 삽입하지 않아도 확인할 수 있습니다.

🧪 모범 사례

• 핵심 사용자 흐름부터 계측하기
• 중요한 API 요청을 트레이스하기
• 불필요한 텔레메트리 수집 피하기
• 트래픽이 많은 애플리케이션에서는 샘플링 적용
• 프론트엔드 트레이스를 백엔드 트레이스와 연계하기
• 라우트 전환 및 렌더링 병목 감시
• 모든 것을 수집하기보다 실행 가능한 인사이트에 집중하기

📖 더 알아보기

Vue, Nuxt, JavaScript 등 유용한 기술에 대해 더 배우고 싶다면, 아래 링크를 클릭하거나 아래 이미지를 클릭해 VueSchool 을 확인해 보세요:

현대적인 Vue 혹은 Nuxt 애플리케이션을 구축하는 데 가장 중요한 개념들을 다루며, 일상 업무나 사이드 프로젝트에 큰 도움이 될 것입니다 😉

🧪 고급 스킬

자격증은 여러분의 실력을 높이고 신뢰성을 부여하며 새로운 기회의 문을 엽니다. 커리어를 발전시키든, 새로운 분야로 전환하든, 성공을 향한 현명한 발걸음이 됩니다.

아래 링크를 클릭하거나 이미지를 클릭해 Certificates.dev 를 확인해 보세요:

스스로에게 투자하세요—Vue.js, JavaScript, Nuxt, Angular, React 등 다양한 분야에서 인증을 획득하세요!

✅ **요약