Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <button id="throwError">throw error</button>
  <button id="clickThrowError">simulate click which throws error</button>
  <br>
  <label>
    async
    <input name="asyncStyle" type="radio" value="async">
  </label>
  <label>
    Promise chain
    <input name="asyncStyle" type="radio" value="promise-chain">
  </label>
  <label>
     Sync
    <input name="asyncStyle" type="radio" value="sync" checked>
  </label>
  <br>
  <label>
    throw
    <input id="b_throwError" type="checkbox" checked>
  </label>
  <br>
   <label>
    use async click handler
    <input id="b_asyncClickHandler" type="checkbox" checked>
  </label>
  
  
  <script type="module">
    let button = {
      throwError: document.querySelector('#throwError'),
      simulateClick: document.querySelector('#clickThrowError'),
    
    };
    let input = {
      asyncStyle: document.querySelector('[name="asyncStyle"]'),
      throwError: document.querySelector('#b_throwError'),
      useAsyncClick: document.querySelector('#b_asyncClickHandler'),
    };
    
    const options = {
      get withinAsync() {
        let el = document.querySelector('[name="asyncStyle"]:checked');
        return el.value === 'async';
      },
      get withinPromiseChain() {
        let el = document.querySelector('[name="asyncStyle"]:checked');
        return el.value === 'promise-chain';
      },
      get sync() {
        let el = document.querySelector('[name="asyncStyle"]:checked');
        return el.value === 'sync';
      },
      get useAsyncClick() {
        return input.useAsyncClick.checked;
      },
      get throwError() {
        return input.throwError.checked;
      }
    };
    
    async function asyncRejects() {
      console.log('asyncRejects:', {...options });
      if (options.throwError) {
        throw new Error('thrown async error');
      } else {
        return new Error('async error');
      }
    }
    
        
    function chainRejects() {
      console.log('chainRejects:', {...options });
      return new Promise((resolve, reject) => {
        if (options.throwError) {
          throw new Error('thrown async error');
        } else {
          reject(new Error('async error'));
        }
      });
      
    }
    
    function syncError() {
      console.log('syncError:', {...options });
      if (options.throwError) {
        throw new Error('thrown sync error');
      } else {
        return new Error('sync error');
      }
    }
    
    async function asyncClickHandler(event) {
      try {
        let result;
        if (options.withinAsync) {
          result = await asyncRejects();
        } 
        
        if (options.withinPromiseChain) {
          result = await chainRejects();
        } 
        
        if (options.sync) {
          result = syncError();
        }
        
        console.info('nothing to catch. result: ', result);
      } catch (e) {
        console.info('safe (caught)')
      }    
    }
    
    function syncClickHandler(event) {
       try {
        let result;
        if (options.withinAsync) {
          result = asyncRejects();
        } 
        
        if (options.withinPromiseChain) {
          result = chainRejects();
        } 
        
        if (options.sync) {
          result = syncError();
        }
        
        console.info('nothing to catch. result: ', result);
      } catch (e) {
        console.info('safe (caught)')
      }
    }
    
    function metaClickHandler(event) {
      if (options.useAsyncClick) {
        return asyncClickHandler(event);
      }
      
      return syncClickHandler();
    }
    
    button.throwError.addEventListener('click', metaClickHandler);
    
    button.simulateClick.addEventListener('click', (event) => {
      button.throwError.dispatchEvent(new Event('click'));
    });
    
    window.onerror = (e) => {
      console.info('onerror called');
    };
    
    window.addEventListener('error', (event) => {
      console.info('error handler called');
        event.preventDefault()
  event.stopPropagation()
  event.stopImmediatePropagation()
  return false
    });
    
    window.addEventListener('unhandledrejection', (event) => {
      console.info('unhandledrejection handler called');
        event.preventDefault()
  event.stopPropagation()
  event.stopImmediatePropagation()
  return false
    }); 
  </script>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
NullVoxPopulipro
0viewers