Skip to main content

Handling load errors

A user pastes a link that 404s, uploads a .zip instead of a .gp, or types alphaTex with a stray backslash โ€” you want to surface a user-friendly error banner rather than let the render silently fail. The error event is alphaTab's single funnel for every failure: bad URLs, unreadable file formats, malformed content, rendering exceptions. Subscribe once, branch on the error type, and show the reader something useful.

Trigger a button โ€” the error event populates this strip.

The error typesโ€‹

alphaTab surfaces four error classes, all extending the base AlphaTabError:

  • FileLoadError โ€” the network fetch behind api.load(url) failed. Carries the XMLHttpRequest on error.xhr, so you can read the HTTP status. Wrong URL, offline, CORS denied โ€” all land here. Web-only.
  • UnsupportedFormatError โ€” the fetched bytes did not match any importer alphaTab knows. Wrong file type, or a corrupted header that no sniffer recognised.
  • FormatError โ€” the format was recognised but the content is malformed. Truncated GP archive, invalid MusicXML, malformed alphaTex.
  • AlphaTabError โ€” everything else, including render-side failures and API misuse (for example, calling renderTracks() with tracks from different scores).

Every emitted value has a type field with an AlphaTabErrorType enum (General, Format, AlphaTex) โ€” handy when you cannot rely on instanceof (workers, cross-realm bundles).

The event fires for any error alphaTab raises, not only loading errors. Rendering exceptions, worker crashes, and playback synth failures all come through the same channel. Filter by type or class inside the handler if you want to show different UI per source.

Show it in codeโ€‹

Subscribe to the error event and branch on the concrete class:

import * as alphaTab from '@coderline/alphatab';

const container = getAlphaTabContainer();
const api = new alphaTab.AlphaTabApi(container, {
core: { file: '/scores/song.gp' },
});

api.error.on((error) => {
if (error instanceof alphaTab.importer.UnsupportedFormatError) {
showBanner('That file type is not supported.');
} else if (error instanceof alphaTab.FormatError) {
showBanner('The file is corrupted or malformed.');
} else if (error instanceof alphaTab.FileLoadError) {
showBanner(`Could not fetch the score (HTTP ${error.xhr.status}).`);
} else {
showBanner(`alphaTab error: ${error.message}`);
}
});

getAlphaTabContainer() is a placeholder for the platform-specific step of obtaining the render target โ€” a <div> on Web, an AlphaTab control on .NET, or an AlphaTabView on Android. Every other line runs unchanged on all three runtimes.

Where to look nextโ€‹