# Portal and ErrorBoundary

Source: https://signy.dev/documentation/1/templates/portal-and-error-boundary/

Render elsewhere, and recover from errors.

## Portal

`Portal` moves its children into another element, `document.body` by default. It is useful for dialogs and toasts that must escape an `overflow` or a stacking context. The content is removed when its owner is disposed.

```js
html`
  ${Portal({
    children: html`<div class="toast" role="status">Saved</div>`,
  })}
`
```

Pass `mount` to pick the target element.

## ErrorBoundary

`ErrorBoundary` catches errors thrown while its children render and shows the fallback. The fallback receives the error and a `reset` function that tries again. Errors in event handlers are not caught.

```js
const { Component, Signal, application, html, ErrorBoundary } = Signy;

let attempts = 0;

class Flaky extends Component {
  render() {
    attempts++;
    if (attempts === 1) throw new Error("The first render failed");
    return html`<p>Rendered on attempt ${attempts}</p>`;
  }
}

class App extends Component {
  render() {
    return html`
      ${ErrorBoundary({
        fallback: (error, reset) => html`
          <p class="alert danger">${error.message}</p>
          <button onClick=${reset}>Try again</button>
        `,
        children: () => html`<${Flaky} />`,
      })}
    `;
  }
}

application(App).mount("#error-boundary-example");
```