소스 맵을 업로드하여 JS 오류 최소화

브라우저 모니터링는 소스 맵 업로드를 지원합니다.

소스 맵 지원은 주로 축소된 JavaScript를 "디코딩"하는 데 유용합니다. 축소된 JavaScript로 인해 브라우저의 Errors 페이지에 대부분 쓸모없는 오류 스택 추적이 발생합니다. 소스 맵을 업로드하면 이러한 오류가 코드 줄에 대한 유용한 참조와 함께 이해하기 쉬운 스택 추적으로 변환됩니다. 이 기능은 번들 또는 트랜스파일된 JavaScript 코드에도 유용할 수 있습니다.

브라우저는 소스 맵을 사용하기 위한 두 가지 옵션을 제공합니다.

1. 브라우저 UI를 통해 소스 맵 업로드
2. API를 통해 브라우저에 소스 맵 게시

이 문서에서는 첫 번째 방법인 일반적인 문제 해결 도움말 과 함께 UI를 통해 소스 맵을 업로드하는 방법을 설명합니다. API 메서드 사용에 대한 지침은 API를 통해 소스 맵 푸시를 참조하세요.

New Relic UI를 통해 소스 맵 가져오기

소스 맵 파일을 브라우저 UI로 끌어 놓거나 업로드하여 특정 JavaScript 파일과 연결할 수 있습니다. 그런 다음 New Relic은 축소된 스택 추적을 축소되지 않은 추적 및 오류 페이지에 표시되는 소스 코드로 변환합니다.

1. 로컬 컴퓨터에 소스 맵을 다운로드하세요.

2. one.newrelic.com > All capabilities > Browser > (select an app) > Errors

   으로 이동한 다음 오류 그룹을 클릭하세요. (

   Errors without a stack trace

   라벨이 붙은 그룹을 선택하지 마십시오.)

3. Stack trace

   섹션에서

   Upload source map

   을 클릭합니다.

4. 파일 찾기 팝업에서 소스 파일을 선택하세요. 왼쪽에 회색 줄이 있는 오류 프레임은 축소된 JS를 나타냅니다. 파란색 줄은 소스 맵이 적용되었음을 나타냅니다.

기타 JS 오류 프레임 기능은 다음과 같습니다.

문제점 해결

스택 추적은 여전히 축소됩니다.

소스 맵을 New Relic에 업로드했지만 여전히 축소된 스택 추적이 표시되는 경우 몇 가지 확인해야 할 사항이 있습니다. API를 사용하는 것은 게시된 소스 지도를 나열하거나 삭제 하여 잠재적인 문제를 조사하는 가장 좋은 방법입니다.

소스 맵을 생성할 수 없음

소스 맵을 생성하는 데 문제가 있습니까? 모든 빌드 시스템에는 소스 맵을 생성하기 위한 고유한 지침이 있습니다. 자세한 내용은 특정 도구에 대한 설명서를 참조하십시오. 다음은 널리 사용되는 두 가지 빌드 시스템에 대한 소스 맵 생성 지침입니다.

$
uglifyjs [source files]   \ 
>
     -o bundle.min.js   \ 
>
     -c -m
$
     --source-map "includeSources=true"

$
uglifyjs [source files]   \ 
>
     -o bundle.min.js   \ 
>
     --source-map bundle.min.js.map   \ 
>
     --source-map-include-sources   \ 
>
     -c -m

devtool: 'source-map', 
output: { 
     path: path.join(__dirname, 'dist'), 
     filename: '[name].js', 
     sourceMapFilename: '[name].js.map', 
},