Why this is not a duplicate: This question is different than How do I debug my lightning component? My issue was caused by a missing attribute on a Lightning component. It would be nice to see some kind of error indicating a required attribute is missing instead of a generic error message.
When I include my custom component (.cmp) inside of a standalone lightning app page (.app), I get a generic error:
This page has an error. You might just need to refresh it.
Aura.loadComponent(): Failed to initialize application.
An internal server error has occurred
Error ID: 1165864723-88707 (1861465479)
To find out more details about what is causing the issue, I have:
Enabled debug mode so that I get un-minified js code.
Installed Lightning Inspector for Chrome
When I load the page, I do not see errors in the Google Dev Tools console or Lightning console. I'm lost as far as how to find out details about the error...
<aura:application extends="force:slds" > <!-- Header --> <lightning:layout class="slds-page-header" > <lightning:layoutItem padding="horizontal-small"> <lightning:icon iconName="custom:custom54" /> </lightning:layoutItem> <h1> Friends with Boats </h1> </lightning:layout> <lightning:layout> <c:BoatSearchForm /> <!-- the error happens when I include this component--> </lightning:layout> </aura:application>
How I debugged the issue
To find out the cause, I commented out the contents of the entire component and uncommented different sections until I ran into the problem. The error happened when I tried to add a lightning:select component to the page. The problem - a missing required attribute 'label'.
<lightning:select> <!-- missing attributes: 'name' and 'label' caused the error --> <option value="">All types</option> </lightning:select>
If a lightning component requires certain attribute and it is missing, you will get a runtime error on a standalone .app page.
A lightning markup code can be saved even though it might be missing required attributes that cause runtime errors.
Currently, Salesforce does not show a detailed error for invalid lightning markup. You only see a generic error.
Adding a component to an App page through App Builder does not generate this error. Instead, when you open an app page in a tab, it generates a 'WARNING' in the Google Chrome Development Console. Is this a bug or by design?