Img project fail to deploy on Cloudflare
Yesterday, I shared my portfolio with the Kaiyuanshe group. While discussing my img site, I encountered the first issue – images are supposed to zoom in when clicked, but they actually open in a new tab.
I checked the Git commits and reverted them one by one until I successfully resolved the issue. The problem stemmed from my attempt to implement view transitions using "@view-transition", inspired by an Astro blog post titled "Zero-JavaScript View Transitions", which is not supported in my current browser.
Just when I believed I had resolved all issues, I stumbled upon another problem – all the alt texts I had assigned to images had vanished. Subsequently, upon examining the Cloudflare Pages deployment logs, I discovered the errors being displayed:
123:58:47.472 generating static routes
223:58:47.492 15:58:47 ▶ src/pages/internet.astro
323:58:48.324 15:58:47 └─ /internet/index.htmlSyntaxError: Unexpected token 'o', "[object Obj"... is not valid JSON
423:58:48.324 at JSON.parse (<anonymous>)
523:58:48.324 at altTexts (file:///opt/buildhome/repo/dist/chunks/_layout_Dry1hoQ2.mjs:1045:19)
623:58:48.324 at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
723:58:48.325 at async file:///opt/buildhome/repo/dist/chunks/_layout_Dry1hoQ2.mjs:1050:23
823:58:48.364 (+872ms)
923:58:48.366 15:58:48 ▶ src/pages/index.astro
1023:58:48.548 15:58:48 └─ /index.htmlSyntaxError: Unexpected token 'o', "[object Obj"... is not valid JSON
1123:58:48.549 at JSON.parse (<anonymous>)
1223:58:48.549 at altTexts (file:///opt/buildhome/repo/dist/chunks/_layout_Dry1hoQ2.mjs:1045:19)
1323:58:48.549 at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
1423:58:48.549 at async file:///opt/buildhome/repo/dist/chunks/_layout_Dry1hoQ2.mjs:1050:23
1523:58:48.628 (+262ms)
1623:58:48.628 15:58:48 ✓ Completed in 1.16s.At first, I was perplexed and unable to comprehend why this error had arisen. Nevertheless, I managed to identity the problematic code, which resembled the following:
1import Cloudflare from 'cloudflare';
2import dotenv from 'dotenv';
3dotenv.config();
4
5const client = new Cloudflare({
6 apiToken: process.env.CF_KV_API_TOKEN,
7});
8
9const kvOptions = {
10 account_id: 'xxx',
11};
12const altTexts = async () => {
13 try {
14 const data = await client.kv.namespaces.values.get(
15 'xxx',
16 'img-altTexts',
17 kvOptions,
18 );
19 return JSON.parse(data);
20 } catch (error) {
21 console.error(error);
22 return [];
23 }
24};
25
26const altTextData = await altTexts();I didn't know how to debug this. With the help of , added console.log(data), it get normal result locally but unexpected Response() object on Cloudflare:
Uncertain about how to debug this problem, I sought help from @luojiyin1987. Together, we inserted console.log(data), which successfully produced the desired outcome during local testing. However, upon deployment on Cloudflare, an unexpected Response() object was returned:
123:00:19.726 15:00:19 ▶ src/pages/index.astro
223:00:20.016 15:00:19 └─ /index.htmlResponse {
323:00:20.016 size: 0,
423:00:20.017 timeout: 0,
523:00:20.017 [Symbol(Body internals)]: {
623:00:20.017 body: PassThrough {
723:00:20.017 _events: [Object],
823:00:20.017 _readableState: [ReadableState],
923:00:20.017 _writableState: [WritableState],
1023:00:20.017 allowHalfOpen: true,
1123:00:20.017 _maxListeners: undefined,
1223:00:20.018 _eventsCount: 5,
1323:00:20.018 [Symbol(shapeMode)]: true,
1423:00:20.018 [Symbol(kCapture)]: false,
1523:00:20.018 [Symbol(kCallback)]: null
1623:00:20.018 },
1723:00:20.018 disturbed: false,
1823:00:20.018 error: null
1923:00:20.018 },
2023:00:20.018 [Symbol(Response internals)]: {
2123:00:20.019 url: 'https://api.cloudflare.com/client/v4/accounts/account_id/storage/kv/namespaces/namespace_id/values/img-altTexts',
2223:00:20.019 status: 200,
2323:00:20.019 statusText: 'OK',
2423:00:20.019 headers: Headers { [Symbol(map)]: [Object: null prototype] },
2523:00:20.019 counter: 0
2623:00:20.019 }
2723:00:20.019 }
2823:00:20.019 SyntaxError: Unexpected token 'o', "[object Response]" is not valid JSON
2923:00:20.020 at JSON.parse (<anonymous>)
3023:00:20.020 at altTexts (file:///opt/buildhome/repo/dist/chunks/_layout_FKCzc6Aa.mjs:1050:19)
3123:00:20.020 at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
3223:00:20.020 at async file:///opt/buildhome/repo/dist/chunks/_layout_FKCzc6Aa.mjs:1056:23
3323:00:20.078 (+352ms)I researched JSON.parse(), which converts a string containing text (string, boolean, JSON, array) into corresponding data types (string, boolean, JSON, array). It doesn't support trailing commas or single quotes. In contrast, JSON.stringify() is used to convert objects or other data types into strings.
Following this, @luojiyin1987 suggested that utilizing the Cloudflare REST API might be a better approach. Consequently, I commenced updating the code, and the final version is provided below:
1import fetch from 'node-fetch';
2import dotenv from 'dotenv';
3
4dotenv.config();
5
6interface AltTextItem {
7 name: string;
8 altText: string;
9}
10
11const url =
12 'https://api.cloudflare.com/client/v4/accounts/account_id/storage/kv/namespaces/namespace_id/values/img-altTexts';
13
14const options = {
15 method: 'GET',
16 headers: {
17 'Content-Type': 'application/json',
18 Authorization: `Bearer ${process.env.CF_KV_API_TOKEN}`,
19 },
20};
21
22const altTexts = async (): Promise<AltTextItem[]> => {
23 try {
24 const response = await fetch(url, options);
25 if (!response.ok) throw new Error('Network response was not ok');
26 const data = (await response.json()) as AltTextItem[];
27 return data;
28 } catch (error) {
29 console.error(
30 'There was a problem with the fetch problem operation:',
31 error,
32 );
33 return [];
34 }
35};
36
37const altTextData = await altTexts();To get this code spend me hours time. After this process of problem solving, I have some thoughts:
- Pure is better. REST API better than SDK. Don't have much time to dig the Cloduflare SDK, just use REST API.
- When solving the problem, @luojiyin1987 made me realized that my JS foundation is weak, need more work on it. I feel a little shame about it.
- When I couldn't seek the right solution, I feel panic and inconfident about myself, and hate the problem which made me so uncomfortable. Then I persuade myself, made me blieve that If I want to make progress, this kind of situation will be more common. When I adopted in this, I will chanllenge more difficult problems to make progress.
Investing substantial time in refining the code underscored valuable insights:
- Simple is better. Using REST API is preferable to SDK. Due to time constraints, opted for REST API over Cloudflare SDK.
- Collaboration with @luojiyin1987 revealed gaps in my JavaScript skills, prompting a realization of the need for improvement. Experience prompted a sense of embarrassment.
- Initial struggle with finding the right solution led to feelings of panic and self-doubt. Despite discomfort, realized such situations are necessary for growth. Embracing challenges will enable progerss.
Question
How to find where the bug is?