Error

Preview Code

375 768 Full

Open

html

<aparte-chat-bubble message-id="u1" data-role="user" name="You" content="Summarise the release notes."></aparte-chat-bubble>
<aparte-chat-bubble message-id="a1" data-role="assistant" name="Assistant"></aparte-chat-bubble>

<script>
  // The failure sits in the turn that produced it, not in a toast elsewhere on the page.
  document.querySelectorAll('aparte-chat-bubble')[1].setSegments([{
    id: 's1',
    type: 'error',
    content: 'The model did not answer.',
    details: 'HTTP 429: rate limited. Try again in 20 seconds.',
  }]);
</script>

When a turn fails (the provider rejects the request, the network drops, a limit is reached), the failure is an error segment in the reply that failed, not a toast somewhere else on the page. The reader sees which question went unanswered.

With AparteClient, you write nothing: a failed turn gets this card, its message from the error, its detail from the error’s code, and the full error still reaches your code on the aparte-message-error event.

Variants

A reply cut off midway

Preview Code

375 768 Full

Open

html

<aparte-chat-bubble message-id="a1" data-role="assistant" name="Assistant"></aparte-chat-bubble>

<script>
  // What arrived stays; the error follows it, with the technical detail under its message.
  document.querySelector('aparte-chat-bubble').setSegments([
    { id: 's1', type: 'text', content: 'Here is the summary of the first two sections. The release fixes' },
    {
      id: 's2',
      type: 'error',
      content: 'The connection closed before the reply ended.',
      details: 'net::ERR_CONNECTION_RESET',
    },
  ]);
</script>

The card is added after what had already streamed; the partial reply stays.

Customize

aparteGlobalConfig.setErrorRenderer() replaces the card. It receives the message and the detail and returns an element or an HTML string, for a product that adds a “Try again” button or a link to its status page:

ts

import { aparteGlobalConfig } from '@aparte/core';

aparteGlobalConfig.setErrorRenderer(({ message }) => {
  const card = document.createElement('div');
  card.className = 'aparte-alert aparte-alert--danger';
  card.textContent = `${message} — see status.example.com`;
  return card;
});

The built-in card wears the kit’s Alert recipe, so its colours are the alert’s.

Fields

AparteErrorSegment, discriminated by type: 'error'.

Field	Type	Required	Description
content	string	yes
details	string	—
stack	string	—

Accessibility

• The card’s heading comes from the error locale key and is translated with the rest of the chat; the message is shown as it arrived, since it is the model’s or the server’s text.
• The failure is written, not only coloured: a reader who cannot see red still reads “Error”.

Related

• Message — the reply the card belongs to.
• Message actions — retry, once your app turns it on.