Data is properly being fetching through websockets in localhost but when deployed no fetching is done

netlify site: https://66854fe6683e171352993406--cute-cheesecake-26c573.netlify.app/

Code

:import React, { useEffect, useState } from “react”;
import useWebSocket from “react-use-websocket”;

const PriceSection = () => {
const stockInfo = [
{ company: “Amazon”, symbol: “AMZN” },
{ company: “Microsoft”, symbol: “MSFT” },
{ company: “Netflix”, symbol: “NFLX” },
{ company: “Adobe”, symbol: “ADBE” },
{ company: “Meta”, symbol: “META” },
{ company: “Apple”, symbol: “AAPL” },
];
const prevStockPrice = {
AAPL: 0,
AMZN: 0,
ADBE: 0,
MSFT: 0,
META: 0,
NFLX: 0,
};
const initialStockPrice = {
AAPL: 0,
AMZN: 0,
ADBE: 0,
MSFT: 0,
META: 0,
NFLX: 0,
};

const [stocks, setStocks] = useState(initialStockPrice);
const [prevData, setPrevData] = useState(prevStockPrice);
const [loading, setLoading] = useState(true);

const fetchPrevData = async () => {
const data = await Promise.all(
stockInfo.map(async (stock) => {
const response = await fetch(
https://finnhub.io/api/v1/quote?symbol=${stock.symbol}&token=cptbio9r01qnvrr8s3f0cptbio9r01qnvrr8s3fg
);
const stockData = await response.json();

    setPrevData((prevData) => ({
      ...prevData,
      [stock.symbol]: stockData.c,
    }));
  })
);
setLoading(false);
console.log(prevData);

};
useEffect(() => fetchPrevData, );

const subscribeStocks = () => {
sendMessage(‘{“type”:“subscribe”,“symbol”:“AMZN”}’);
sendMessage(‘{“type”:“subscribe”,“symbol”:“MSFT”}’);
sendMessage(‘{“type”:“subscribe”,“symbol”:“NFLX”}’);
sendMessage(‘{“type”:“subscribe”,“symbol”:“ADBE”}’);
sendMessage(‘{“type”:“subscribe”,“symbol”:“META”}’);
sendMessage(‘{“type”:“subscribe”,“symbol”:“AAPL”}’);
};

const { sendMessage, lastMessage } = useWebSocket(
“wss://ws.finnhub.io?token=cptbio9r01qnvrr8s3f0cptbio9r01qnvrr8s3fg”
);

useEffect(() => subscribeStocks, [sendMessage]);
useEffect(() => updateStockPrices(lastMessage), [lastMessage]);

const updateStockPrices = (message) => {
const data = message && message.data;
const parsedData = JSON.parse(data);
const properData = parsedData?.type === “trade” && parsedData.data[0];
console.log(properData);

setStocks((prevData) => ({
  ...prevData,
  [properData.s]: properData.p,
}));

};
const renderStock = (symbol) => {
return stocks[symbol]?.toFixed(2);
};
const renderPrevDay = (symbol) => {
return Number(prevData[symbol]).toFixed(3);
};
const profitLoss = (price, prevPrice) => {
return Number(price - prevPrice).toFixed(2);
};
const renderPercentage = (price, prevPrice) => {
const diff = price - prevPrice;
return Number(((diff * 1.0) / prevPrice) * 100).toFixed(2);
};
return (
<>
{stockInfo.map((stock) => {
return (
<CustomCard mb={“10px”} key={stock.symbol}>
<HStack justify={“space-between”}>


<Stack fontWeight={“medium”}>
<Text fontSize={“md”} color={“black.l”}>
{stock.company}

{renderStock(stock.symbol) == 0 ? (
(loading && <Spinner ml={“100px”} />) || (

<Text fontSize={“lg”}>
{" "}
{prevData[stock.symbol]} $
{console.log(prevData[stock.symbol])}

                      <HStack spacing={"4px"}></HStack>
                    </Stack>
                  )
                ) : (
                  <Stack
                    color={
                      renderPrevDay(stock.symbol) <
                      renderStock(stock.symbol)
                        ? "green"
                        : "red"
                    }
                  >
                    <Text fontSize={"lg"}>
                      {" "}
                      {renderStock(stock.symbol)} ${" "}
                    </Text>
                    <HStack
                      spacing={"4px"}
                      display={
                        renderStock(stock.symbol) === 0 ? "none" : "flex"
                      }
                    >
                      {renderPrevDay(stock.symbol) <
                      renderStock(stock.symbol) ? (
                        <Icon as={LuMoveUp}></Icon>
                      ) : (
                        <Icon as={LuMoveDown}></Icon>
                      )}

                      <Text>
                        {profitLoss(
                          renderStock(stock.symbol),
                          renderPrevDay(stock.symbol)
                        ) > 0
                          ? `+(${profitLoss(
                              renderStock(stock.symbol),
                              renderPrevDay(stock.symbol)
                            )})`
                          : `(${profitLoss(
                              renderStock(stock.symbol),
                              renderPrevDay(stock.symbol)
                            )})`}
                      </Text>
                      <Text>
                        {" "}
                        {renderPercentage(
                          renderStock(stock.symbol),
                          renderPrevDay(stock.symbol)
                        )}
                        %
                      </Text>
                    </HStack>
                  </Stack>
                )}
              </Stack>
            </HStack>
          </Stack>

          <HStack>
            <Button
              leftIcon={<Icon as={FaPlusCircle}></Icon>}
              bg={"purple.500"}
              fontSize={{
                base: "14px",
                md: "18px",
                lg: "18px",
              }}
            >
              Buy
            </Button>
            <Button
              leftIcon={<Icon as={FaMinusCircle}></Icon>}
              fontSize={{
                base: "14px",
                md: "18px",
                lg: "18px",
              }}
            >
              Sell
            </Button>
          </HStack>
        </HStack>
      </CustomCard>
    );
  })}
</>

);
};

export default PriceSection;

@Chethu I can see you’re using Vite.
Instead of just the development mode, have you tried checking your actual build output locally?

npm run build && npm run preview
or
npm run build && npx serve dist

Yes…I have tried the build output locally. Still data is not being fetched. I have even reviewed the network tab to check whether it’s making a call. The app is perfectly hitting the api and also receives 101 status code.But when I console the data I am getting false value. Also I get type=“ping” in messages section(network tab). In local host, initially I get false value in console but later data gets fetched

@Chethu Sorry, but your response is very unclear to me.

It’s due to the combinations like…

To help narrow down what may be happening, initially I just want to know where it is/isn’t happening.

Can you confirm under which of these it works and which it does not?

LOCAL -> npm run dev = ?

LOCAL -> npm run build && npm run preview = ?

LOCAL -> npm run build && npx serve dist = ?

NETLIFY - > npm run build (with 'dist' as Publish Directory) = ?

LOCAL → npm run dev = it works

LOCAL → npm run build && npm run preview = doesn’t work

LOCAL → npm run build && npx serve dist = doesn’t work

NETLIFY - > npm run build (with ‘dist’ as Publish Directory) = doesn’t work

@Chethu Great, that’s what I would expect, as the first one is different to the other three.

Vite doesn’t do precisely the same thing when in development mode as during a production build.

So you aren’t trying to solve an issue with the deployed site on Netlify.
You’re trying to solve a configuration/build issue with Vite.

You should continue to debug from that perspective, make appropriate changes and test with:
npm run build && npm run preview

Once you have your build output running correctly locally, you’ll find it also runs on Netlify.

Thanks for the help. I understood the problem.