masonwan/global-error-handler-example.html

## global-error-handler-example.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript">
    let element

    console.log(`Registering window error`)

    window.onerror = (a,b,c,d,e) => {
      console.error('hi')
    }

    setInterval(() => {
      fail()
    }, 1000)

    window.addEventListener('error', (event) => {
      event.preventDefault()
      if (event.error) {
        element.textContent = event.error.stack
      } else {
        element.textContent = event.message
      }
      console.log(`Got error`, event)
      // console.error(event.error)
    })

    console.log(`Binding loaded event`)
    document.addEventListener('DOMContentLoaded', () => {
      console.log(`Document loaded`)

      element = document.querySelector('.container')
      element.addEventListener('click', () => {
        fail()
      })
    })

    function fail() {
      throw new Error('It is a feature, not an issue.')
    }
  </script>
  <style>
    html,
    body {
      height: 100%;
      margin: 0;
      display: grid;
    }

    .container {
      padding: 0;
      background-color: #FFDC00;

      display: grid;
      grid-template-columns: auto;
      grid-template-rows: auto;
    }

    .item {
      border: 5px solid #001f3f;
      background: #0074D9;

      width: 50px;
      height: 50px;
    }
  </style>
</head>
<body>
<div class="container">

</div>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script type="text/javascript">
	let element

	console.log(`Registering window error`)

	window.onerror = (a,b,c,d,e) => {
	console.error('hi')
	}

	setInterval(() => {
	fail()
	}, 1000)

	window.addEventListener('error', (event) => {
	event.preventDefault()
	if (event.error) {
	element.textContent = event.error.stack
	} else {
	element.textContent = event.message
	}
	console.log(`Got error`, event)
	// console.error(event.error)
	})

	console.log(`Binding loaded event`)
	document.addEventListener('DOMContentLoaded', () => {
	console.log(`Document loaded`)

	element = document.querySelector('.container')
	element.addEventListener('click', () => {
	fail()
	})
	})

	function fail() {
	throw new Error('It is a feature, not an issue.')
	}
	</script>
	<style>
	html,
	body {
	height: 100%;
	margin: 0;
	display: grid;
	}

	.container {
	padding: 0;
	background-color: #FFDC00;

	display: grid;
	grid-template-columns: auto;
	grid-template-rows: auto;
	}

	.item {
	border: 5px solid #001f3f;
	background: #0074D9;

	width: 50px;
	height: 50px;
	}
	</style>
	</head>
	<body>
	<div class="container">

	</div>
	</body>
	</html>