getInitialProps throws error when my app launches #10854

webface · 2020-03-05T18:29:14Z

webface
Mar 5, 2020

getInitialProps thows an error when my app launches. I am running a node server and nextjs app in a docker container. Here is my get func

Index.getInitialProps = async(ctx)=> {
  console.log('get initial props')
	const API_URL = process.env.API_URL;
	const INDEX_ENDPOINT = `${API_URL}/data/page/Welcome`;
	let response = {};
	try {
		response = await axios({
            method: 'get',
            responseType: 'json',
            url: INDEX_ENDPOINT
    });
    if(response.status == 200){
    console.log(response);
    return { data: response.data[0] }     
    }
        
  } catch(error){
        return { error }
  }
}
export default withStyles(styles)(Index);

I only get data when I navigate from a Link component otherwise I get this error

get initial props
frontend    | {
frontend    |   classes: { root: 'Index-root-1' },
frontend    |   error: Error: connect ECONNREFUSED 127.0.0.1:3018
frontend    |       at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1137:16) {
frontend    |     errno: -111,
frontend    |     code: 'ECONNREFUSED',
frontend    |     syscall: 'connect',
frontend    |     address: '127.0.0.1',
frontend    |     port: 3018,
frontend    |     config: {
frontend    |       url: 'http://localhost:3018/data/page/Welcome',
frontend    |       method: 'get',
frontend    |       headers: [Object],
frontend    |       transformRequest: [Array],
frontend    |       transformResponse: [Array],
frontend    |       timeout: 0,
frontend    |       adapter: [Function: httpAdapter],
frontend    |       responseType: 'json',
frontend    |       xsrfCookieName: 'XSRF-TOKEN',
frontend    |       xsrfHeaderName: 'X-XSRF-TOKEN',
frontend    |       maxContentLength: -1,
frontend    |       validateStatus: [Function: validateStatus],
frontend    |       data: undefined
frontend    |     },
frontend    |     request: Writable {
frontend    |       _writableState: [WritableState],
frontend    |       writable: true,
frontend    |       _events: [Object: null prototype],
frontend    |       _eventsCount: 2,
frontend    |       _maxListeners: undefined,
frontend    |       _options: [Object],
frontend    |       _redirectCount: 0,
frontend    |       _redirects: [],
frontend    |       _requestBodyLength: 0,
frontend    |       _requestBodyBuffers: [],
frontend    |       _onNativeResponse: [Function (anonymous)],
frontend    |       _currentRequest: [ClientRequest],
frontend    |       _currentUrl: 'http://localhost:3018/data/page/Welcome',
frontend    |       [Symbol(kCapture)]: false
frontend    |     },
frontend    |     response: undefined,
frontend    |     isAxiosError: true,
frontend    |     toJSON: [Function (anonymous)]
frontend    |   }
frontend    | }

willemliu · 2020-03-06T11:46:47Z

willemliu
Mar 6, 2020

Is port 3018 on localhost accessible to your NextJS application running in docker?

1 reply

webface Mar 6, 2020
Author

@willemliu yes it is. When I navigate to the welcome page using Link the data loads. But it doesnt if I access the route directly.
_document.js from the example

import React from 'react';
import Document, { Head, Main, NextScript } from 'next/document';
import { ServerStyleSheets } from '@material-ui/core/styles';


export default class MyDocument extends Document {
  render() {
    return (
      <html lang="en">
        <Head>
          
          <link
            rel="stylesheet"
            href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    );
  }
}

MyDocument.getInitialProps = async (ctx) => {
  // Resolution order
  //
  // On the server:
  // 1. app.getInitialProps
  // 2. page.getInitialProps
  // 3. document.getInitialProps
  // 4. app.render
  // 5. page.render
  // 6. document.render
  //
  // On the server with error:
  // 1. document.getInitialProps
  // 2. app.render
  // 3. page.render
  // 4. document.render
  //
  // On the client
  // 1. app.getInitialProps
  // 2. page.getInitialProps
  // 3. app.render
  // 4. page.render

  // Render app and page and get the context of the page with collected side effects.
  const sheets = new ServerStyleSheets();
  const originalRenderPage = ctx.renderPage;

  ctx.renderPage = () =>
    originalRenderPage({
      enhanceApp: App => props => sheets.collect(<App {...props} />),
    });

  const initialProps = await Document.getInitialProps(ctx);

  return {
    ...initialProps,
    // Styles fragment is rendered after the app and page rendering finish.
    styles: [...React.Children.toArray(initialProps.styles), sheets.getStyleElement()],
  };
};

index.js

import Layout from '../components/Layout';
import { withStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import Link from '@material-ui/core/Link';
import axios from 'axios';

const styles = ({
  breakpoints,
  transitions
}) => ({
  root: {
    padding: 16,
    transition: transitions.create(),
    [breakpoints.up('sm')]: {
      padding: 24,
      maxWidth: 700,
      margin: 'auto'
    },
    [breakpoints.up('md')]: {
      maxWidth: 960
    }
  }
});
const Index=(props) =>{
  console.log(props)
  return (
    <Layout>
      <div className={props.classes.root}>
        <Typography variant="overline" gutterBottom>
          INTRODUCTION
        </Typography>
        <Typography variant="h4" gutterBottom>
          Welcome to my <Link underline='none'>Resume</Link>
        </Typography>
        <Typography variant="body1" gutterBottom>
          <b>Version 1.0</b>
        </Typography>
        <Typography variant="body1" gutterBottom>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere lectus quis neque varius dignissim nec vel enim. Etiam id purus at nibh ultricies ornare. Donec at nisi risus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam erat volutpat. Proin at fermentum lorem. Sed feugiat pulvinar risus, id gravida augue accumsan a. Pellentesque efficitur odio ac aliquet hendrerit. Fusce luctus ut lacus et placerat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc sed condimentum neque. Proin ornare erat a nisi lobortis lobortis. Pellentesque felis ligula, ultrices eget facilisis eget, tincidunt ut mi.
        </Typography>
        <Typography variant="caption" gutterBottom>
          Tommy Adeniyi
        </Typography>
        <br></br>
        <br></br>
        <br></br>
        <Typography variant="h4" gutterBottom>
          Info
        </Typography>
        <Typography variant="body1" gutterBottom>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere lectus quis neque varius dignissim nec vel enim. Etiam id purus at nibh ultricies ornare. Donec at nisi risus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam erat volutpat. Proin at fermentum lorem. Sed feugiat pulvinar risus, id gravida augue accumsan a. Pellentesque efficitur odio ac aliquet hendrerit. Fusce luctus ut lacus et placerat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc sed condimentum neque. Proin ornare erat a nisi lobortis lobortis. Pellentesque felis ligula, ultrices eget facilisis eget, tincidunt ut mi.
        </Typography>
        <Typography variant="body1" gutterBottom>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere lectus quis neque varius dignissim nec vel enim. Etiam id purus at nibh ultricies ornare. Donec at nisi risus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam erat volutpat. Proin at fermentum lorem. Sed feugiat pulvinar risus, id gravida augue accumsan a. Pellentesque efficitur odio ac aliquet hendrerit. Fusce luctus ut lacus et placerat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc sed condimentum neque. Proin ornare erat a nisi lobortis lobortis. Pellentesque felis ligula, ultrices eget facilisis eget, tincidunt ut mi.
        </Typography>
      </div>
    </Layout>
  );
}
Index.getInitialProps = async(ctx)=> {
  console.log('get initial props')
	const API_URL = process.env.API_URL;
	const INDEX_ENDPOINT = `${API_URL}/data/page/Welcome`;
	let response = {};
	try {
		response = await axios({
            method: 'get',
            responseType: 'json',
            url: INDEX_ENDPOINT
    });
    if(response.status == 200){
    console.log(response);
    return { data: response.data[0] }     
    }
        
  } catch(error){
        return { error }
  }
}
export default withStyles(styles)(Index);

_app.js


import React from 'react'
import App from 'next/app'

class MyApp extends App {
  render() {
	const { Component, pageProps } = this.props;
    return <Component {...pageProps} />
  }
}

export default MyApp

willemliu · 2020-03-06T13:37:37Z

willemliu
Mar 6, 2020

@webface when you navigate using link the getInitialProps is called client-side. I can only assume that process.env.API_URL on the client-side is holding a different value than when executed on the server-side.
Maybe you can log the values and see if the value logged on the server is different from developer console in the browser when navigating using Link vs. direct.

0 replies

webface · 2020-03-06T16:39:12Z

webface
Mar 6, 2020
Author

@willemliu when using link I get the console logs in the browser. When using direct it logs only in the terminal

Index.getInitialProps = async(ctx)=> {
        console.log('get initial props')
	const API_URL = process.env.API_URL;
        console.log('api_url', API_URL);
	const INDEX_ENDPOINT = `${API_URL}/data/page/Welcome`;
...

on direct in the console...still

[ wait ]  compiling ...
frontend    | [ ready ] compiled successfully - ready on http://localhost:3000
frontend    | get initial props
frontend    | api_url http://localhost:3018
frontend    | {
frontend    |   classes: { root: 'Index-root-1' },
frontend    |   error: Error: connect ECONNREFUSED 127.0.0.1:3018
frontend    |       at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1137:16) {
frontend    |     errno: -111,
frontend    |     code: 'ECONNREFUSED',
frontend    |     syscall: 'connect',
frontend    |     address: '127.0.0.1',
frontend    |     port: 3018,
frontend    |     config: {
frontend    |       url: 'http://localhost:3018/data/page/Welcome',
frontend    |       method: 'get',
...

I have another project which uses nextjs v8. I never had this issue

1 reply

willemliu Mar 6, 2020

http://localhost:3018/data/page/Welcome
ECONNREFUSED does mean that the url is being blocked. Either by firewall or otherwise. When you connect to that endpoint externally it goes via another route and that apparently is not blocked. You can try to use the same API_URL both on server and client to see if that works. Although I can imagine you don't want to pay the network latency costs...

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

getInitialProps throws error when my app launches #10854

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 3 comments 2 replies

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

getInitialProps throws error when my app launches #10854

webface Mar 5, 2020

Replies: 3 comments · 2 replies

willemliu Mar 6, 2020

webface Mar 6, 2020 Author

willemliu Mar 6, 2020

webface Mar 6, 2020 Author

willemliu Mar 6, 2020

webface
Mar 5, 2020

Replies: 3 comments 2 replies

willemliu
Mar 6, 2020

webface Mar 6, 2020
Author

willemliu
Mar 6, 2020

webface
Mar 6, 2020
Author