LWC wire returning Error as [Object Object]

Question

I am trying to get a data table with Account hierarchy using the Lightning tree grid lwc. I have a community page and when I open an account record, there is a parent Id field on each account. I am trying to get a list of all the accounts that have same parent account as current record. I want to display the fields Name, branch location and Branch type.

currently No data is being displayed and the wire method call is returning error only. Data is coming as undefined and error as [object Object]

I am new to LWC, what am i doing wrong ?

Controller

public with sharing class AccountHeirarchySelector {
    //Get all accounts that have the same parent Id as current record 
    @AuraEnabled(cacheable=true)
    public static List<Account> findHierarchyData(String recordId){
        String parentId= getParentId(recordId);
        List<Account> accList = new List<Account>();

        if (parentId!=null)
            accList = [select id, name, ParentId,Branch_Type__c,ShippingAddress from Account where ParentId=:parentId];    
    
         System.debug('-------accList------------'+accList);
        return accList;
    }

    //Get the Parent Id value for current Record
    public static String getParentId(String recordId ){
        List<Account> parentIdFromAcc= [select ParentId from Account where id=:recordId LIMIT 1];

        System.debug('-------parentIdFromAcc------------'+parentIdFromAcc);
        System.debug('-------parentIdFromAcc[0].ParentId------------'+parentIdFromAcc[0].ParentId);

        return parentIdFromAcc[0].ParentId;
    }
}

JS

import { LightningElement,wire,api,track } from 'lwc';
import findHierarchyData from '@salesforce/apex/AccountHeirarchySelector.findHierarchyData';
const COLS= [
    {label : 'Account Name 1', fieldName : 'Name'},
    {label : 'Branch Location 1', fieldName : 'ShippingAddress'},
    {label : 'Branch Type 1', fieldName : 'Branch_Type__c'}
]

export default class branchAccountTreeGridView extends LightningElement {
    @track accountsLoaded = false;
    @api recordId;
    @track gridData = [];
    gridColumns = COLS;

    @wire(findHierarchyData, { recordId: '$recordId'}) 
    wiredAccounts({ data, error }) {
        console.log('after method call')
        console.log('----------fetched rec id ? -------:'+this.recordId);
        console.log('----------data ? --------------------' +  data);
        console.log('----------error ? --------------------' + error);
       
        if (data) {
            this.accountsLoaded = true;
            // Process record data
            console.log('-------found data -------------'+this.recordId);
            console.log('dataaaaaaaaaaaaa' + data);
            var strData = JSON.parse( JSON.stringify( data ) );
            
            strData.map((row, index) => {
                if (row['Name']) {
                    row._children = row['Name']; //define rows with children 
                    delete row.Cases;
                    
                }     
            });
            this.myData = strData;
        }
        
        else if(error){
            console.log('Stringified error ---- ' + JSON.parse(JSON.stringify(error)));
        }
    }
}

meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="accountHeirarchy">
    <apiVersion>55.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
         <target>lightningCommunity__Page</target>
        <target>lightningCommunity__Default</target>
        <target>lightning__RecordAction</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordPage">
            <objects>
                <object>Account</object>
            </objects>
        </targetConfig>
        <targetConfig targets="lightningCommunity__Default">
            <property
                name="recordId"
                type="String"
                label="Record Id"
                description="Pass the page's record id to the component variable" 
                />
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>`

HTML template

<template>
    <template if:true={accountsLoaded}>
        <lightning-tree-grid 
            columns={gridColumns}
            data={gridData}
            key-field="Id">
        </lightning-tree-grid>
    </template>
</template>

The result in console

branchAccountTreeGridView.js:1 ----------fetched rec id ? -------:0010w000010FnfWAAS
branchAccountTreeGridView.js:1 ----------data ? --------------------undefined
branchAccountTreeGridView.js:1 ----------error ? --------------------[object Object]
branchAccountTreeGridView.js:1 Stringified error ---- [object Object]

Answer 1

to see result instead of [object, object] use JSON.stringify();

Answer 2

So to see your error in the console, just remove JSON.parse, this transform the string version back to an object which before printing it in string is obviously wrong. Alternate solution would be to keep it but use a , instead of a +. And final and best, look at the network tab in devtool to directly get the information from the network call. This will prevent you from writing code that you will delete.

Concerning the real issue which is the wire method returning an error. Probably, the query in getParentId is returning 0 records which is why parentIdFromAcc[0].ParentId is then throwing a null pointer exception. This depends on your setup and from where comes from that account id. Sharing more detail would help. But probably when you will get the error message, you'll find out by your own what to fix.