'@firebase/database: FIREBASE WARNING: Exception was thrown by user callback. TypeError: Cannot read properties of undefined (reading 'AccountStatus')
Few minutes ago, my application was running ok. Suddenly, variables start to get undefined and I get error messages. I had tried to build this app using laravel but kept having issues. Now I am working with Vue.js. These are my codes below:
service.js
import firebase from "../firebase";
// var whereis = "Deliverers.Profile";
const db = firebase.ref("/Deliverers");
class Service {
getAll() {
return db;
}
// create(tutorial) {
// return db.push(tutorial);
// }
update(key, value) {
return db.child(key).update(value);
}
// delete(key) {
// return db.child(key).remove();
// }
// deleteAll() {
// return db.remove();
// }
}
export default new Service();
user.vue
<template>
<div v-if="currentTutorial" class="edit-form">
<h4>Tutorial</h4>
<form>
<div class="form-group">
<label for="title">Title</label>
<input
type="text"
class="form-control"
id="title"
v-model="currentTutorial.user['FullName']"
/>
</div>
<div class="form-group">
<label for="description">Description</label>
<input
type="text"
class="form-control"
id="description"
v-model="currentTutorial.user['description']"
/>
</div>
<div class="form-group">
<label><strong>Status:</strong></label>
<!-- {{ currentTutorial.status ? "Published" : "Pending" }} -->
{{ currentTutorial.status }}
</div>
</form>
<button
class="badge badge-primary mr-2"
v-if="currentTutorial.published"
@click="updatePublished(false)"
>
UnPublish
</button>
<button
v-else
class="badge badge-primary mr-2"
@click="updatePublished(true)"
>
Publish
</button>
<button class="badge badge-danger mr-2" @click="deleteTutorial">
Delete
</button>
<button type="submit" class="badge badge-success" @click="updateTutorial">
Update
</button>
<p>{{ message }}</p>
</div>
<div v-else>
<br />
<p>Please click on a Tutorial...</p>
</div>
</template>
<script>
import Service from "../services/service";
export default {
name: "tutorial",
props: ["tutorial"],
data() {
return {
currentTutorial: null,
message: "",
};
},
watch: {
tutorial: function(tutorial) {
this.currentTutorial = { ...tutorial };
this.message = "";
},
},
methods: {
updatePublished(status) {
Service.update(this.currentTutorial.key, {
published: status,
})
.then(() => {
this.currentTutorial.published = status;
this.message = "The status was updated successfully!";
})
.catch((e) => {
console.log(e);
});
},
updateTutorial() {
const data = {
title: this.currentTutorial.title,
// description: this.currentTutorial.description,
};
Service.update(this.currentTutorial.key, data)
.then(() => {
this.message = "The tutorial was updated successfully!";
})
.catch((e) => {
console.log(e);
});
},
deleteTutorial() {
Service.delete(this.currentTutorial.key)
.then(() => {
this.$emit("refreshList");
})
.catch((e) => {
console.log(e);
});
},
},
mounted() {
this.message = "";
this.currentTutorial = { ...this.tutorial }
},
};
</script>
userlist.vue EDITED: To replace the faulty function with a working version.
<template>
<div class="list row">
<div class="col-md-6">
<h4>Tutorials List</h4>
<ul class="list-group">
<li
class="list-group-item"
:class="{ active: index == currentIndex }"
v-for="(tutorial, index) in tutorials"
:key="index"
@click="setActiveTutorial(tutorial, index)"
>
{{ tutorial.user.Email}}
</li>
</ul>
<button class="m-3 btn btn-sm btn-danger" @click="removeAllTutorials">
Remove All
</button>
</div>
<div class="col-md-6">
<div v-if="currentTutorial">
<tutorial-details
:tutorial="currentTutorial"
@refreshList="refreshList"
/>
</div>
<div v-else>
<br />
<p>Please click on a Tutorial...</p>
</div>
</div>
</div>
</template>
<script>
import Service from "../services/service";
import TutorialDetails from "./user";
export default {
name: "tutorials-list",
components: { TutorialDetails },
data() {
return {
tutorials: [],
currentTutorial: null,
currentIndex: -1
};
},
methods: {
// onDataChange() {
// snapshot => {
// let data = snapshot.val();
// let _tutorials = [];
// Object.keys(data).forEach(key => {
// _tutorials.push({
// key: key,
// username: data[key].profile.fullname,
// // text: data[key].text}
// });
// });
// this.tutorials = _tutorials;
// };
// },
//THIS METHOD WORKED!!
onDataChange(snapshot) {
let data = snapshot.val();
let _tutorials = [];
Object.keys(data).forEach(key => {
_tutorials.push({
key: key,
user: data[key].Profile,
});
});
this.tutorials = _tutorials;
},
refreshList() {
this.currentTutorial = null;
this.currentIndex = -1;
},
setActiveTutorial(tutorial, index) {
this.currentTutorial = tutorial;
this.currentIndex = index;
},
removeAllTutorials() {
Service.deleteAll()
.then(() => {
this.refreshList();
})
.catch((e) => {
console.log(e);
});
},
},
mounted() {
Service.getAll().on("value", this.onDataChange);
// Service.getAll().on("value", function(snapshot){
// var data = snapshot.val();
// for(let i in data){
// console.log(data[i].Profile.Email);
// }
// });
},
beforeDestroy() {
Service.getAll().off("value", this.onDataChange);
}
};
</script>
Console.log(data) gives this result - which is what I expect it to do:
{AccountStatus: 'Verified', Address: 'Abakaliki', BirthYear: '1999', DeliveryOn: false, Email: '[email protected]', …}
userslist.vue?8b1e:73
{AccountStatus: 'Unverified', Address: 'Amaeke Ekoli Edda Afikpo South LGA Ebonyi state', BirthYear: '1985', Date: 1640599050717, DeliveryOn: false, …}
userslist.vue?8b1e:73
{AccountStatus: 'Verified', Address: '7 glibert street kpirikpiri abakalik', BirthYear: '1973', Date: 1638213915413, DeliveryOn: false, …}
console.log(data.AccountStatus) gives the right results as shown below:
Verified
Unverified
Verified
console.log("items is:\n", JSON.stringify(items, null, 2)); gives the following output
items is:
{
"1UWuDwL2WvWndqgUBweoUjeEEZk1": {
"Bank details": {
"accountName": "Samuel Ankkk",
"accountNumber": "234567890",
"bank": "wensBANK"
},
"Location": {
"latitude": "9.0691414",
"longitude": "7.4a424",
"state": "Abuja"
},
"Profile": {
"AccountStatus": "Verified",
"Address": "Area B Opp Living Faith Church ",
"BirthYear": "1984",
"DeliveryOn": false,
"Email": "[email protected]",
"From": "Federal Capital Territory",
"Fullname": "Samuel jui",
"IdImage": "https://firebasestorage.googleapis.com/v0/b/lombaz-3490e.appspot.com/o/ID_Pictures%2FNational%20ID%2F1612350737409.jpg?alt=media&token=640b2544-a9af-4f86-b7d8-3d47f638f77f",
"Image": "https://firebasestorage.googleapis.com/v0/b/lombaz-3490e.appspot.com/o/Profile%20Pictures%2F1612350733949.jpg?alt=media&token=617d6b6b-50bd-4898-abdc-be53e70612bd",
"Phone_number": "08062093434",
"Route": "Jibowu",
"State": "Kogi State",
"To": "Lagos State",
"carrier": "Traveller || Individual",
"routed": "Federal Capital Territory - Jibowu"
}
},
"1WAVu8OUYzN7EudSc4vs55GUGYg1": {
"Profile": {
"AccountStatus": "Verified",
"Address": "ohuru amangwu obingwa ogbohill Aba Abia state nigeria",
"BirthYear": "1994",
"Date": 1631033704355,
"DeliveryOn": false,
"Email": "[email protected]",
"Fullname": "Sunday vh",
"IdImage": "https://firebasestorage.googleapis.com/v0/b/lombaz-3490e.appspot.com/o/ID_Pictures%2FOthers%2F1631033692952.jpg?alt=media&token=71967d4d-4a7f-4669-a7e1-9e2968970c2f",
"Image": "https://firebasestorage.googleapis.com/v0/b/lombaz-3490e.appspot.com/o/Profile%20Pictures%2F1631033678872.jpg?alt=media&token=71f2f23c-ffa7-4bb7-a82a-d16949e0971f",
"Phone_number": "09064491585",
"Route": "None",
"State": "Abia State",
"routed": "None"
}
},
"1sLWwcxZL8Sr1sBFAzuPDcl1iXs1": {
"Bank details": {
"accountName": "Ekoh Jety",
"accountNumber": "67808870",
"bank": "first Bank"
},
"Location": {
"latitude": "5.3872821",
"longitude": "7.0089u9u8"
},
"Profile": {
"AccountStatus": "Verified",
"Address": "No 2 Obuagu, Enugu",
"BirthYear": "1998",
"DeliveryOn": false,
"Email": "[email protected]",
"From": "Enugu State",
"Fullname": "Ekoh wwiiwC.",
"IdImage": "https://firebasestorage.googleapis.com/v0/b/lombaz-3490e.appspot.com/o/ID_Pictures%2FNational%20ID%2F1609831737206.jpg?alt=media&token=8290066b-73ab-44d0-8807-c28af6592b0e",
"Image": "https://firebasestorage.googleapis.com/v0/b/lombaz-3490e.appspot.com/o/Profile%20Pictures%2F1609831730721.jpg?alt=media&token=6efe967a-58eb-4fa7-b841-81d3d7666eb1",
"Phone_number": "08100489261",
"Route": "Emene Axis (Enugu Int’l Airport)",
"State": "Enugu State",
"To": "Enugu State",
"carrier": "Traveller || Individual",
"routed": "Enugu State - Emene Axis (Enugu Int’l Airport)"
}
}
}
On the console, Console.log(data) displays fine. Then this warning and error follows:
index.esm.js?abfd:106 [2022-02-05T15:39:46.784Z] @firebase/database: FIREBASE WARNING: Exception was thrown by user callback. TypeError: Cannot read properties of undefined (reading 'AccountStatus')
at eval (webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/userslist.vue?vue&type=script&lang=js&:84:24)
at eval (webpack-internal:///./node_modules/@firebase/database/dist/index.esm.js:4345:20)
at LLRBNode.inorderTraversal (webpack-internal:///./node_modules/@firebase/database/dist/index.esm.js:2697:15)
at LLRBNode.inorderTraversal (webpack-internal:///./node_modules/@firebase/database/dist/index.esm.js:2696:27)
at LLRBNode.inorderTraversal (webpack-internal:///./node_modules/@firebase/database/dist/index.esm.js:2698:24)
at LLRBNode.inorderTraversal (webpack-internal:///./node_modules/@firebase/database/dist/index.esm.js:2696:27)
at SortedMap.inorderTraversal (webpack-internal:///./node_modules/@firebase/database/dist/index.esm.js:3147:27)
at ChildrenNode.forEachChild (webpack-internal:///./node_modules/@firebase/database/dist/index.esm.js:3756:35)
at DataSnapshot.forEach (webpack-internal:///./node_modules/@firebase/database/dist/index.esm.js:4344:31)
at VueComponent.onDataChange (webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/userslist.vue?vue&type=script&lang=js&:76:13)
defaultLogHandler @ index.esm.js?abfd:106
Logger.warn @ index.esm.js?abfd:212
warn @ index.esm.js?e947:348
eval @ index.esm.js?e947:704
setTimeout (async)
exceptionGuard @ index.esm.js?e947:698
EventList.raise @ index.esm.js?e947:9565
EventQueue.raiseQueuedEventsMatchingPredicate_ @ index.esm.js?e947:9519
EventQueue.raiseEventsForChangedPath @ index.esm.js?e947:9503
Repo.onDataUpdate_ @ index.esm.js?e947:12730
PersistentConnection.onDataPush_ @ index.esm.js?e947:12006
PersistentConnection.onDataMessage_ @ index.esm.js?e947:12000
Connection.onDataMessage_ @ index.esm.js?e947:11246
Connection.onPrimaryMessageReceived_ @ index.esm.js?e947:11240
eval @ index.esm.js?e947:11141
WebSocketConnection.appendFrame_ @ index.esm.js?e947:10727
WebSocketConnection.handleIncomingFrame @ index.esm.js?e947:10772
mySock.onmessage @ index.esm.js?e947:10673
index.esm.js?e947:705 Uncaught TypeError: Cannot read properties of undefined (reading 'AccountStatus')
at eval (userslist.vue?8b1e:77:1)
at eval (index.esm.js?e947:4331:1)
at LLRBNode.inorderTraversal (index.esm.js?e947:2683:1)
at LLRBNode.inorderTraversal (index.esm.js?e947:2682:1)
at LLRBNode.inorderTraversal (index.esm.js?e947:2684:1)
at LLRBNode.inorderTraversal (index.esm.js?e947:2682:1)
at SortedMap.inorderTraversal (index.esm.js?e947:3133:1)
at ChildrenNode.forEachChild (index.esm.js?e947:3742:1)
at DataSnapshot.forEach (index.esm.js?e947:4330:1)
at VueComponent.onDataChange (userslist.vue?8b1e:70:1)
eval @ userslist.vue?8b1e:77
eval @ index.esm.js?e947:4331
LLRBNode.inorderTraversal @ index.esm.js?e947:2683
LLRBNode.inorderTraversal @ index.esm.js?e947:2682
LLRBNode.inorderTraversal @ index.esm.js?e947:2684
LLRBNode.inorderTraversal @ index.esm.js?e947:2682
SortedMap.inorderTraversal @ index.esm.js?e947:3133
ChildrenNode.forEachChild @ index.esm.js?e947:3742
DataSnapshot.forEach @ index.esm.js?e947:4330
onDataChange @ userslist.vue?8b1e:70
onceCallback @ index.esm.js?e947:4935
eval @ index.esm.js?e947:4545
exceptionGuard @ index.esm.js?e947:694
EventList.raise @ index.esm.js?e947:9565
EventQueue.raiseQueuedEventsMatchingPredicate_ @ index.esm.js?e947:9519
EventQueue.raiseEventsForChangedPath @ index.esm.js?e947:9503
Repo.onDataUpdate_ @ index.esm.js?e947:12730
PersistentConnection.onDataPush_ @ index.esm.js?e947:12006
PersistentConnection.onDataMessage_ @ index.esm.js?e947:12000
Connection.onDataMessage_ @ index.esm.js?e947:11246
Connection.onPrimaryMessageReceived_ @ index.esm.js?e947:11240
eval @ index.esm.js?e947:11141
WebSocketConnection.appendFrame_ @ index.esm.js?e947:10727
WebSocketConnection.handleIncomingFrame @ index.esm.js?e947:10772
mySock.onmessage @ index.esm.js?e947:10673
setTimeout (async)
exceptionGuard @ index.esm.js?e947:698
EventList.raise @ index.esm.js?e947:9565
EventQueue.raiseQueuedEventsMatchingPredicate_ @ index.esm.js?e947:9519
EventQueue.raiseEventsForChangedPath @ index.esm.js?e947:9503
Repo.onDataUpdate_ @ index.esm.js?e947:12730
PersistentConnection.onDataPush_ @ index.esm.js?e947:12006
PersistentConnection.onDataMessage_ @ index.esm.js?e947:12000
Connection.onDataMessage_ @ index.esm.js?e947:11246
Connection.onPrimaryMessageReceived_ @ index.esm.js?e947:11240
eval @ index.esm.js?e947:11141
WebSocketConnection.appendFrame_ @ index.esm.js?e947:10727
WebSocketConnection.handleIncomingFrame @ index.esm.js?e947:10772
mySock.onmessage @ index.esm.js?e947:10673
Before this error, I could see a list of all the emails and clicking on each, displays other details. Suddenly, everything went south. I have cleared cache, still nothing changed. In fact, nothing displays in Microsoft edge, no warning, nothing in console at all.The errors are seen on chrome.
Any help will be appreciated please. Thanks
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|