[DX] Show component name in multiple elements error

[kachnitel]

Q	A
Bug fix?	no
New feature?	no
Issues	N/A
License	MIT

If a page contains multiple components and one of them renders multiple elements, identifying the Component helps troubleshooting.

• Should we output the element ID as well?

[smnandre]

I'm wondering if this should not be down "upper", catching any error, adding context and rethrowing ?

[kachnitel]

I'm wondering if this should not be down "upper", catching any error, adding context and rethrowing ?

Sounds like a better approach, I was wondering how to get more details in a cleaner way. I'll see if I can do better!

[weaverryan]

We could add an optional 2nd arg to htmlToElement where you can provide more context for the error.

[kachnitel]

I see that it's called at index.ts::processRenderer and tools.ts::startStimulus. Unless I'm missing something (good chance, I'm clueless in front end so this library is a gamechanger!), we don't really have any identifier details about the element so I'm not sure where would the context come from higher up in the call stack.
So it sort of makes sense to me to look it up here once the element has been created, but I don't yet fully grasp the initialization. I see it's called from Application.start in stimulus so that seems too far unless it's all wrapped in some loader that has the context?

[smnandre]

@kachnitel

I think this method is only called from processRender, in this code.

let newElement: HTMLElement;
try {
    newElement = htmlToElement(html);

    if (!newElement.matches('[data-controller~=live]')) {
        throw new Error('A live component template must contain a single root controller element.');
    }
} catch (error) {
    console.error('There was a problem with the component HTML returned:');

    throw error;
}

So here you can, before re-throwing the error, add some details. I believe at this instant, you can access this.name (name of the component) and this.element (original DOM element)

[kachnitel]

It's taking me a while playing with this as I'm having a difficulty testing it in a project. I run the php link command and it creates links, then npm build in symfony-ux; yarn dev in the test project to rebuild but I still see the original code in the compiled live_controller.js in the browser.
Tried yarn install --force to see if it'll rebuild the "node_modules" using the symlinked script (the symlinked script in vendor has the expected changes), but I seem to get a change through once in a while and then no matter what I keep not seeing changes in my browser. It's not browser cache, unless disabling it is broken.
Am I missing some steps in using the dev version in my test env?

[smnandre]

In the root of the repo, you should run yarn run build and then yarn run test should use your code (i think)

[kbond]

Thank you @kachnitel.