miniated javascript stack trace를 소스 맵에 대해 실행하여 적절한 오류를 얻으려면 어떻게 해야 합니까?

miniated javascript stack trace를 소스 맵에 대해 실행하여 적절한 오류를 얻으려면 어떻게 해야 합니까?

프로덕션 서버에서 javascript를 최소화하고 지도 파일을 첨부하지 않습니다.이것은 에러에 의한 상황을 유저에게 알리고 싶지 않기 때문입니다.

각 예외($exceptionHandler가 포착)를 이메일로 전송하기 위해 작성한 로깅 서비스가 있습니다.단, 이 스택트레이스는 거의 읽을 수 없습니다.

n is not defined
    at o (http://localhost:9000/build/app.min.js:1:3284)
    at new NameController (http://localhost:9000/build/app.min.js:1:3412)
    at e (http://localhost:9000/build/bower.min.js:44:193)
    at Object.g.instantiate (http://localhost:9000/build/bower.min.js:44:310)
    at b.$get (http://localhost:9000/build/bower.min.js:85:313)
    at d.compile (http://localhost:9000/build/bower.min.js:321:23333)
    at aa (http://localhost:9000/build/bower.min.js:78:90)
    at K (http://localhost:9000/build/bower.min.js:67:39)
    at g (http://localhost:9000/build/bower.min.js:59:410)
    at http://localhost:9000/build/bower.min.js:58:480 <ui-view class="ng-scope">

궁금한 것은 이 스택트레이스를 실제 비미니케이드 소스 코드에 대해 맵 파일(또는 다른 방법이 있는 경우에는 맵 파일)을 통해 분석할 수 있는 프로그램이 있는지 여부입니다.

필요한 것은 소스 맵을 해석하는 것입니다.이것은 웹 브라우저와는 관계가 없습니다.필요한 것은 미니화된 참조를 미니화된 리소스로 변환하는 것뿐입니다.

노드 사용 경험이 있는 경우JS에는 이미 이 기능을 제공하는 패키지가 있습니다.

https://github.com/mozilla/source-map/

라이브러리를 설치하려면

npm install -g source-map

또는

yarn global add source-map

issue.js라는 이름의 파일을 만듭니다.

fs = require('fs');
var sourceMap = require('source-map');
var smc = new sourceMap.SourceMapConsumer(fs.readFileSync("./app.min.js.map","utf8"));
console.log(smc.originalPositionFor({line: 1, column: 3284}));

노드를 사용하여 파일 실행

node issue.js

스택 트레이스에서 첫 번째 줄의 원래 파일 내의 위치를 콘솔에 출력합니다.

주의: 사용하기 쉽도록 글로벌하게 소스 맵을 설치할 수 있지만 필요한 작업을 수행하고 로컬로 설치하는 노드프로젝트를 작성할 수 있습니다.

소스 맵을 사용하여 (웹 서비스를 사용하지 않고) 미니 스택 트레이스를 판독 가능한 것으로 변환하는 초간단한 툴이 없다고 판단하여 툴을 만들었습니다.

https://github.com/mifi/stacktracify

다음과 같이 설치 및 사용합니다.

npm install -g stacktracify

이제 최소 스택 트레이스를 클립보드에 복사한 후 다음을 실행합니다.

stacktracify /path/to/js.map

@Reactgular의 답변에 다음 스니펫은 최신 버전의 소스 맵에서 작동합니다.

  const rawSourceMap = fs.readFileSync("./app.min.js.map","utf8");

  const whatever = sourceMap.SourceMapConsumer.with(rawSourceMap, null, consumer => {
    console.log(consumer.originalPositionFor({
      line: 1,
      column: 3284
    }));
  });

스레드에 대한 논의에 덧붙이자면 다음과 같은 간단한 정규식이 있습니다./\/(\w*[-\.]?\w*).js:\d*:\d*/g

다음으로 스택 트레이스 내의 모든 회선 번호를 찾는 매우 간단한 regex를 나타냅니다.

  //regex for patterns like utils.js, utils123.js, utils-name.js, utils.version.js
  var patt = /\/(\w*[-\.]?\w*).js:\d*:\d*/g; 
  // returns matches like ['/app.min.js:1:3284', '/bower.min.js:44:193', ..]
  var errorPositions = line.match(patt);
  console.log(errorPositions);
  if(!errorPositions || errorPositions.length === 0) {
      console.log("No error line numbers detected in the file. Ensure your stack trace file is proper");
      return;
  }
  errorPositions.forEach(function(error) {
    findInSourceMap(error);
  });
});

외부에서 소스 맵 파일에 액세스하여 동일한 파일 구조를 얻을 수 있다면 해결할 수 있을 것입니다만, 브라우저 이외의 툴에 대해서는 알 수 없습니다.

실행 중인 브라우저에 데이터가 있다는 추가적인 장점은 소스 맵을 사용해도 얻을 수 없는 로컬 체크가 가능합니다.

롤바와 같은 도구를 사용하여 오류를 보고하는 것이 좋습니다.그러면 디버깅에 도움이 되도록 각 프레임의 모든 로컬이 보고됩니다.보안 문제를 해결하기 위해 브라우저 외부에서 소스 맵을 지원합니다.

페이지에서 실행 중인 JS에 대한 주석 지시문을 추가합니다.

//# 소스 매핑URL=/path/to/your/sourcemap.map

파이어폭스(크롬에 대해 확실하지 않음)에서 소스 맵이 사용 가능한 경우 디버거에 소스 맵을 사용하도록 지시하려면 "디버거 설정" 단추를 클릭하고 표시되는 설정 목록에서 "원본 소스 표시"를 선택합니다.

언급URL : https://stackoverflow.com/questions/33128859/how-can-i-take-a-minified-javascript-stack-trace-and-run-it-against-a-source-map