(in promise) SyntaxError: Unexpected end of JSON input

[Elindo586]

Why am I getting this error on the live website?.. and how can I fix it?

Chrome console Error from live website:
(in promise) SyntaxError: Unexpected end of JSON input

Back end code:

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,
    });

    const stringResult = JSON.stringify(result.text);
    const stringResult22 = JSON.stringify(result.sourceDocuments[0].text);
    const parseResult = JSON.parse(stringResult);

    console.log(parseResult);

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

Front end 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);

    const searchRes = await response.json();
    console.log(searchRes.text);

    const botText = searchRes;

    console.log(botText);

    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]]

🤖

The "SyntaxError: Unexpected end of JSON input" error typically occurs when you're trying to parse an empty document or a document that is not properly formatted as JSON. In your case, it seems like the error might be occurring when you're trying to parse the response from your API call in your front-end code.

Here's the relevant part of your front-end code:

const searchRes = await response.json();
console.log(searchRes.text);

In this code, you're trying to parse the response from your API call as JSON. If the response is not properly formatted as JSON or if it's empty, this will throw the "Unexpected end of JSON input" error.

To fix this issue, you should add error handling to your API call to catch any errors that occur when parsing the response. Here's how you can do this:

try {
  const searchRes = await response.json();
  console.log(searchRes.text);
} catch (error) {
  console.error('Error parsing JSON:', error);
}

This code will catch any errors that occur when parsing the response and log them to the console, which should help you identify the source of the problem.

Additionally, you should also check your back-end code to make sure that it's always returning a valid JSON response. In your useStore4 function, you're stringifying result.text and result.sourceDocuments[0].text, and then parsing stringResult. If result.text or result.sourceDocuments[0].text are undefined or not properly formatted as JSON, this could be causing the error.

Here's the relevant part of your back-end code:

const stringResult = JSON.stringify(result.text);
const stringResult22 = JSON.stringify(result.sourceDocuments[0].text);
const parseResult = JSON.parse(stringResult);

To fix this issue, you should add checks to ensure that result.text and result.sourceDocuments[0].text are not undefined and are properly formatted as JSON before stringifying and parsing them.

Sources

• examples/src/agents/handle_parsing_error.ts

---

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.