zone.js composability

<!DOCTYPE html>
<html>

  <head>
    <script data-require="zone.js@*" data-semver="0.4.1" src="https://cdn.rawgit.com/angular/zone.js/v0.8.11/dist/zone.js"></script>
    <script data-require="zone.js@*" data-semver="0.4.1" src="https://cdn.rawgit.com/angular/zone.js/v0.8.11/dist/long-stack-trace-zone.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <h1>Hello Zone!</h1>
    <button id="gen-error">Generate error</button>
    <button id="user-error">Generate user error</button>
    <div style="margin-top: 20px">
      All Messages
      <pre id="all-messages"></pre>
      User Messages
      <pre id="user-messages"></pre>
    </div>
    <script src="script.js"></script>
  </body>

</html>

// Code goes here

class UserError extends Error {
}

Zone.current.fork({ 
  onHandleError(parent, currentZone, targetZone, error) {
    document.getElementById('all-messages').textContent += error.message + '\n'
  }
}).run(() => {
  Zone.current.fork({ 
    onHandleError(parent, currentZone, targetZone, error) {
      if (error instanceof UserError) {
        document.getElementById('user-messages').textContent += error.message + '\n'
      } else {
        parent.handleError(targetZone, error)
      }
    }
  }).run(() => {
    document.getElementById('gen-error').addEventListener('click', () => {
      throw new Error('general error ' + Date.now())
    }, false)
    
    document.getElementById('user-error').addEventListener('click', () => {
      throw new UserError('user error ' + Date.now())
    }, false)
  })
})

/* Styles go here */