Cannot read property of null - ERROR lightning component

Question

I created a lightning component which handles a record creation using a form. The component is on Account layout. The problem is that on some accounts, we get this error but it's not consistent. I mean on some accounts we don't get the error and the main issue is that when we get the error and then we refresh the page couple of times, the error disappears and doesn't show anymore on that specific account.

Did anyone face the problem and know what to do ?

Update: What I'm doing is - I check on which object the component is, then I update the force:recordData with the corrected account id and I reload the record. After that, I'm using its fields in another logic.

Component:

<!-- account record -->
<force:recordData aura:id="accountRecordData" layoutType="FULL"
              targetRecord="{!v.accountRecord}"
              recordId="{!v.accountRecordId}"
              targetFields="{!v.accountRecordFields}" />

<!-- current record -->
<force:recordData layoutType="FULL"
              targetRecord="{!v.currentRecord}"
              recordId="{!v.recordId}"
              targetFields="{!v.currentRecordFields}" 
              recordUpdated="{!c.initAccount}"/>

Controller:

initAccount : function(component, event, helper){

    var objectName = component.get("v.sObjectName");
    var currentRecordFields = component.get("v.currentRecordFields");

    if (objectName === "Account"){
        console.log("Account record");
        component.set("v.accountRecordId", component.get("v.recordId"));
    }
    else if (objectName === "Opportunity"){
        console.log("Opportunity record");
        component.set("v.accountRecordId", currentRecordFields.AccountId);
    }
    else if (objectName === "Hand_Over__c"){
        console.log("handover record");
        component.set("v.accountRecordId", currentRecordFields.Account_Name__c);
    }

    component.find("accountRecordData").reloadRecord();
    cosole.log("");
    helper.prePopulateFields(component);
    helper.showInfoMessage(component);
}

Helper:

showInfoMessage : function(component){
    var accountRecordFields = component.get("v.accountRecordFields");
    console.log("101 accountRecordFields: " + JSON.stringify(accountRecordFields));

    if (accountRecordFields.Account_Should_Be_Stopped__c === 0 || accountRecordFields.Credit_Max_Invoice_Date__c){
        component.set("v.isValidationError",true);
        component.set("v.messageType","info");
        component.set("v.message", $A.get("$Label.c.Account_should_be_stopped_message"));
    }
}

Answer 1

Lightning Data Services are being run asynchronously.

When compiler executes helper.showInfoMessage(component); your component still has no response from previously called component.find("accountRecordData").reloadRecord();.

The data won't be there yet. Try to add recordUpdated attribute on "account record" and from there call helper.showInfoMessage(component);.

---

Like @David Reed mentioned, due to the cache the accountRecordData will have data when you reload the page.

If you are more interested how Lightning Cache works I would recommend the great talk of Christophe Coenraets on YouTube (He is talking about Lightning Data Service Cache first 20 minutes).