debugging 在下一个js应用程序中查找意外标记错误的位置

我正在尝试找出在哪里可以找到我的应用程序中的错误，该错误在我的浏览器控制台中报告如下：

Error: Unexpected token '<', "<!doctype "... is not valid JSON
    at new ApolloError (index.js?6610:29:1)
    at Object.error (QueryManager.js?7fcd:137:74)
    at notifySubscription (module.js?580a:137:1)
    at onNotify (module.js?580a:176:1)
    at SubscriptionObserver.error (module.js?580a:229:1)
    at Object.eval [as error] (asyncMap.js?b322:32:41)
    at notifySubscription (module.js?580a:137:1)
    at onNotify (module.js?580a:176:1)
    at SubscriptionObserver.error (module.js?580a:229:1)
    at eval (iteration.js?8d45:4:50)
    at Array.forEach (<anonymous>)
    at iterateObserversSafely (iteration.js?8d45:4:1)
    at Object.error (Concast.js?a4f8:36:43)
    at notifySubscription (module.js?580a:137:1)
    at onNotify (module.js?580a:176:1)
    at SubscriptionObserver.error (module.js?580a:229:1)
    at RetryableOperation.eval (retryLink.js?c650:55:1)
    at step (tslib.es6.js?f7a0:102:1)
    at Object.eval [as next] (tslib.es6.js?f7a0:83:46)
    at fulfilled (tslib.es6.js?f7a0:73:43)

这是一个下一代应用程序，所以我想我应该把对index.js的引用解释为对_app. tsx的引用。
我在那份文件里看不到一个流浪汉。

import * as React from "react"
// import { BrowserRouter } from "react-router-dom"
import { ApolloProvider } from "@apollo/client"
import { theme } from "@boilerplate/theme"
import { ChakraProvider } from "@chakra-ui/react"
import type { NextPage } from "next"
import type { AppProps } from "next/app"
import Head from "next/head"
import Script from "next/script"
// import { useRef } from 'react';

// import TawkMessengerReact from '@tawk.to/tawk-messenger-react';

import { useApollo } from "lib/apollo/client"

type NextPageWithLayout = NextPage & {
  getLayout?: (page: React.ReactElement) => React.ReactNode
}

type AppPropsWithLayout = AppProps & {
  Component: NextPageWithLayout
}

export default function BoilerplateApp(props: AppPropsWithLayout) {
  const { Component, pageProps } = props
  const apolloClient = useApollo(pageProps.initialApolloState)
  const getLayout = Component.getLayout ?? ((page) => page)
  
  return (
    <>
      <Head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      </Head>
      {/* <BrowserRouter> */}
      <ChakraProvider theme={theme}>
        <ApolloProvider client={apolloClient}>{getLayout(<Component {...pageProps} />)}</ApolloProvider>
      </ChakraProvider>
      {/* </BrowserRouter> */}
      {/* <Button onClick={handleMinimize}> Minimize the Chat </Button> */}

      <Script id="tawk" strategy="lazyOnload">
        {`
            var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
            (function(){
            var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
            s1.async=true;
            s1.src='https://embed.tawk.to/xx/xx';
            s1.charset='UTF-8';
            s1.setAttribute('crossorigin','*');
            s0.parentNode.insertBefore(s1,s0);
            })();  
        `}
      </Script>
     
      

      
    </>
  )
}

我的VS代码终端没有任何错误。
有谁能帮我找到错误的线索吗？当我运行local host时，页面会加载，但是当我填写一个表单在我的psql db中创建一个用户时，我没有得到任何响应-只是没有创建用户。
我已经找到this article，但仍然看不到我应该寻找的内容。
在chrome浏览器的源代码标签中，我可以看到register页面被标识出来（可能是问题的来源），该页面以doctype开头（后面是许多随机字符串）：

<!DOCTYPE html><html lang="en"><head><style data-next-hide-fouc="true">body{display:none}</style><noscript data-next-hide-fouc="true"><style>body{display:block}</style></noscript><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><meta name="next-head-count" content="2"/><meta name="theme-color" content="#000000"/><meta name="description" content="test"/><meta property="og:title" content="testing"/><meta property="og:description" content="test"/><link rel="preconnect" href="https://fonts.gstatic.com"/><link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&amp;display=swap" rel="stylesheet"/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills.js?ts=1663664583953"></script><script src="/_next/static/chunks/webpack.js?ts=1663664583953" defer=""></script><script src="/_next/static/chunks/main.js?ts=1663664583953" defer=""></script><script src="/_next/static/chunks/pages/_app.js?ts=1663664583953" defer=""></script><script src="/_next/static/chunks/pages/register.js?ts=1663664583953" defer=""></script><script src="/_next/static/development/_buildManifest.js?ts=1663664583953" defer=""></script><script src="/_next/static/development/_ssgManifest.js?ts=1663664583953" defer=""></script><script src="/_next/static/development/_middlewareManifest.js?ts=1663664583953" defer=""></script><noscript id="__next_css__DO_NOT_USE__"></noscript></head><body><script>(function setScript(initialValue) {
  var mql = window.matchMedia("(prefers-color-scheme: dark)");
  var systemPreference = mql.matches ? "dark" : "light";
  var persistedPreference = systemPreference;

  try {
    persistedPreference = localStorage.getItem("chakra-ui-color-mode");
  } catch (error) {
    console.log("Chakra UI: localStorage is not available. Color mode persistence might not work as expected");
  }

  var colorMode;

  if (persistedPreference) {
    colorMode = persistedPreference;
  } else if (initialValue === "system") {
    colorMode = systemPreference;
  } else {
    colorMode = initialValue != null ? initialValue : systemPreference;
  }

  if (colorMode) {
    /**
     * Keep in sync with `root.set() {@file ./color-mode.utils.ts}
     */
    document.documentElement.style.setProperty("--chakra-ui-color-mode", colorMode);
    document.documentElement.setAttribute("data-theme", colorMode);
  }

....它继续与许多随机脉轮的事情，然后结束如下：

</path></svg></a></div></div></div></div></div><span></span></div><script src="/_next/static/chunks/react-refresh.js?ts=1663664583953"></script><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/register","query":{},"buildId":"development","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>

在VS代码中，register表单包含JSON-在submit处理程序中，它包含：

const onSubmit = (data: RegisterInput) => {
        return form.handler(() => register({ variables: { data } }), {
          onSuccess: async (data) => {
            await fetch("/api/login", {
              method: "post",
              body: JSON.stringify({
                [LOGIN_TOKEN_KEY]: data.register.token,
                [LOGIN_REFRESH_TOKEN_KEY]: data.register.refreshToken,
              }),
            })
            client.writeQuery<MeQuery>({ query: MeDocument, data: { me: data.register.user } })
            router.replace(redirect || "/")
          },
        })

I think the advice from the stripe article linked above means I'm supposed to move that into a try block. When I try that, I get an error that says:

 const onSubmit = (data: RegisterInput) => {
    return form.handler(() => register({ variables: { data } }), {
      onSuccess: async (data) => {
        await fetch("/api/login", {
          method: "post",

          body:
         { try {
              JSON.stringify({
              [LOGIN_TOKEN_KEY]: data.register.token,
              [LOGIN_REFRESH_TOKEN_KEY]: data.register.refreshToken,
              }),
          },
          catch (error): void {
            console.log('Error parsing JSON:', error, data);
          }}
        }
         
          
        })
        client.writeQuery<MeQuery>({ query: MeDocument, data: { me: data.register.user } })
        router.replace(redirect || "/")
      },
    })

键入“{ try：{ JSON：JSON;“"：任何; }; catch（错误：任何）：无效;}“不能赋给类型”BodyInit|零值|未定义“对象文本只能指定已知属性，并且”try“在类型”Blob“中不存在|可读流|数组缓冲区视图|数组缓冲区|表单数据|URL搜索参数“。
我想我没有在提交处理程序中正确地合并try语句，但我不知道如何做得更好--在try块中，它都被copilot加了下划线--我想不出更好的方法来尝试编写它。
我还尝试在提交处理程序中的JSON.stringify块前面添加JSON.parse，如下所示：

body: JSON.parse(JSON.stringify({
            [LOGIN_TOKEN_KEY]: data.register.token,
            [LOGIN_REFRESH_TOKEN_KEY]: data.register.refreshToken,
          })),

但它没有改变任何东西-我仍然在浏览器中得到相同的错误消息。
我也尝试了如下（但没有区别-和github副驾驶不喜欢的代码-我不知道为什么）

body: try {
          JSON.parse(JSON.stringify({
              [LOGIN_TOKEN_KEY]: data.register.token,
              [LOGIN_REFRESH_TOKEN_KEY]: data.register.refreshToken,
           })
           ),
        }, catch (e) {
          console.log('error parsing json', e, data));
        },
        })

我看到了this post，并尝试了解决方案中建议的每一种方法，在注册表上-仍然找不到一种方法来解决这个问题。
在chrome的网络选项卡中，所有的状态类型都显示为200（ok），除了一个websocket字符串（我不知道该字符串是什么意思），即状态101。

debugging 在下一个js应用程序中查找意外标记错误的位置

1条答案

相关问题

热门标签

最新问答