• 23-Jan-2023
Lightrun Team
Author Lightrun Team
Share
This article is about fixing [HPM] Error occurred while trying to proxy request / from localhost:3000 to http://localhost:8080 on fresh Debian Stretch 4.8.0 install in saikat react-apollo-starter-kit

[HPM] Error occurred while trying to proxy request / from localhost:3000 to http://localhost:8080 on fresh Debian Stretch 4.8.0 install in saikat react-apollo-starter-kit

Lightrun Team
Lightrun Team
23-Jan-2023

Explanation of the problem

When running “npm run dev” after “npm install”, the expected behavior is to navigate to “localhost:3000” and see the starter page, however, an error is encountered instead. The error message displayed is “Error occured while trying to proxy to: localhost:3000/”. Additionally, the following logs are present in the console:

10:44:07 PM webpack.1 |  [HPM] Error occurred while trying to proxy request /favicon.ico from localhost:3000 to http://localhost:8080 (ECONNREFUSED) (https:
10:44:07 PM webpack.1 |  >  //nodejs.org/api/errors.html#errors_common_system_errors)

The error message “Error occured while trying to proxy to: localhost:3000/” suggests that there is a problem with the proxy configuration. The issue might be that the specified target (localhost:3000) is not reachable or not running.

The logs “10:44:07 PM webpack.1 | [HPM] Error occurred while trying to proxy request /favicon.ico from localhost:3000 to http://localhost:8080 (ECONNREFUSED) (https:” indicate that there is a problem with the connection between “localhost:3000” and “http://localhost:8080“. This might be caused by a misconfigured proxy or by the target server being down.

To solve this problem, check the proxy configuration in the project and ensure that it is correctly set up and that the target server is running. In case the target server is not running, start it and try again. Additionally, check the network connection between the project and the target server to ensure that there are no firewalls blocking the connection. The following code block is an example of a proxy configuration:

const proxy = require('http-proxy-middleware');
module.exports = function(app) {
    app.use(proxy('/api', { target: 'http://localhost:8080/' }));
};

It is important to note that the above code block is just an example, the exact proxy configuration will depend on the specific requirements of the project.

Troubleshooting with the Lightrun Developer Observability Platform

Getting a sense of what’s actually happening inside a live application is a frustrating experience, one that relies mostly on querying and observing whatever logs were written during development.
Lightrun is a Developer Observability Platform, allowing developers to add telemetry to live applications in real-time, on-demand, and right from the IDE.

  • Instantly add logs to, set metrics in, and take snapshots of live applications
  • Insights delivered straight to your IDE or CLI
  • Works where you do: dev, QA, staging, CI/CD, and production

Start for free today

Problem solution for [HPM] Error occurred while trying to proxy request / from localhost:3000 to http://localhost:8080 on fresh Debian Stretch 4.8.0 install

The “Error occured while trying to proxy to: localhost:3000/” error message suggests that there is a problem with the proxy configuration. This error can occur when the specified target (localhost:3000) is not reachable or not running. In order to resolve this issue, it is important to check the proxy configuration in the project and ensure that it is correctly set up and that the target server is running. Additionally, it is important to check the network connection between the project and the target server to ensure that there are no firewalls blocking the connection.

One of the solutions proposed is to replace “localhost” with “[::1]” in the proxy configuration. “[::1]” is a special IP address that represents the loopback interface, it can be used in place of “localhost” and it’s resolved to the loopback address. This works because in some cases, the connection to “localhost” is not established properly. Here’s an example of how to configure the proxy using “[::1]”

devServer: {
  proxy: {
    "*": "http://[::1]:8081"
    // "secure": false,
    // "changeOrigin": true
  }
},

As seen in the above code block, the proxy has been set up to redirect all requests to “http://[::1]:8081”, this way the connection is established properly.

Another solution proposed is to set the “secure” option to “false” and “changeOrigin” to “true” in the proxy configuration. This is because the proxy might not be able to handle the HTTPS request correctly, and by setting these options, the proxy can handle the request as an HTTP request. Here’s an example of how to configure the proxy using these options:

{ 
    “/api”: { 
        “target”: “https://localhost:12345”, 
        “secure”: false, 
        “changeOrigin”: true 
    } 
}

In the above code block, the proxy has been set up to redirect requests to the “/api” endpoint to “https://localhost:12345”. The “secure” option has been set to “false”, which means that the proxy will handle the request as an HTTP request. The “changeOrigin” option has been set to “true”, which means that the proxy will change the origin of the request to the target specified.

In summary, the “Error occured while trying to proxy to: localhost:3000/” error message can be caused by a misconfigured proxy, and the solutions proposed are to check and possibly rewrite the proxy configuration. Additionally, it is important to consider the use of the “[::1]” instead of “localhost” and the use of the “secure” and “changeOrigin” options when configuring the proxy. By trying these solutions, the issue can be resolved and the connection to the target server can be established properly.

Other popular problems with saikat react-apollo-starter-kit

Problem: “TypeError: Cannot read property ‘map’ of undefined” when trying to render a list of data fetched with a GraphQL query

This error occurs when the data that is being mapped over in a component is not defined or is undefined. This can happen when the GraphQL query has not yet finished fetching the data or if there is an error in the query that is preventing the data from being returned.

Solution:

The solution is to first check the query and ensure that it is written correctly and that the data being requested is present in the response. Additionally, it is important to handle the loading state and the error state of the query properly in the component. Here is an example of how to handle the loading and error state:

const MyComponent = ({data: {loading, error, myData}}) => {
  if (loading) return <Loading />;
  if (error) return <Error error={error} />;
  return (
    <div>
      {myData.map(data => (
        <div key={data.id}>{data.name}</div>
      ))}
    </div>
  );
};

Problem: “Network error: Network request failed” when trying to make a query or mutation

This error occurs when there is a problem with the network connection between the client and the server. This can be caused by an issue with the server, an issue with the client’s network connection or a problem with the URL of the GraphQL endpoint.

Solution:

The solution is to check the network connection and ensure that the client can reach the server. Additionally, check the URL of the GraphQL endpoint and ensure that it is correct and that the server is running. Here is an example of how to set the endpoint URL in the client:

const client = new ApolloClient({
  uri: 'https://api.my-server.com/graphql',
});

Problem:”Error: GraphQL error: Variable “$variableName” of type “Type” used in position expecting type “OtherType”.” when trying to make a query or mutation with variables:

This error occurs when the type of a variable passed to a query or mutation does not match the type that is expected by the server. This can happen if the variable is of the wrong type or if the variable is missing. The solution is to check the types of thevariables being passed to the query or mutation and ensure that they match the expected types on the server. Additionally, check that all the required variables are being passed and that they are not undefined. Here is an example of how to pass variables to a query:

const MY_QUERY = gql`
  query MyQuery($id: ID!) {
    myData(id: $id) {
      name
    }
  }
`;

const variables = {
  id: 'abc123',
};

const { data, loading, error } = useQuery(MY_QUERY, { variables });

In the above example, the variable “id” is of type “ID!” and it is being passed as an argument to the query “MyQuery” .It’s important to make sure that the type of the variable passed match the expected type on the server.

A brief introduction to saikat react-apollo-starter-kit

React-Apollo is a library that allows you to easily integrate your React application with the Apollo Client. It is built on top of the Apollo Client and provides a set of higher-order components (HOCs) and hooks that make it easy to fetch and manage data in your React components.

React-Apollo’s HOCs, such as graphql and withApollo, allow you to declaratively fetch data from your GraphQL server and automatically update your components when the data changes. The library also provides a set of hooks, such as useQuery and useMutation, which allows you to fetch and mutate data in a functional component. Additionally, React-Apollo provides a ApolloProvider component that makes it easy to configure your Apollo Client and provides access to the client throughout your application.

Most popular use cases for saikat react-apollo-starter-kit

  1. Fetching and managing data in a declarative way: React-Apollo allows you to declaratively fetch data from your GraphQL server using the graphql HOC or useQuery hook. This means that you can specify the data that your component needs, and React-Apollo will automatically handle the process of fetching the data and updating your component when the data changes.
  2. Mutating data: React-Apollo also provides a way to mutate data on the server using the graphql HOC or useMutation hook. This allows you to perform operations such as creating, updating, and deleting data, and also allows you to access the result of the mutation in your component.
const [createTodo] = useMutation(CREATE_TODO_MUTATION);
const handleSubmit = (event) => {
    event.preventDefault();
    createTodo({ variables: { text } });
}
  1. Centralized management of the Apollo Client: React-Apollo provides a ApolloProvider component that makes it easy to configure your Apollo Client and provides access to the client throughout your application. This means that you can configure your client once and use it throughout your application, rather than having to pass it down through multiple components.
import { ApolloClient, InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
  uri: 'https://your-graphql-server.com/graphql',
  cache: new InMemoryCache()
});

ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById('root')
);
Share

It’s Really not that Complicated.

You can actually understand what’s going on inside your live applications. It’s a registration form away.

Get Lightrun

Lets Talk!

Looking for more information about Lightrun and debugging?
We’d love to hear from you!
Drop us a line and we’ll get back to you shortly.

By submitting this form, I agree to Lightrun’s Privacy Policy and Terms of Use.