indolering/error-illustration.html

## error-illustration.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Error Illustration</title>

  <script defer>
    'use strict';

    const env = { //Some global values usually found in window or global...
      session: '#2A'
    };

    class CustomError extends Error {
      constructor(foo = 'bar', ...args){
        super(args);
        this.foo = foo;
        this.date = new Date();
        this.session = env.session || null
      }
    }

    class ErrorProneThing {

      throwString(){
        throw 'string';
      }

      throwNewError(){
        throw new Error('new');
      }

      throwBareError(){
        throw Error('bare')
      }

      throwCustomErrorNew(){
        throw new CustomError('baz', 'customErrorNew');
      }

      throwCustomErrorBare(){
        throw CustomError('qux', 'customErrorBare');
      }

    }

    let thingy = new ErrorProneThing();

    Object.getOwnPropertyNames(ErrorProneThing.prototype).filter(prop=>{
      class GenericClass {}
      return !Object.getOwnPropertyNames(GenericClass).reverse().includes(prop);
    }).forEach(method=>{
      try {
        thingy[method]();
      } catch (e) {
        if(e instanceof TypeError){
          console.error('Unable to throw:', e);
        } else {
          let name = `thingy.${method}()`;
          let func = thingy[method].toString().split('\n').slice(1, -1).join('').trim();

          console.group(name);

          console.info(`function: ${func}`);
          console.info(`typeof e: ${(typeof e)}`);
          console.info(`typeof e.stack !== 'undefined': ${(typeof e.stack  !== 'undefined')}`);
          console.info(`e instanceof Error: ${(e instanceof Error)}`);
          console.info(`e instanceof CustomError: ${(e instanceof CustomError)}`);

          if(e instanceof Error){
            if(e.lineNumber){
              console.info(`line number: ${e.lineNumber}`);
            }

            if(e instanceof CustomError){
              console.info(`e.foo = ${e.foo}`);
            }
          }
          console.info(e);
        }
        console.info('');
        console.groupEnd();

        if(window && Array.isArray(window.errors)){
          window.errors.push(e);
        } else {
          window.errors = [e];
        }
      }
    });


  </script>
  <style>

    * {
      font-family: sans-serif;
      text-align: center;
    }

    code {
      font-family: monospace;
      background-color: #e2e2e2;
      padding: .5em;
      font-style: normal;
      outline: dashed lightgray thin;
    }

    body {
      padding-top: 5vh;
    }

  </style>
</head>
<body>
  <h2>Check your browser console :)</h2>
  <h5>... and <code>window.errors</code></h5>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Error Illustration</title>

	<script defer>
	'use strict';

	const env = { //Some global values usually found in window or global...
	session: '#2A'
	};

	class CustomError extends Error {
	constructor(foo = 'bar', ...args){
	super(args);
	this.foo = foo;
	this.date = new Date();
	this.session = env.session \|\| null
	}
	}

	class ErrorProneThing {

	throwString(){
	throw 'string';
	}

	throwNewError(){
	throw new Error('new');
	}

	throwBareError(){
	throw Error('bare')
	}

	throwCustomErrorNew(){
	throw new CustomError('baz', 'customErrorNew');
	}

	throwCustomErrorBare(){
	throw CustomError('qux', 'customErrorBare');
	}

	}

	let thingy = new ErrorProneThing();

	Object.getOwnPropertyNames(ErrorProneThing.prototype).filter(prop=>{
	class GenericClass {}
	return !Object.getOwnPropertyNames(GenericClass).reverse().includes(prop);
	}).forEach(method=>{
	try {
	thingy[method]();
	} catch (e) {
	if(e instanceof TypeError){
	console.error('Unable to throw:', e);
	} else {
	let name = `thingy.${method}()`;
	let func = thingy[method].toString().split('\n').slice(1, -1).join('').trim();

	console.group(name);

	console.info(`function: ${func}`);
	console.info(`typeof e: ${(typeof e)}`);
	console.info(`typeof e.stack !== 'undefined': ${(typeof e.stack !== 'undefined')}`);
	console.info(`e instanceof Error: ${(e instanceof Error)}`);
	console.info(`e instanceof CustomError: ${(e instanceof CustomError)}`);

	if(e instanceof Error){
	if(e.lineNumber){
	console.info(`line number: ${e.lineNumber}`);
	}

	if(e instanceof CustomError){
	console.info(`e.foo = ${e.foo}`);
	}
	}
	console.info(e);
	}
	console.info('');
	console.groupEnd();

	if(window && Array.isArray(window.errors)){
	window.errors.push(e);
	} else {
	window.errors = [e];
	}
	}
	});


	</script>
	<style>

	* {
	font-family: sans-serif;
	text-align: center;
	}

	code {
	font-family: monospace;
	background-color: #e2e2e2;
	padding: .5em;
	font-style: normal;
	outline: dashed lightgray thin;
	}

	body {
	padding-top: 5vh;
	}

	</style>
	</head>
	<body>
	<h2>Check your browser console :)</h2>
	<h5>... and <code>window.errors</code></h5>
	</body>
	</html>