<!--
title: surface failures early
domain: devtools
topic: Error Handling
language: JavaScript
source: mermaid-js/mermaid
updated: 2025-08-19
url: https://awesomereviewers.com/reviewers/mermaid-surface-failures-early/
-->

Make rendering/runtime failures observable instead of silently tolerated.

Apply two concrete rules:
1) **Cover failure-prone inputs in tests**: when your code parses special syntaxes (e.g., `@{ ... }` blocks), add variations that stress spacing/quoting/formatting so broken input is exercised.

2) **Don’t swallow async dependency errors**: if loading external assets/fonts fails, avoid `try/catch` that only logs. Either let the promise reject (so Cypress/test fails) or rethrow after adding context.

Example (preferred: errors surface and tests fail):
```js
async function contentLoaded() {
  await loadFontAwesomeCSS();
  await Promise.all(Array.from(document.fonts, (font) => font.load()));
}
```

Example (log *and* propagate):
```js
const contentLoaded = async () => {
  try {
    await loadFontAwesomeCSS();
    await Promise.all(Array.from(document.fonts, (font) => font.load()));
  } catch (err) {
    console.error('Error loading fonts', err);
    throw err;
  }
};
```

Outcome: developers get a clear stack/error when something breaks, and tests/CI catch edge-case syntax issues instead of only validating the happy path.