Error enabling offline persistence with Firebase Web SDK and SSR #66
Comments
|
Hi @zaarheed, Thanks for taking the time to post this issue and for the detailed description! Can you try to use // next.config.js
module.exports = {
target: "experimental-serverless-trace",
};The reason is that Firebase contains native binaries. In serverless-target mode, Next.js tries to inline all dependencies which does not work with binaries. In experimental-serverless-trace-target mode, Next.js does not inline dependencies, which allows Netlify to correctly bundle them into your functions. Longer explanation here (the Q focuses on Prisma, but it's the same issue of bundling binaries): #55 (comment) Hopefully that will fix it! 😊 If not, we will dig deeper. We will definitely figure this out! Cheers, |
|
@FinnWoelm thanks for your thorough response. I made the change in However, trying to load a page that uses Pages that do not use FYI the function logs print the following: So the request is working, and the function is being executed - but it's timing out. Any suggestions on how I might be able to debug this further? Running I've checked environment variables etc to weed out any silly mistakes but don't know what else I can try. |
|
hey @zaarheed ! glad finn was able to try help out yesterday. have you seen this thread/comment? https://community.netlify.com/t/netlify-function-timeout-after-10-seconds-when-published/18220/5 seems like this is possibly unique to firebase <-> netlify functions. not sure. if that doesn't happen to help, i think the best next step for me and finn to be helpful would be for you to share a repo with us, but maybe finn has other ideas! |
|
@lindsaylevine thanks for sharing that link! Similar to the post I found on the Netlify forums, that developer is using I suppose the underlying issue might be the same. I’ll need to dig in to the source code to find an appropriate and equivalent way to close the connection - if there is one. I don’t know how these things work exactly, but it’s weird that it works on localhost but not on Netlify. Perhaps Firebase keeps an outbound connection open and Netlify interprets that as execution logic thus resulting in a timeout? For now, I’ve solved my problem by refactoring everything to only use Firebase on the client side. Although it works, it would be nice to find a way to get Netlify/Next/Firebase to work together for SSR. I think it’s a super powerful stack esp for newcomers to React/Next.js like myself. The dev experience up until this SSR issue on Netlify has been excellent and so easy... to easy perhaps! I haven’t had a chance to create a minimal repo to reproduce the issue just yet. But happy to invite you to my private repo if you want to deploy and try it out in the meantime. |
|
Hey @zaarheed, happy that we're moving in the right direction! Minimal RepoI made a super minimal repo to reproduce the issue: https://github.com/FinnWoelm/next-on-netlify-firebase I was able to reproduce your error regarding the function timeout. This seems to be a common issue when using firebase on AWS Lambda. I can't say that I fully understand what's going on, but something about an event loop that isn't empty and so AWS keeps waiting on it until the function times out, even if nothing more is happening. See: https://stackoverflow.com/a/39215697/6451879 Fixing the IssueWith a regular Netlify Function, the fix is really easy. Just add In any case, what you can do in the meantime is to use your own patch! Are you familiar with You need to:
// See: https://github.com/FinnWoelm/next-on-netlify-firebase/blob/main/pages/test.js#L13-L23
export async function getServerSideProps(context) {
// Get function context
const functionContext = context?.req?.functionContext;
// If we are currently in a Netlify function (deployed on netlify.app or
// locally with netlify dev), do not wait for empty event loop.
// See: https://stackoverflow.com/a/39215697/6451879
// Skip during next dev.
if (functionContext) {
console.log("Setting callbackWaitsForEmptyEventLoop: false");
functionContext.callbackWaitsForEmptyEventLoop = false;
}
// ... (run firebase queries, etc...)
// return your data
return { props: {} };
}You can also have a look at this commit, which does the above steps. Let me know if you run into any issues! In that case, please do feel free to share read access of your repo with us! 😊 And let us know if it ends up working, so that we can celebrate 😁 |
|
Hello, I followed the thread and try to implement the fix. unfortunately when I change target from ...
I don't upload any heavy file and application is lightweight. the issue happen only when ` |
|
hey @emmbyiringiro. sorry you're running into this :(. it's a known issue and we're looking at ways to address it. for now, check out this comment on a similar issue: |
When a page is being SSR-ed by a Netlify Function, allow users to access the function's event and context parameters. These can be accessed as a property on the `req` object in all SSR-ed pages and in API routes: - req.netlifyFunction.event - req.netlifyFunction.context This allows users to access/leverage Netlify identity for their Next.js page. See: #20 It also allows users to modify the callbackWaitsForEmptyEventLoop behavior. See: #66 (comment))
|
hey all! i'm going to close this issue in favor of #120, which groups several please feel free to re-open this issue if you think #120 does not suffice or if there's a specific piece separate from experimental-serverless-trace that still needs addressing. |
When a page is being SSR-ed by a Netlify Function, allow users to access
the function's event and context parameters. These can be accessed as a
property on the `req` object in all SSR-ed pages and in API routes:
- req.netlifyFunctionParams.event
- req.netlifyFunctionParams.context
```js
const Page = () => <p>Hello World!</p>;
export const getServerSideProps = async ({ req }) => {
// Get event and context from Netlify Function
const {
netlifyFunctionParams: { event, context },
} = req;
// Access Netlify identity
const { identity, user } = context.clientContext;
// Modify callbackWaitsForEmptyEventLoop behavior
context.callbackWaitsForEmptyEventLoop = false;
// See how much time is remaining before function timeout
const timeRemaining = context.getRemainingTimeInMillis();
return {
props: {},
};
};
export default Page;
```
This allows users to access/leverage Netlify identity for their Next.js
page (see #20).
It also allows users to modify the callbackWaitsForEmptyEventLoop
behavior (see #66 (comment)).
Fixes #20
|
Hi @zaarheed, we just added some code to expose the Netlify Function's context in server-side-rendered pages and API routes. So you no longer need to use You can simply do the following: export async function getServerSideProps({ req }) {
// Get event and context from Netlify Function
const { context } = req.netlifyFunctionParams || {};
// If we are currently in a Netlify function (deployed on netlify.app or
// locally with netlify dev), do not wait for empty event loop.
// See: https://stackoverflow.com/a/39215697/6451879
// Skip during next dev.
if (context) {
console.log("Setting callbackWaitsForEmptyEventLoop: false");
context.callbackWaitsForEmptyEventLoop = false;
}
// ... (run firebase queries, etc...)
// return your data
return { props: {} };
}More details here: #119 The feature has been merged into main, but won't be available until the next minor release of next-on-netlify. If you want to use it today, you can temporarily use the main branch of next-on-netlify: |
|
Awesome... this fixed an issue I was having with connecting to mongodb atlas from getServerSideProps! |
I am trying to use the Google Firebase Web SDK (Firestore, Storage and Analytics) on a Next.js project hosted on Netlify with
next-on-netlify.I have some pages strictly using Firebase Firestore APIs once the page has loaded, and other pages are using Firestore APIs within the
getServerSideProps()function. Still inconclusive, but it appears that the pages using Firestore withingetServerSidePropsare not working. There are two symptoms:Is there a way around this, or am I doing something wrong?
Everything appears to be working fine on my local machine when I am developing using
npm run dev- including SSR. Hence, this might be an issue related to Netlify-Next.js-Firebase.I found this post on the Netlify community forums which suggests I am not the only one with the issue. But unlike that user, I am not using Netlify lambdas/functions nor am I used the
firebase-adminSDK (server-side library). The resolution from this post is also inconclusive, citing: "Note that even though the write succeeded ... the function did not return a 200 and ‘Success!’… or a 500. It returned a 502 with a timeout error at the endpoint"The text was updated successfully, but these errors were encountered: