Better Liquid rendering errors

[t-kelly]

Liquid is notorious for failing silently and hard to debug why or where something is going wrong.

Thoughts about an liquid-error component that you can use throughout other components and will populate the page with hidden <liquid-error> elements that will then automatically console.error() a message?

Something like this

{% comment %}
  Liquid Error component

  Accepts:
  - error {string} - Error message to display (required)
  - file {string} - File name where the error occurred (optional)

  Usage:
  {% render 'liquid-error', error: 'Icon URL could not be constructed', file: 'icon.liquid' %}
{% endcomment %}

{%- liquid
  assign error = error | default: '' | strip
  assign file = file | default: '' | strip
-%}

<liquid-error 
    style="display: none;"
    message="{{ error }}"
    file="{{ file }}"
></liquid-error>

<script>
customElements.define('liquid-error', class BlockBuyButtons extends HTMLElement {
  connectedCallback() {
    const errorMessage = this.dataset.message;
    const errorFile = this.dataset.file;
    
    if (errorMessage) {
      const fullMessage = `Liquid Error: ${errorMessage} in ${errorFile}:${errorLine}`;
      console.error(fullMessage);
      document.dispatchEvent(new CustomEvent('liquid:error', {
        detail: { message: fullMessage }
      }));
    }
  }
})
</script>

and then you could use it in a component like:

{% comment %}
  Icon component

  Accepts:
  - name {string} - Name of the icon (required)
  ...

  Usage:
  {% render 'icon', name: 'alert' %}
{% endcomment %}

{%- liquid
  assign name = name | default: '' | strip
  
  ...

  if name == ''
    render 'liquid-error', error: 'Icon name is required.', file: 'icon.liquid'
  endif

[chrisberthe]

Love this, but would also love to see snippets, and their params, become first-class citizens in Liquid. The alternative would be to keep this in pure Liquid and we can style the error message and output it to the browser but that sucks.

Some things to note about the code:

• Should be class LiquidError extends HTMLElement
• errorLine is undefined
• message and file aren't data attributes, so need to be updated to e.g. this.getAttribute('message')

Are you thinking the usefulness of creating a custom element is that:

1. Errors are all gathered into a single place: the console?
2. Dispatching an error event like this is that it becomes testable?

Outputting Liquid errors in the console feels weird, but it's also the next best thing from having absolutely no error logging.