function ErrorDisplay({ children, description = '', error }) {
  const message = formatErrorMessage(error, /* prefix */ description);

  return (
    <Scrollbox classes="LMS-Scrollbox">
      <div className="hyp-u-vertical-spacing hyp-u-padding--top--4">
        {message && <p data-testid="error-message">{toSentence(message)}</p>}

        {children}
        <p data-testid="error-links">
          If the problem persists, you can{' '}
          <Link href={supportURL(message, error)} target="_blank">
            open a support ticket
          </Link>{' '}
          or visit our{' '}
          <Link href="https://web.hypothes.is/help/" target="_blank">
            help documents
          </Link>
          .
        </p>
        <ErrorDetails error={error} />
      </div>
    </Scrollbox>
  );
}
/**
 * Displays human-facing details of an error
 *
 * @param {ErrorDisplayProps} props
 */
Displays human-facing details of an error
@param {ErrorDisplayProps} props
Displays human - facing details of an error @param { ErrorDisplayProps } props
function ErrorDisplay({ children, description = '', error }) {
  const message = formatErrorMessage(error,  description);
  return (
    <Scrollbox classes="LMS-Scrollbox">
      <div className="hyp-u-vertical-spacing hyp-u-padding--top--4">
        {message && <p data-testid="error-message">{toSentence(message)}</p>}
        {children}
        <p data-testid="error-links">
          If the problem persists, you can{' '}
          <Link href={supportURL(message, error)} target="_blank">
            open a support ticket
          </Link>{' '}
          or visit our{' '}
          <Link href="https://web.hypothes.is/help/" target="_blank">
            help documents
          </Link>
          .
        </p>
        <ErrorDetails error={error} />
      </div>
    </Scrollbox>
  );
}
function ErrorDisplay ( { children , description = '' , error } ) { const message = formatErrorMessage ( error , description ) ; return ( < Scrollbox classes = "LMS-Scrollbox" > < div className = "hyp-u-vertical-spacing hyp-u-padding--top--4" > { message && < p data-testid = "error-message" > { toSentence ( message ) } < / p > } { children } < p data-testid = "error-links" > 
          If the problem persists, you can { ' ' } < Link href = { supportURL ( message , error ) } target = "_blank" > 
            open a support ticket
           < / Link > { ' ' } 
          or visit our { ' ' } < Link href = "https://web.hypothes.is/help/" target = "_blank" > 
            help documents
           < / Link > 
          .
         < / p > < ErrorDetails error = { error } / > < / div > < / Scrollbox > ) ; }
Displays human-facing details of an error
 @param {ErrorDisplayProps} props
Displays human - facing details of an error @param { ErrorDisplayProps } props
/* prefix */