Зоны, пример длинного трейса

by Alex Zolotyh

HTML

<script src="https://cdn.rawgit.com/angular/zone.js/master/dist/zone.min.js"></script>
<script src="https://cdn.rawgit.com/angular/zone.js/master/dist/long-stack-trace-zone.min.js"></script>
<p>Смотри в консоль!</p>
<button class="короткий-трейс">Кнопка с коротким трейсом</button>
<button class="длинный-трейс">Кнопка с длинным трейсом</button>

Babel + JSX

const buttonShort = document.querySelector('.короткий-трейс');
const buttonLong = document.querySelector('.длинный-трейс');


const longTraceZone = Zone.current
	.fork({ onHandleError: function (parentZoneDelegate, currentZone, targetZone, error) {
  		const trace = error
      .stack.split('\n')
      .filter((str) => {return !str.match('zone.js')}).join('\n');
      
      console.log(trace);
      
      return true;
		}
	})
	.fork(Zone['longStackTraceZoneSpec']).fork({name: 'Длинный трейс'});;

longTraceZone.run(() => {
	buttonLong.addEventListener('click', throwError);
});


buttonShort.addEventListener('click', throwError);

function throwError() {
	throw new Error(`Ошибка, название зоны: «${Zone.current.name}»`);
}