How to Debug UI Component only showing spinner

Question

I am currently developing a customer AdminHtml page with a form, and after fixing some other errors (which showed error messages) it shows only the spinner when loading the page.

How can this be debugged further? How can I see a proper error message?

Browser Console and Logs are showing nothing of value.

I already found

UIComponent Form - Spinner showing

Magento 2: Spinner kept running and not showing data after creating custom admin grid

but I want to know how to debug this instead of posting my code on StackExchange and let somebody else debug this.

Is there any way to get a proper error message?

Answer 1

One approach is to dig into component initialization (via https://twitter.com/vova_yatsyuk/status/1250807165914357762)

There actually is logging with console-logger in place, but it is disabled by default.

If you open your JavaScript console and type:

require(['Magento_Ui/js/lib/logger/console-logger', 
   'Magento_Ui/js/lib/logger/levels-pool'], 
           function(logger, levels) { 
                logger.setDisplayLevel(2) // 2 = WARN 5 = ALL, see levels-pool.js
           }
);

the logging is enabled (stored in local storage). You can reload your page and will get log output from the component loading.

There should be warnings about components which were requested but not loaded.

Also be aware, that the spinner seems to be replaced with the columns entry when doing listings, so another reason the spinner stays, can be a missing entry like that

    <item name="spinner" xsi:type="string">my_listing_columns</item>