<script>
  import { highlightCode } from 'mochi-framework/highlight';

  const handleErrorSnippet = `const handleError: HandleError = ({ error, event, status, message }) => {
  console.log(
    \`[handleError] \${event.url.pathname} → \${status} "\${message}" (error \${error ? 'present' : 'null'})\`,
  );
  // error is null for unmatched routes / unknown form actions — guard before forwarding
  if (error && status >= 500) {
    console.error('[app]', event.url.pathname, error);
  }
  // Short-circuit: redirect this specific demo path instead of rendering the error page
  if (event.url.pathname === '/demos/error/redirect') {
    return Response.redirect(new URL('/demos/error', event.url), 302);
  }
};`;
  const handleErrorHtml = highlightCode(handleErrorSnippet, 'ts');
</script>

<div class="prose">
  <p>
    Mochi catches any throw from a page's <code>serverProps</code> resolver or Svelte
    <code>&lt;script&gt;</code>, along with any request that doesn't match a route, and renders the built-in default error page. Pass your own <code>errorPage</code> to
    <code>Mochi.serve()</code> to replace it. The
    <code>handleError</code> hook runs for every such error — use it to log, forward to an error tracker, sanitize the message, or return a <code>Response</code> to short-circuit rendering
    entirely.
  </p>

  <p class="lead">Try it:</p>

  <ul class="examples">
    <li>
      <a href="/demos/error/500"><code>/demos/error/500</code></a>
      <span>the page's <code>&lt;script&gt;</code> throws during SSR</span>
    </li>
    <li>
      <a href="/demos/error/404"><code>/demos/error/404</code></a>
      <span>the <code>serverProps</code> resolver calls <code>error(404, ...)</code></span>
    </li>
    <li>
      <a href="/does-not-exist"><code>/does-not-exist</code></a>
      <span>no route matches — <code>handleError</code> fires with <code>error: null</code>, then the error page renders with status 404</span>
    </li>
    <li>
      <a href="/demos/error/redirect"><code>/demos/error/redirect</code></a>
      <span>
        the page throws, but <code>handleError</code> returns <code>Response.redirect(...)</code> — you land back on this page instead of seeing the error component
      </span>
    </li>
  </ul>

  <p>
    A custom error component receives a single <code>error</code> prop with <code>status</code>,
    <code>message</code>, and (in development only) <code>stack</code> — typed as
    <code>MochiErrorProps</code>.
  </p>

  <p class="lead">This site's <code>handleError</code>:</p>

  <!-- eslint-disable-next-line svelte/no-at-html-tags -->
  {@html handleErrorHtml}

  <p>
    Tail your dev server's output while clicking the links above — you'll see one
    <code>[handleError]</code> line per visit. Unmatched routes log <code>error null</code>; SSR throws log <code>error present</code>.
  </p>
</div>