function showUnhandledError(err) {
  if (!err) return;
  const id = 'unhandledError';
  const fontSize = 10;
  const el = document.getElementById(id) || document.createElement('textarea');
  const text = el.value = [
    el.value,
    isObject(err)
      ? `${IS_FIREFOX && err.message || ''}\n${err.stack || ''}`
      : `${err}`,
  ]::trueJoin('\n\n').trim().split(extensionRoot).join('');
  const height = fontSize * (calcRows(text) + 1) + 'px';
  const parent = document.body || document.documentElement;
  el.id = id;
  el.readOnly = true;
  // using an inline style because we don't know if our CSS is loaded at this stage
  el.style.cssText = `\
    position:fixed;
    z-index:${1e9};
    left:0;
    right:0;
    bottom:0;
    background:#000;
    color:red;
    padding: ${fontSize / 2}px;
    font-size: ${fontSize}px;
    line-height: 1;
    box-sizing: border-box;
    height: ${height};
    border: none;
    resize: none;
  `.replace(/;/g, '!important;');
  el.spellcheck = false;
  el.onclick = () => el.select();
  parent.style.minHeight = height;
  parent.appendChild(el);
}
Showing unexpected errors in UI so that the users can notify us