Skip to content
RevoGrid [Pro]

Loading Errors and Retry

A read error means Kanban could not fetch cards. A save error means your application could not confirm a write. The recovery action depends on which operation failed.

Interactive example · supplied HTTP demo backend

Recover from a failed read

The demo backend can fail one HTTP read and then accept a retry.

Try it: Choose Fail next read, then Retry. Repeat to confirm recovery works each time.

Starting demo backend…

HTTP reads: 0 · writes: 0

What to notice: The error is visible, retries use the normal loader, and the backend data remains intact.

TypeScript source

The supplied backend handlers use MSW simulation in the browser. Replace the transport with your application endpoint.

remote-board.ts
import type { KanbanConfig, KanbanCardMoveDetail } from '@revolist/kanban';
import type { WorkCard } from './first-board';
import { boardConfig, configureBoard } from './first-board';


// apiUrl is YOUR endpoint. The documentation supplies an isolated HTTP demo backend.
export function remoteBoard(apiUrl: string): KanbanConfig<WorkCard> {
  return { ...boardConfig, remote: {
    chunkSize: 6,
    query: { retry: false, refetchOnWindowFocus: false },
    async loadData(skip, limit, _order, _single, _multi, _quick, _temporal, _ast, _execution, context) {
      const response = await fetch(`${apiUrl}/cards?skip=${skip}&limit=${limit}`, { signal: context?.signal });
      if (!response.ok) throw new Error(`Card loading failed: HTTP ${response.status}`);
      return response.json(); // { data: Card[], total: number }
    },
  } };
}




// Read-only setup; add app-owned write handling before enabling moves.
export async function createServerBoard(container: HTMLElement, apiUrl: string) {
  const grid = document.createElement('revo-grid');
  grid.style.cssText = 'display:block;width:100%;height:360px';
  container.append(grid);
  try {
    // configureBoard waits for grid initialization before activating the remote loader.
    const kanban = await configureBoard(grid, { ...remoteBoard(apiUrl), readOnly: true }, []);
    return { grid, kanban, destroy() { grid.remove(); } };
  } catch (error) { grid.remove(); throw error; }
}


export async function saveMove(apiUrl: string, detail: KanbanCardMoveDetail, signal?: AbortSignal) {
  const response = await fetch(`${apiUrl}/moves`, {
    method: 'POST', signal, headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ changedCards: detail.changedCards }),
  });
  if (!response.ok) throw new Error(`Move save could not be confirmed: HTTP ${response.status}`);
  return response.json();
}
// grid.kanban = remoteBoard(apiUrl);
// grid.addEventListener('kanbancardmove', event => { void saveMove(apiUrl, event.detail); });
// In your app, pause conflicting moves while saving; on failure refresh before more edits.
// Pagination, refresh and Query policy belong to remote. There is no remote.commit method.
Download remote-board.ts

Try it: choose Fail next read, read the error, then Retry to recover. This example’s Retry control restarts from page zero. The demonstration disables automatic read retries so the failure is visible.

Retry a read

Section titled “Retry a read”

Failed pages remain retryable and ordinary page failures preserve already loaded cards. Use the built-in retry action to repeat the failed page while preserving other loaded positions. From an application control, refreshRemote() restarts at page zero and clears history; indexed mode rebuilds its placeholders. loadMoreCards() requests the next page and is not a generic retry for an arbitrary failed indexed slot.

const state = kanban.getRemoteState();
if (state.error) {
  await kanban.refreshRemote();
}

Obtain kanban using Get the plugin. Show application feedback through the remote loading events.

Configure read retries

Section titled “Configure read retries”

Set remote.query.retry for automatic retries of failed reads. The fixture uses false; a production app may choose a bounded retry policy. Forward the loader’s abort signal and release application-owned contexts when the view unmounts.

Do not blindly replay a save

Section titled “Do not blindly replay a save”

A timeout does not establish that the server rejected the move. Your app should show pending/uncertain state, prevent conflicting follow-up edits and reconcile with the server. The optional managed adapter has its own explicit retry/conflict workflow for complete datasets. Browser read caching does not provide write idempotency.

Next steps

Section titled “Next steps”

See loading, saving and cache policy. See the Kanban API for exact types.