Design System do Laboratório

Tema

Erro ​

Quando algo dá errado, a tela diz o que aconteceu e o que a pessoa pode fazer, perto de onde o problema está. O erro aparece em três lugares, conforme o tamanho do problema.

Quando usar ​

OndeQuandoComponente
No campoUm valor do formulário está errado ou faltando.BaseField com invalid e invalid-text
No formulário ou na áreaO envio falhou, ou a API recusou o que foi enviado.BaseAlertBanner com tone="error" e live
Na tela inteiraA tela não conseguiu carregar o que precisa para existir.BasePageState com status="error"
Aviso passageiroUma ação em segundo plano falhou e a tela continua útil.useToast().show() com tone: 'error'

Componentes ​

  • BasePageState com status="error": título e texto padrão, o código para a STI (code) e o botão "Tentar de novo", que emite retry.
  • BaseAlertBanner com tone="error" e live: o leitor de tela anuncia na hora. Com action-label, oferece "Tentar de novo".
  • BaseField com invalid e invalid-text: a mensagem fica embaixo do campo e é ligada a ele.
  • BaseToast e useToast(): avisos que somem sozinhos, com uma ação opcional.

Texto ​

  • O que aconteceu, em palavras comuns: "Não conseguimos carregar as obras."
  • O que fazer: "Confira a conexão e tente de novo." O botão diz "Tentar de novo".
  • No campo, como acertar: "Informe a data da OS", e não "Campo inválido".
  • Nunca mostre a mensagem técnica da API, o status HTTP ou texto em inglês. O código vai no code, para a pessoa passar à STI.

Mais exemplos em Como escrever as mensagens.

Faça e não faça ​

FaçaNão faça
Mostrar o erro do campo embaixo do campo e o erro do envio no topo do formulário.Juntar todos os erros num aviso que some em 6 segundos.
Oferecer "Tentar de novo" quando tentar de novo pode resolver.Pedir para a pessoa recarregar a página.
Guardar o que a pessoa digitou quando o envio falha.Limpar o formulário depois de um erro da API.

Código ​

vue
<script setup lang="ts">
import { ref } from 'vue'
import { BaseAlertBanner, BaseButton, BaseField, BaseInput, useToast } from '@lab-inovacao-tjes/design-system'

const { show } = useToast()
const number = ref('')
const tried = ref(false)
const problem = ref('')
const saving = ref(false)

async function save(): Promise<void> {
  tried.value = true
  if (!number.value.trim()) return
  saving.value = true
  problem.value = ''
  try {
    await startOrderService.create({ number: number.value })
    show({ title: 'Ordem de serviço salva', tone: 'success' })
  } catch {
    problem.value = 'Não conseguimos salvar a ordem de serviço. Confira a conexão e tente de novo.'
  } finally {
    saving.value = false
  }
}
</script>

<template>
  <form novalidate @submit.prevent="save">
    <BaseAlertBanner v-if="problem" tone="error" live action-label="Tentar de novo" @action="save">
      {{ problem }}
    </BaseAlertBanner>
    <BaseField label="Número da OS" required :invalid="tried && !number.trim()" invalid-text="Informe o número da OS.">
      <BaseInput v-model="number" />
    </BaseField>
    <BaseButton type="submit" :loading="saving">Salvar ordem de serviço</BaseButton>
  </form>
</template>

Para a tela inteira, envolva o conteúdo com <BasePageState :status="status" code="OBR-LIST-01" @retry="load"> e troque status para 'error' quando a carga falhar.

Na tela de referência ​