Palette Components schedule async tasks for rendering and updates. This is great for performance, but means that you can't just try/catch around a component constructor and have it catch errors thrown during rendering.

Instead, Components can choose to specify an onError handler function which is invoked whenever an error occurs during any part of the lifecycle.

With an Error Handler

If you have defined an onError handler in your component, that function will receive any errors thrown during rendering or user-defined lifecycle methods.

This is typically called an "Error boundary," and is a great way to catch errors from deeply nested components and stop them from crashing the entire app.

The onError handler will receive errors thrown from within the immediate Component, as well as any unhandled errors thrown by Palette components in this component's child tree.

define("erroring-component", {
  template: html`<p>Boy, I sure hope I function properly</p>`,

  onError(error) {
    console.error("Oh no! An error!");
    console.error(error);
    this.root.innerHTML = "Oh no";
  }

  setup() {
    console.log("Don't mind me, just... whoops!");
    throw new Error("Aw, dang.");
  }
});
Copy

Without an Error Handler

If you have not defined an onError handler, the component will first try scanning through parent elements to find a Component that does have an error handler. If it finds one, it will escalate the error to that handler. Otherwise, it will throw the error globally, which is considered a catastrophic app crash.