JSON error when trying to parse response data 🌐
Closed this issue · 7 comments
Describe the bug
I have 2 Issues on the CMS. Each contains one or more articles. When I first ran my app with everything set up, I could access the slug page of both of the Issues. But after a while, I am getting these errors without making any changes to the codebase. I am getting SyntaxError: Failed to parsed response body as JSON: Unexpected non-whitespace character after JSON at position 178 (line 1 column 179) at JSON.parse (<anonymous>) and Failed to parsed response body as JSON: Unexpected token '<', "<script>se"... is not valid JSON at JSON.parse (<anonymous>) and Failed to parsed response body as JSON: Unexpected token '�', "�webpack/l"... is not valid JSON. The strange thing is I can only access one of the Issue but the other one is showing this error. Moreover, the error seems to fix itself when I try to visit after sometime.
To Reproduce
The problem occurs randomly.
Steps to reproduce the behavior:
- Github repo - https://github.com/ShayokhShorfuddin/sanity-query-issue
Expected behavior
Being able to visit each Issue's slug page without error.
Screenshots
Video of error
2024-09-25.10-56-56.mp4
Which versions of Sanity are you using?
^3.58.0
What operating system are you using?
Windows 11
Which versions of Node.js / npm are you running?
v10.8.1 and v22.3.0
Additional context
Since the errors seem to appear and disappear after a duration of time, I have a feeling its related to Time based cache revalidation of next. Not sure thoug
Hi! I took a look at this and I'm unable to reproduce the issue. The API appears to be returning data as expected and I'm unable to trigger the error using the linked repo. Is there anything else you can think of which is unique about your setup?
✅ Update - I got it fixed by removing the { next: { revalidate: 120 } and adding { cache: "no-store" }. Apparently, it was a cache issue for some reason. Despite the issue being solved, I am now worried about hitting the free tier quota sooner. Without the time based cache revalidation, everytime the user visits/refreshes the page, my CDN API limit increases.
Is there anything I can do to prevent that? My site content is not expected to change frequently. Maybe once in a few weeks.
Sure! If your content is that static, you could consider refactoring to a static website (see https://www.sanity.io/static-websites/build-static-website for more detail). Also, the free tier currently provides 1 million api cdn requests per month. It's worth doing some projections to see how many requests your site makes per visit and how many users you expect per day.
I'm going to close this, but please join our Slack if you need any more advice!
How was this issue fixed? I still get this issue with below error
rc/request/browser/fetchXhr.ts:103:13)
22 | function tryParse(body: any) {
23 | try {
24 | return JSON.parse(body)
| ^
25 | } catch (err: any) {
26 | err.message =Failed to parsed response body as JSON: ${err.message}
27 | throw err
⨯ Error: Failed to fetch PRODUCTS.
digest: "157826243"
Maybe Sanity can't fetch PRODUCTS from the CMS. Make sure to double-check if your backend is okay.
My backend looks fine, If I refresh the browser I get the data, however when I make changes on the code and save it again, it crashes
export const PRODUCTS_QUERY = defineQuery(
*[_type =='products']{name, slug, description, images, price, category, quantity, unit, stock, isFeatured, sku, brand, tag }
);
export const getProducts = async () => {
try {
const data = await client.fetch(PRODUCTS_QUERY);
console.log(data);
return data;
} catch (error) {
console.error("Error fetching PRODUCTS:", error);
throw new Error("Failed to fetch PRODUCTS.");
}
};