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

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

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

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

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

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

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

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

소스 맵을 브라우저로 드래그하거나 업로드하려면 소스 맵이 로컬 시스템에 있어야 합니다.

JS 오류 페이지 에서 소스 맵을 오류 스택 추적과 연결하려면 다음을 수행하십시오.

1. one.newrelic.com > Browser > (앱 선택) > JS 오류 로 이동한 다음 JS 오류 그룹을 선택합니다. ( Errors without a stack trace 선택하지 마십시오.)

2. 선택한 JS 오류 그룹에서 오류 인스턴스 세부 정보 탭( 요약 탭 옆)을 선택합니다.

3. 오류 그룹에는 JavaScript 파일을 참조하는 하나 이상의 프레임이 나열됩니다. 프레임 오른쪽에 있는 + 아이콘을 선택하여 확장합니다. 그런 다음 일치하는 소스 맵 파일을 프레임으로 드래그합니다. 대체 옵션: 프레임이 확장되면 파일 찾기 를 선택하여 파일을 수동으로 업로드합니다.

   팁

   왼쪽에 회색 스트립이 있는 오류 프레임은 축소된 JS를 나타냅니다. 파란색 스트립은 소스 맵이 적용되었음을 나타냅니다.

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

문제점 해결

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

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

일반적인 문제	문제 해결 팁
URL 불일치	스택 추적의 각 프레임은 특정 JavaScript URL과 연결됩니다. 해당 URL은 소스 맵을 게시할 때 사용한 JavaScript URL과 일치해야 합니다. 이 URL이 정확히 일치하는지 확인하십시오.
릴리스 이름/ID 불일치	프런트 엔드 자산을 배포할 때 JavaScript URL의 버전이 지정되지 않은 경우 newrelic.addRelease API 메서드 를 사용하여 릴리스 이름과 릴리스 ID를 지정해야 하며 소스 맵을 게시할 때도 지정해야 합니다. 이 문자열이 정확히 일치하는지 확인하십시오.
409 오류: Combination of javascriptUrl, releaseName, and releaseId must be unique	특정 JavaScript URL에 대한 소스 맵 파일이 릴리스 이름이나 ID를 지정하지 않고 업로드되면 New Relic은 URL을 고유 식별자로 취급합니다. 이 문제를 해결하려면 릴리스 이름과 ID 값이 NULL인 소스 맵을 삭제하고 해당 매개변수를 포함하여 해당 URL에 대한 모든 버전을 다시 업로드하세요. 이렇게 하면 특정 JS URL에 대해 여러 버전의 소스 맵이 허용됩니다.
누락된 SourcesContent 구성요소	스택 추적을 축소 해제하려면 매핑 파일에 New Relic의 SourcesContent 구성요소가 포함되어야 합니다. 맵을 성공적으로 업로드했지만 여전히 축소되지 않은 코드가 표시되지 않으면 이 구성요소의 원본 소스 맵을 확인하세요. 찾을 수 없으면 구성 요소가 포함되도록 소스 맵을 재생성하고 맵을 New Relic에 업로드하십시오. SourcesContent 구성 요소가 추가되지 않으면 Whoops, that was the wrong file. Please try again. 과 유사한 오류가 나타납니다.

소스 맵을 생성할 수 없음

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

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', 
},