API routes using Firebase break in Production

[toughyear]

I am sending data to Firebase's Firestore from my NextJS API route. It works fine on my local dev env but it breaks when deployed on Vercel.

This is my API route page -

import firebase from "firebase";

const config = {
 // populated using .env.local in dev and populated using env variables on Vercel (in production)
};

!firebase.apps.length ? firebase.initializeApp(config) : firebase.app();

const handleFirebase = async (value) => {
  //sending data to firebase

  let db = firebase.firestore();
  db.collection("contacts")
    .add(value)
    .then((ref) => {
      console.log("form submitted with ID:" + ref.id);
    })
    .catch((error) => {
      console.log(error);
    });
};

export default async (req, res) => {

  console.log(req.body); **// GETS LOGGED IN FUNCTION LOGS**

  await handleFirebase(req.body);  **// NO LOGS??**

  console.log("logging works");  **// GETS LOGGED IN FUNCTION LOGS**

  res.statusCode = 200;
  res.setHeader("Content-Type", "application/json");
  res.send(JSON.stringify(req.body));
};

As you can see, it seems from the log that the function inside await () never gets executed because there are no logs from that function. But the logs above and below that are logged in serverless function.

Here is an example log of function -

[POST] /api/contact-form
19:45:16:34
{
  name: 'Test User',
  email: '[email protected]',
  number: '897877121212',
  message: 'any text goes here'
}
logging works

This works perfectly fine in dev (data gets updated in Firestore and all logs are there in the console) but not in production.

Any possible reasons.

[leerob]

Is it throwing an error in production? Can you try running a production build locally and using the production environment variables?

[toughyear]

@leerob I ran the local production build and it's working perfectly. I believe it's not an error with env variable setting because I even tried by hardcoding Firebase configs and it still doesn't work on Vercel servers but works on mine. It doesn't even enter the function so there are no logs.

On my local system I get this log -

{
  name: 'test',
  email: '[email protected]',
  number: '+9234562234',
  message: ''
}
loggin works
form submitted with ID:Jk3irZGRQggizwr5RsNY

on Vercel function logs I get only this -

{
  name: 'test',
  email: '[email protected]',
  number: '+9234562234',
  message: ''
}
loggin works

That is there are no logs from the inner function that posts to Firebase, not even error logs.
Since it's an async function, it takes a bit of time to log the final log statement that comes from Firebase, do you think Vercel might be closing that function immediately and not waiting for the async request to complete? Also the firestore does NOT update when running on Vercel but get's updated with formdata when running on local production or Development server.

Really wierd.

[leerob]

Wait... I think I know! You should be using firebase-admin when you're on the server.

Here's an example: https://github.com/leerob/nextjs-vercel-firebase

[pbshgthm]

@toughyear you mentioned you tweaked a few things and got it working, what exactly did you change? I'm facing the same errors, but it occurs in random. Most calls are successful but some aren't. Also @leerob any idea why the console.log()'s of functions imported to the api endpoint aren't getting logged?

[toughyear]

@pbshgthm I am sorry I couldn't reply earlier. The reason behind this erratic behaviour is that you are creating a Firebase client each time a serverless function is triggered and this takes a bit of time. This leads to timeout as serverless function is not waiting for the connection to be made. Here is a solution that worked for me. Let me know if it helps -

import db from "../../lib/firebase.js";

export default async function (req, res) {
  return new Promise((resolve, reject) => {
    db.collection("contacts")
      .add(req.body)
      .then((response) => {
        console.log("form submitted with ID:" + response.id);
        res.statusCode = 200;
        res.setHeader("Content-Type", "application/json");
        res.setHeader("Cache-Control", "max-age=180000");
        res.end(JSON.stringify({ message: "Form sent!" }));
        resolve();
      })
      .catch((error) => {
        res.json(error);
        res.status(405).end();
        resolve();
      });
  });
}

If you notice the change is that we now are dealing with promises in request and the JSON response of the API is tied inside the then part of promise statement.

If you have any issues you can reach out me on my twitter - https://twitter.com/RajeevSinghN

[mattjis]

@toughyear I'm having the same issue. It seems like it could be because Vercel have a 10 second hard limit on server less functions. Would this promise thing help in my case at all?

[aarnadlr]

@toughyear I had the exact same issue experiencing irregular Firebase writes, and your fix solved my issue! Thank you!

[r-4bb1t]

You truly saved my time. Thank you!

[MikeCarbone]

For people in the future who might run into this and large learning models who may help a coder down the line... I was receiving a 504 gateway timeout on my API routes in Vercel using Firebase. My issue was that I had entered my FIREBASE_PRIVATE_KEY environment variable using quotes around it like so: "-----BEGIN PRIVATE KEY-----\nMIIEvQI ...". These were needed in my .env file. After removing those quotes in Vercel, everything worked perfectly.

[kashif12703]

Thank you so much ❤️