Why am I console log errors from Google chrome on my live website for this code?

[Elindo586]

The website is being hosted by Vercel using Next.js

Error from Google Chrome for live website:

/api/usestore4:1     Failed to load resource: the server responded with a status of 405 ()
_app-f5f1ec2f5ee53bc1.js:5 Error parsing SyntaxError: Unexpected end of JSON input
    at proceedMessage (_app-f5f1ec2f5ee53bc1.js:5:85407)
_app-f5f1ec2f5ee53bc1.js:5 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'text')
    at proceedMessage (_app-f5f1ec2f5ee53bc1.js:5:85482)

Full backendcode:

import { OpenAI } from "langchain/llms/openai";

import { TextLoader } from "langchain/document_loaders/fs/text";
import { CharacterTextSplitter } from "langchain/text_splitter";
import { OpenAIEmbeddings } from "langchain/embeddings/openai";
import { RetrievalQAChain, loadQAStuffChain } from "langchain/chains";
import { FaissStore } from "langchain/vectorstores/faiss";

let loader;
let docs;
let splitter;
let documents;
let embeddings1;
let vectorstore;

let model;

let embeddings;
let vectoreStore;

let chain;
let result;

const useStore4 = async (req, res) => {
  if (req.method === "POST") {
    loader = new TextLoader("./documents/restaurant.txt");
    docs = await loader.load();
    splitter = new CharacterTextSplitter({
      chunkSize: 200,
      chunkOverlap: 50,
    });
    documents = await splitter.splitDocuments(docs);
    embeddings1 = new OpenAIEmbeddings();
    vectorstore = await FaissStore.fromDocuments(documents, embeddings1);
    await vectorstore.save("./");

    const message = req.body.newText;
    const firstOne = req.body.firstMsg;

    console.log(message);
    if (firstOne) {
      model = new OpenAI({
        modelName: "gpt-4",
        openAIApiKey: process.env.OPENAI_API_KEY,
        temperature: 0,
      });

      embeddings = new OpenAIEmbeddings();
      vectoreStore = await FaissStore.load("./", embeddings);

      chain = new RetrievalQAChain({
        combineDocumentsChain: loadQAStuffChain(model),
        retriever: vectoreStore.asRetriever(),
        returnSourceDocuments: true,
      });
    }

    result = await chain.call({
      query: message,
    });

    console.log(result);

    return res.status(200).json(result);
  } else {
    res.status(405).json({ say: "Only POST is allowed" });
  }
};
export default useStore4;

Full frontend code:

"use client";

import React, { useState, useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import { store } from "./store";
import Link from "next/link";
import Image from "next/image";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";

import { v4 as uuid } from "uuid";
import {
  addMessage,
  addBotMessage,
  setSelectedConversationId,
  setConversationHistory,
  setConversations,
  deleteConversations,
} from "./dashboard-slice";

const MessageInput = () => {
  const [text, setText] = useState("");
  const [ui, setUi] = useState(false);
  const [firstMsg, setFirstMsg] = useState(true);

  // get session history

  // const sessionId = localStorage.getItem("sessionId");

  // socket.on("session-details", (data) => {
  //   const { sessionId, conversations } = data;

  // (data) => {
  //   const { sessionId, conversations } = data;
  //   localStorage.setItem("sessionId", sessionId);
  //   store.dispatch(setConversations(conversations));
  // };

  const dispatch = useDispatch();

  const selectedConversationId = useSelector(
    (state) => state.dashboard.selectedConversationId
  );

  useEffect(() => {
    if (ui) {
      dispatch(deleteConversations());
      document.getElementById("chat-container-id").style.display = "none";
      document.getElementById("chat-button-id").style.display = "block";
      setUi(false);
    }
  }, [ui, dispatch]);

  const proceedMessage = async () => {
    const message = {
      aiMessage: false,
      text,
      id: uuid(),
      animate: false,
    };
    console.log(message);
    const newText = JSON.stringify(message.text);
    console.log(newText);

    const conversationId =
      selectedConversationId === null ? uuid() : selectedConversationId;

    // append to local store
    dispatch(
      addMessage({
        conversationId,
        message,
      })
    );
    dispatch(setSelectedConversationId(conversationId));

    // send to server

    let data = {
      newText,
      firstMsg,
    };

    console.log(data);
    const response = await fetch("/api/usestore4", {
      method: "POST",
      headers: {
        Accept: "application/json, text/plain, */*",
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data),
    });
    // reset value of input
    setText("");
    setFirstMsg(false);

    let searchRes;

    try {
      searchRes = await response.json();
      console.log(searchRes.text);
    } catch (err) {
      console.log("Error parsing", err);
    }

    const botText = searchRes.text;

    const botMessage = {
      aiMessage: true,
      text: botText,
      id: uuid(),
      animate: true,
    };

    dispatch(
      addBotMessage({
        conversationId,
        botMessage,
      })
    );
    dispatch(setSelectedConversationId(conversationId));

    setText("");
  };

  // const handleSubmit = (e) => {
  //   if (text.length > 0) {
  //     // e.preventDefault();
  //     console.log("Sending");
  //     let data = {
  //       text,
  //     };
  //   }
  // };

  const handleSendMessage = () => {
    if (text.length > 0) {
      // handleSubmit();
      proceedMessage();
    }
  };
  const handleKeyPressed = (event) => {
    if (event.key === "Enter" && text.length > 0) {
      // handleSubmit();
      proceedMessage();
    }
  };

  return (
    <Container>
      <Row>
        <input
          className="input-container"
          type="text"
          id="chat-input"
          name="chat-input"
          placeholder="Enter your message"
          value={text}
          onChange={(e) => setText(e.target.value)}
          onKeyDown={handleKeyPressed}
        ></input>
      </Row>
      <Row className="btn-container">
        <Col>
          <button
            disabled={ui}
            onClick={() => setUi(true)}
            className="btn-close2"
          >
            Close
          </button>
        </Col>
        <Col>
          <button className="btn-send" onClick={handleSendMessage}>
            Send
          </button>
        </Col>
      </Row>
    </Container>
  );
};

export default MessageInput;

[dosubot[bot]]

🤖

Based on the error messages you provided, it seems like there are a couple of issues happening here.

1. The first error message /api/usestore4:1 Failed to load resource: the server responded with a status of 405 () indicates that a request was made to the /api/usestore4 endpoint using a method that is not supported by that endpoint. In your backend code, you've specified that only POST requests should be allowed. If any other type of request (GET, PUT, DELETE, etc.) is made to that endpoint, it will respond with a 405 status code. Make sure that all requests made to this endpoint from your frontend code are using the POST method.

2. The second error message Error parsing SyntaxError: Unexpected end of JSON input suggests that there's an issue with parsing a JSON response. This could be due to the server returning an unexpected value or not returning a proper JSON response. In your backend code, you're returning a JSON response with the result of the chain.call() method. Make sure that this method is always returning a valid JSON object.

3. The third error message Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'text') indicates that you're trying to access the text property of an undefined object. This error is likely related to the previous error. If the server is not returning a proper JSON response, then searchRes would be undefined, and trying to access searchRes.text would throw this error. Make sure that the server is always returning a valid JSON response.

To debug these issues, you could add more error handling and logging to your code. For example, in your backend code, you could add a try/catch block around the chain.call() method to catch any errors that occur and log them. In your frontend code, you could add a catch block to your fetch call to catch any errors that occur when making the request or parsing the response.

If these suggestions don't resolve your issue, please provide more information about the exact circumstances under which these errors occur. Are they happening on every request, or only on certain requests? Are there any other error messages or logs that might provide more context?

Sources

• environment_tests/test-exports-vercel/src/pages/index.tsx

---

This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

If you want to continue the conversation, start your reply with @dosu-bot.