2

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.

Original question:

When I include my custom component (.cmp) inside of a standalone lightning app page (.app), I get a generic error:

enter image description here

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:

  1. Enabled debug mode so that I get un-minified js code.

  2. Disabled caching

  3. 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? enter image description here

  • 1
    can you post your code? – glls Dec 18 '17 at 23:58
  • @glls I updated the question with code. The error occurs when I include the <c:BoatSearchForm /> component. Also, although it would be good to find the answer to this specific issue, my question is broader. That is, given such a generic error message, how would one get more details about what's causing the issue? – dev.e.loper Dec 19 '17 at 0:07
  • it comes down to the same as How do I debug my lightning component? – glls Dec 19 '17 at 0:18
  • @glls That question has a lot of good info and I've tried the suggested solutions. I've looked at Logs on the server side (Salesforce Dev console) as well as on the client side (Chrome console/lighting console) but I still do not see more information about the error. – dev.e.loper Dec 19 '17 at 0:43
  • maybe you are not looking in the right places or missed something. maybe you can explain how your qeustion is different and mention that in your post? and if i understand correctly, shouldnt you be debugging your component, since it is the one that causes the error? – glls Dec 19 '17 at 0:48
0

I suggest you to add a try{}catch{} in the controller of . System.Debug() error info may be helpful.

  • That is a good idea. However, currently, all of the code is in the UI. Neither component nor the app file is linked to a controller. – dev.e.loper Dec 19 '17 at 19:32

Not the answer you're looking for? Browse other questions tagged or ask your own question.