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 lightingLightning component. It would be nice to see some kind of error indicating a required attribute is missing instead of a generic error message.
Original question:
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.
Disabled caching
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...
Code
<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>
Takeaways:
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?
