function displayErrorScreen(opts = {}) {
  const options = {
    errContainerId: '',
    icon: {
      path: '',
      style: '',
    },
    title: 'Error',
    details: 'No error description was provided.',
    subdetails: '',
    customStyle: '',
  };

  Object.assign(options, opts);

  const iconObj = {
    path: '../res/warning.svg',
    style: '',
  };

  Object.assign(iconObj, opts.icon);
  options.icon = iconObj;

  mainArea.innerHTML = `
    <div id="${options.errContainerId}" class="error-area fade-in-from-bottom" style="${options.customStyle}">
      <img class="err-icon" style="${options.icon.style}" src="${options.icon.path}">

      <div class="err-title">
        ${options.title}
      </div>

      <div class="err-details">
        ${options.details}

        <div class="err-subdetails">
          ${options.subdetails}
        </div>
      </div>
    </div>
  `;
}
Displays Error Screen.

@param {Object} opts
Options to be passed to define and customize the error screen

@param {string=} opts.errContainerId
Set the `id` of error container

@param {Object} opts.icon
The icon object

@param {string=} opts.icon.path
The Path to the icon to be used as Error Icon

@param {string=} opts.icon.style
Additional styles applied to the icon

@param {string=} opts.title
The Title of the error

@param {string=} opts.details
Description of the error

@param {string=} opts.subdetails
Sub-details/Short description of the error

@param {string=} opts.customStyle
Any custom styles that you want to apply