masonwan
1/6/2018 - 12:00 AM

How to handle global error correctly

How to handle global error correct

global-error-handler-example.html
content_copyfile_download
<!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>