React Native 모바일 오류 관측성: 실패 신호를 어떻게 나눠 연결하는가

개별 신호 종류    product-result(제품 계약 안의 결과) / technical-error(기술 실패)
                  heartbeat-gap(JavaScript 주기 기록 지연) / platform-diagnostic(운영체제 진단 원본)
사용자 사건 분류  expected-result(예상된 결과) / handled-error(앱이 처리한 기술 오류)
                  unhandled-js-error(처리되지 않은 JavaScript 오류)
                  android-anr / ios-crash / symptom-only(플랫폼 판정 없이 증상만 남음)
사용자 영향       none(없음) / degraded(성능 저하) / blocked(완료 차단) / terminated(종료) / unresponsive(무응답)
원본              app-js / android-system / apple-system / server
연결 문맥         시도 식별값 / 요청 경로 식별값 / 실행 산출물 식별값 / 발생·관측 시각

ERROR 또는 FATAL이면 crash
원본 기록 한 줄이면 사용자 사건 한 건

import React, { useState } from 'react'
import { Button, SafeAreaView, ScrollView, StyleSheet, Text, View } from 'react-native'
 
const USE_INCIDENT_MODEL = false
 
type Severity = 'INFO' | 'WARN' | 'ERROR' | 'FATAL'
type SignalKind =
  | 'product-result'
  | 'technical-error'
  | 'heartbeat-gap'
  | 'platform-diagnostic'
type UserImpact = 'none' | 'degraded' | 'blocked' | 'terminated' | 'unresponsive'
type SignalSource = 'app-js' | 'android-system' | 'apple-system'
type PlatformCategory = 'android-anr' | 'ios-crash' | null
 
type SignalRecord = {
  id: string
  correlationKey: string
  eventName: string
  severity: Severity
  kind: SignalKind
  impact: UserImpact
  source: SignalSource
  handled: boolean
  platformCategory: PlatformCategory
  buildId: string
  occurredAt: string
  observedAt: string
}
 
type IncidentClass =
  | 'expected-result'
  | 'handled-error'
  | 'unhandled-js-error'
  | 'android-anr'
  | 'ios-crash'
  | 'symptom-only'
 
type Incident = {
  correlationKey: string
  classification: IncidentClass
  impact: UserImpact
  sources: SignalSource[]
  signalCount: number
}
 
const BUILD_ID = 'mobile-417'
 
const SIGNAL_RECORDS: SignalRecord[] = [
  {
    id: 'signal-1',
    correlationKey: 'checkout-101',
    eventName: 'payment.card_declined',
    severity: 'ERROR',
    kind: 'product-result',
    impact: 'blocked',
    source: 'app-js',
    handled: true,
    platformCategory: null,
    buildId: BUILD_ID,
    occurredAt: '2026-08-09T10:00:01.000Z',
    observedAt: '2026-08-09T10:00:01.050Z',
  },
  {
    id: 'signal-2',
    correlationKey: 'checkout-102',
    eventName: 'checkout.request_timeout',
    severity: 'ERROR',
    kind: 'technical-error',
    impact: 'blocked',
    source: 'app-js',
    handled: true,
    platformCategory: null,
    buildId: BUILD_ID,
    occurredAt: '2026-08-09T10:00:02.000Z',
    observedAt: '2026-08-09T10:00:02.030Z',
  },
  {
    id: 'signal-3',
    correlationKey: 'receipt-103',
    eventName: 'receipt.render_unhandled',
    severity: 'ERROR',
    kind: 'technical-error',
    impact: 'blocked',
    source: 'app-js',
    handled: false,
    platformCategory: null,
    buildId: BUILD_ID,
    occurredAt: '2026-08-09T10:00:03.000Z',
    observedAt: '2026-08-09T10:00:03.010Z',
  },
  {
    id: 'signal-4',
    correlationKey: 'checkout-104',
    eventName: 'js.heartbeat_gap',
    severity: 'WARN',
    kind: 'heartbeat-gap',
    impact: 'degraded',
    source: 'app-js',
    handled: true,
    platformCategory: null,
    buildId: BUILD_ID,
    occurredAt: '2026-08-09T10:00:04.000Z',
    observedAt: '2026-08-09T10:00:09.300Z',
  },
  {
    id: 'signal-5',
    correlationKey: 'checkout-104',
    eventName: 'android.anr',
    severity: 'ERROR',
    kind: 'platform-diagnostic',
    impact: 'unresponsive',
    source: 'android-system',
    handled: false,
    platformCategory: 'android-anr',
    buildId: BUILD_ID,
    occurredAt: '2026-08-09T10:00:04.100Z',
    observedAt: '2026-08-09T10:01:00.000Z',
  },
  {
    id: 'signal-6',
    correlationKey: 'launch-105',
    eventName: 'apple.crash',
    severity: 'FATAL',
    kind: 'platform-diagnostic',
    impact: 'terminated',
    source: 'apple-system',
    handled: false,
    platformCategory: 'ios-crash',
    buildId: BUILD_ID,
    occurredAt: '2026-08-09T10:00:05.000Z',
    observedAt: '2026-08-09T10:02:00.000Z',
  },
]
 
function uniqueSources(signals: SignalRecord[]): SignalSource[] {
  return [...new Set(signals.map(signal => signal.source))]
}
 
function classifyIncident(signals: SignalRecord[]): IncidentClass {
  const platformSignal = signals.find(signal => signal.platformCategory !== null)
 
  if (platformSignal?.platformCategory === 'android-anr') return 'android-anr'
  if (platformSignal?.platformCategory === 'ios-crash') return 'ios-crash'
  if (signals.some(signal => signal.kind === 'product-result')) return 'expected-result'
  if (signals.some(signal => signal.kind === 'technical-error' && !signal.handled)) {
    return 'unhandled-js-error'
  }
  if (signals.some(signal => signal.kind === 'technical-error' && signal.handled)) {
    return 'handled-error'
  }
 
  return 'symptom-only'
}
 
function strongestImpact(signals: SignalRecord[]): UserImpact {
  const order: UserImpact[] = ['none', 'degraded', 'blocked', 'unresponsive', 'terminated']
 
  return signals.reduce<UserImpact>((current, signal) =>
    order.indexOf(signal.impact) > order.indexOf(current) ? signal.impact : current
  , 'none')
}
 
function buildIncidents(signals: SignalRecord[]): Incident[] {
  const grouped = new Map<string, SignalRecord[]>()
 
  for (const signal of signals) {
    const current = grouped.get(signal.correlationKey) ?? []
    grouped.set(signal.correlationKey, [...current, signal])
  }
 
  return [...grouped.entries()].map(([correlationKey, group]) => ({
    correlationKey,
    classification: classifyIncident(group),
    impact: strongestImpact(group),
    sources: uniqueSources(group),
    signalCount: group.length,
  }))
}
 
function summarizeBySeverity(signals: SignalRecord[]): string[] {
  const crashCount = signals.filter(
    signal => signal.severity === 'ERROR' || signal.severity === 'FATAL'
  ).length
 
  return [
    `개별 신호: ${signals.length}`,
    `crash: ${crashCount}`,
    `사용자 사건: ${signals.length}`,
    ...signals.map(signal =>
      `${signal.correlationKey} → ${signal.severity === 'ERROR' || signal.severity === 'FATAL' ? 'crash' : '기타'}`
    ),
  ]
}
 
function summarizeByDimensions(signals: SignalRecord[]): string[] {
  const incidents = buildIncidents(signals)
 
  return [
    `개별 신호: ${signals.length}`,
    `사용자 사건: ${incidents.length}`,
    ...incidents.map(incident =>
      `${incident.correlationKey} → ${incident.classification} / ${incident.impact} / ${incident.sources.join('+')} / 신호 ${incident.signalCount}`
    ),
  ]
}
 
export default function App() {
  const [lines, setLines] = useState<string[]>([])
 
  function runFixture() {
    setLines(
      USE_INCIDENT_MODEL
        ? summarizeByDimensions(SIGNAL_RECORDS)
        : summarizeBySeverity(SIGNAL_RECORDS)
    )
  }
 
  return (
    <SafeAreaView style={styles.screen}>
      <ScrollView contentContainerStyle={styles.content}>
        <Text style={styles.title}>모바일 오류 관측성 fixture</Text>
        <Text>사건 연결 모델: {USE_INCIDENT_MODEL ? 'on' : 'off'}</Text>
        <Button title="6개 신호 분류" onPress={runFixture} />
 
        <View style={styles.results}>
          {lines.map((line, index) => (
            <Text key={`${index}-${line}`}>{line}</Text>
          ))}
        </View>
      </ScrollView>
    </SafeAreaView>
  )
}
 
const styles = StyleSheet.create({
  screen: { flex: 1 },
  content: { padding: 16, gap: 12 },
  title: { fontSize: 22, fontWeight: '700' },
  results: { borderWidth: 1, borderColor: '#8A8A8A', padding: 12, gap: 6 },
})

개별 신호: 6
crash: 5
사용자 사건: 6
checkout-101 → crash
checkout-102 → crash
receipt-103 → crash
checkout-104 → 기타
checkout-104 → crash
launch-105 → crash

app-js / js.heartbeat_gap       JavaScript 기록 간격이 왜 길어졌는가?
android-system / android.anr    Android가 어느 ANR 범주와 trace를 남겼는가?

const USE_INCIDENT_MODEL = true

개별 신호: 6
사용자 사건: 5
checkout-101 → expected-result / blocked / app-js / 신호 1
checkout-102 → handled-error / blocked / app-js / 신호 1
receipt-103 → unhandled-js-error / blocked / app-js / 신호 1
checkout-104 → android-anr / unresponsive / app-js+android-system / 신호 2
launch-105 → ios-crash / terminated / apple-system / 신호 1

JavaScript frame        실행 bundle과 함께 만든 platform별 최종 source map
Android Java·Kotlin     같은 공개 build의 R8 mapping
Android C·C++ 주소      같은 ABI·build의 제거 전 native symbols
iOS Mach-O 주소         같은 build UUID의 dSYM + 프로세서 구조 + load address

금지 예     인증 비밀값 / 카드 정보 / 사용자 입력 전체
허용 후보   무작위 attempt ID / build ID / 안정된 사건 이름 / 비민감 제품 단계
별도 정책   보존 기간 / 접근 권한 / 삭제·가림 / 수집 실패 감시

두 단계 분류    개별 신호 종류와 연결 뒤 사용자 사건 분류를 구분했는가
사용자 영향     완료 여부와 degraded·blocked·terminated·unresponsive를 별도로 기록하는가
심각도          알림 우선순위이지 crash 판정기가 아님을 보존하는가
원본            app-js·Android·Apple·server 기록을 덮어쓰지 않는가
상관 연결       attempt/trace/build/시각의 생성·전달·충돌 조건이 있는가
중복 집계       개별 신호 수와 사용자 사건 수를 별도 지표로 계산하는가
stack 산출물     JavaScript·Android·iOS 계층별 정확한 공개 build 산출물을 고르는가
민감 정보       식별자·사건 이름·속성의 허용 목록과 보존 정책이 있는가
수집 실패       종료·네트워크 끊김·앱이 보이지 않는 상태·지연 도착을 검증했는가

문제       ERROR/FATAL 기록을 모두 crash로 세고 원본 한 줄을 사용자 사건 한 건으로 계산
실패       카드 거절·처리 timeout까지 crash, ANR heartbeat와 플랫폼 진단은 이중 집계
분리       개별 신호 종류 / 사용자 사건 분류 / 영향 / 심각도 / 원본 / 플랫폼 범주
연결       attempt ID / trace ID / build ID / 발생·관측 시각
보존       개별 신호 6개는 그대로, 같은 시도만 사용자 사건 보기에서 연결
교정 결과  expected 1 / handled 1 / unhandled JS 1 / Android ANR 1 / iOS crash 1
복원       JavaScript source map / Android mapping·symbols / iOS dSYM
경계       fixture 분류 성공은 실제 종료·ANR·hang 수집 성공을 증명하지 않음