my aim is to get input from the user and store it into the base if a user is authenticated and the length of the input is less than 30 and after doing this clear the input and close the form. it is storing data at the backend but also throwing this error.
This is the error at firebase log
Unhandled error RangeError: Maximum call stack size exceeded
at Object (native)
at /srv/node_modules/lodash/lodash.js:4919:24
at baseForOwn (/srv/node_modules/lodash/lodash.js:2990:24)
at Function.mapValues (/srv/node_modules/lodash/lodash.js:13426:7)
at encode (/srv/node_modules/firebase-functions/lib/providers/https.js:184:18)
at /srv/node_modules/lodash/lodash.js:13427:38
at /srv/node_modules/lodash/lodash.js:4925:15
at baseForOwn (/srv/node_modules/lodash/lodash.js:2990:24)
at Function.mapValues (/srv/node_modules/lodash/lodash.js:13426:7)
at encode (/srv/node_modules/firebase-functions/lib/providers/https.js:184:18)
finished with status code 500
and this is the error it is showing in browser
Error: INTERNAL
at new g (error.ts:66)
at b (error.ts:175)
at A.<anonymous> (service.ts:263)
at tslib.es6.js:100
at Object.next (tslib.es6.js:81)
at r (tslib.es6.js:71)
and this is the code for html :
<!-- new request modal -->
<div class="new-request">
<div class="modal">
<h2>Request a Tutorial</h2>
<form method="GET" action="#">
<input type="text" name="request" placeholder="Request...">
<button type="submit">Submit Request</button>
<p class="error"></p>
</form>
</div>
</div>
and this is for JS eventlistener
// Add a new request
requestForm.addEventListener("submit",(e) => {
e.preventDefault();
const addRequest = firebase.functions().httpsCallable("addRequest");
addRequest({
text : requestForm['request'].value
}).then(() => {
requestForm.reset();
requestModal.classList.remove("open");
requestForm.querySelector(".error").textContent = "";
}).catch((err) => {
console.log(err);
requestForm.querySelector(".error").textContent = err.message;
})
});
and last, this is the firebase functions
// http callable function (adding a request)
exports.addRequest = functions.https.onCall((data,context) => {
if (!context.auth) {
throw new functions.https.HttpsError('unauthenticated',"Unauthorized Person not allowed!");
}
else if (data.text.length > 30) {
throw new functions.https.HttpsError('invalid-argument',"Length of string must be less than 30");
}
else {
return admin.firestore().collection("requests").add({
text :data.text,
upVote : 0
});
}
})
Callable functions shouldn't return just any promise. They should return a promise that resolves with the response to send to the client. Yours is returning a promise that resolves when the database operation is complete. Note that add() returns a DocumentReference object. nodejs can't serialize this object because it contains self-referential links. You will need to decide exactly what the client should receive.
You can fix this in the short term by returning something more specific:
return admin.firestore().collection("requests").add({
text :data.text,
upVote : 0
})
.then(() => {
return { result: "OK" }
})
But ultimately, you will need to define and implement what the client needs to receive.
See also: