JSFiddle - React, Tailwind, and code Playground

by incutonez

HTML

<button onclick="onClickBreakBtn()" type="button">
  Click to Break App
</button>
<button onclick="onClickBreakTryCatchBtn()" type="button">
  Click to Break App try..catch
</button>

JavaScript

function wait1() {
  return new Promise((resolve, reject) => {
  	throw new Error("blah");
  })
}

function wait2() {
  return wait1();
}

async function onClickBreakBtn() {
  // Because we're not catching these errors from users, we don't know the app is broken, and neither do they... there's no error message that shows... this can also have unforeseen consequences on the JavaScript event loop... it can occasionally break the entire app
  await wait2();
  alert('This will never be reached')
}

async function onClickBreakTryCatchBtn() {
	try {
  	await wait2();
    alert('This will never be reached.');
  }
  catch (ex) {
  	alert('Error occurred!  Please speak with Nigel Pepper.');
  }
}