React Native JavaScript stack 복원: 어느 source map을 써야 하는가

오류 원본       platform + app build + JavaScript update + engine + raw stack
build 산출물    실행 bundle + 최종 source map + commit + 두 파일 해시값
선택 조건       오류 원본과 산출물 기록의 모든 값 일치
복원           metro-symbolicate에 raw stack과 해당 map 입력
검증           오류 메시지·호출 순서·공개 build 소스와 복원 위치 대조

Error: receipt total must be positive
    at h (index.android.bundle:1:132161)
    at p (index.android.bundle:1:131854)

generated position     index.android.bundle:1:132161
source map lookup      이 생성 위치에 대응하는 원본 위치 검색
original position      src/checkout/checkout-total.ts:17:9
original name          requirePositiveTotal

import React, { useState } from 'react'
import { Button, SafeAreaView, StyleSheet, Text, View } from 'react-native'
 
const ENFORCE_ARTIFACT_MATCH = false
 
type Platform = 'android' | 'ios'
type Engine = 'hermes'
 
type RawStack = {
  appBuild: string
  platform: Platform
  engine: Engine
  bundleHash: string
  frames: string[]
}
 
type MapArtifact = {
  id: string
  appBuild: string
  platform: Platform
  engine: Engine
  bundleHash: string
  mappings: Record<string, string>
}
 
type LookupResult = {
  mapId: string
  artifactMatch: boolean
  locations: string[]
  outcome: 'PASS' | 'FAIL'
}
 
const RAW_STACK: RawStack = {
  appBuild: '2.4.1(417)',
  platform: 'android',
  engine: 'hermes',
  bundleHash: 'sha256:4170417041704170417041704170417041704170417041704170417041704170',
  frames: ['1:132161', '1:131854'],
}
 
const MAPS: MapArtifact[] = [
  {
    id: 'current-main-build-418',
    appBuild: '2.4.2(418)',
    platform: 'android',
    engine: 'hermes',
    bundleHash: 'sha256:4180418041804180418041804180418041804180418041804180418041804180',
    mappings: {
      '1:132161': 'src/profile/ProfileScreen.tsx:88:12',
      '1:131854': 'src/profile/useProfile.ts:41:7',
    },
  },
  {
    id: 'published-build-417',
    appBuild: '2.4.1(417)',
    platform: 'android',
    engine: 'hermes',
    bundleHash: 'sha256:4170417041704170417041704170417041704170417041704170417041704170',
    mappings: {
      '1:132161': 'src/checkout/checkout-total.ts:17:9',
      '1:131854': 'src/checkout/submit-receipt.ts:52:5',
    },
  },
]
 
function matchesStack(stack: RawStack, map: MapArtifact) {
  return (
    stack.appBuild === map.appBuild &&
    stack.platform === map.platform &&
    stack.engine === map.engine &&
    stack.bundleHash === map.bundleHash
  )
}
 
function runLookup(): LookupResult {
  const selectedMap = ENFORCE_ARTIFACT_MATCH
    ? MAPS.find(map => matchesStack(RAW_STACK, map))
    : MAPS[0]
 
  if (!selectedMap) {
    return {
      mapId: '없음',
      artifactMatch: false,
      locations: [],
      outcome: 'FAIL',
    }
  }
 
  const artifactMatch = matchesStack(RAW_STACK, selectedMap)
 
  return {
    mapId: selectedMap.id,
    artifactMatch,
    locations: RAW_STACK.frames.map(
      frame => selectedMap.mappings[frame] ?? `미복원:${frame}`,
    ),
    outcome: artifactMatch ? 'PASS' : 'FAIL',
  }
}
 
export default function App() {
  const [result, setResult] = useState<LookupResult | null>(null)
 
  return (
    <SafeAreaView style={styles.screen}>
      <Text style={styles.title}>JavaScript stack map 선택 fixture</Text>
      <Text>artifact match 검사: {ENFORCE_ARTIFACT_MATCH ? 'on' : 'off'}</Text>
      <Button title="raw stack 복원" onPress={() => setResult(runLookup())} />
 
      {result ? (
        <View style={styles.result}>
          <Text>선택 map: {result.mapId}</Text>
          <Text>산출물 일치: {String(result.artifactMatch)}</Text>
          {result.locations.map((location, index) => (
            <Text key={`${index}:${location}`}>frame {index + 1}: {location}</Text>
          ))}
          <Text>결과: {result.outcome}</Text>
        </View>
      ) : null}
    </SafeAreaView>
  )
}
 
const styles = StyleSheet.create({
  screen: { flex: 1, padding: 16, gap: 12 },
  title: { fontSize: 22, fontWeight: '700' },
  result: { borderWidth: 1, borderColor: '#8A8A8A', padding: 10, gap: 4 },
})

선택 map: current-main-build-418
산출물 일치: false
frame 1: src/profile/ProfileScreen.tsx:88:12
frame 2: src/profile/useProfile.ts:41:7
결과: FAIL

app version / build identifier
platform / build configuration
React Native / JavaScript engine
commit / JavaScript update ID(사용할 때만)
bundle path / SHA-256 hash
final source map path / SHA-256 hash
source map generation status

const ENFORCE_ARTIFACT_MATCH = true

선택 map: published-build-417
산출물 일치: true
frame 1: src/checkout/checkout-total.ts:17:9
frame 2: src/checkout/submit-receipt.ts:52:5
결과: PASS

react {
    hermesFlags = ["-O", "-output-source-map"]
}

npm run android -- --mode="release"

ANDROID_BUNDLE=android/app/build/generated/assets/react/release/index.android.bundle
ANDROID_MAP=android/app/build/generated/sourcemaps/react/release/index.android.bundle.map
shasum -a 256 "$ANDROID_BUNDLE" "$ANDROID_MAP"

export SOURCEMAP_FILE="$(pwd)/../main.jsbundle.map"

ANDROID_MAP=android/app/build/generated/sourcemaps/react/release/index.android.bundle.map
npx metro-symbolicate "$ANDROID_MAP" < stacktrace.txt

adb logcat -d | npx metro-symbolicate "$ANDROID_MAP"

IOS_MAP=main.jsbundle.map
npx metro-symbolicate "$IOS_MAP" < stacktrace.txt

오류 message          requirePositiveTotal의 입력 조건과 맞는가
호출 순서             submitReceipt → requirePositiveTotal 흐름과 맞는가
공개 build source      build 417 commit의 실제 17행인가
제품 단계             비민감 마지막 단계가 receipt-submit인가
재현                   같은 공개 build 입력에서 같은 오류 범주가 생기는가
교정 검증              새 공개 build에서 같은 raw 오류 cluster가 사라지는가

접근        공개 build 진단 담당자와 자동 symbolication 작업으로 제한
보존        지원 중인 공개 버전과 오류 보존 기간에 맞춤
무결성      build 기록의 map hash와 다운로드한 파일 hash 비교
삭제        공개 버전 지원 종료와 법적·보안 정책에 따라 수행
민감 정보   source에 token·secret을 넣지 않고 sourcesContent 포함 여부 검사

오류 원본       platform·app build·engine·update ID·raw stack을 보존했는가
bundle          실행된 파일 위치와 hash를 기록했는가
source map      같은 build의 final map 위치와 hash를 기록했는가
생성 설정       Android hermesFlags와 iOS SOURCEMAP_FILE을 확인했는가
선택 검증       stack key와 map key가 모두 맞지 않으면 복원을 차단하는가
도구 결과       metro-symbolicate 출력과 오류 message·호출 순서를 대조했는가
보안            map 접근·보존·삭제와 sourcesContent 정책이 있는가
platform 경계   JavaScript frame과 Android·iOS native frame을 나눴는가

문제       build 417 JavaScript stack이 읽기 어려움
오판       현재 main의 build 418 map으로 복원해 ProfileScreen을 원인으로 선택
실패       파일·줄은 나오지만 bundle hash와 build가 달라 artifact match=false
교정       platform·build·engine·bundle hash가 모두 맞는 final map 선택
결과       checkout-total.ts:17 requirePositiveTotal로 복원
생성       Android 기본 map 확인, iOS SOURCEMAP_FILE 명시
도구       raw stack + exact map → metro-symbolicate
검증       공개 build source·오류 message·호출 순서·재현과 대조
보안       sourcesContent 가능성을 보고 map 접근·보존 제한
경계       Android·iOS native stack 복원은 26·27편으로 분리