fix: Unexpected end of JSON input in Webhook Form (#4214)

## Description

closes #4050

This PR modifies the response handling logic to attempt parsing all
resource data as JSON. If an error occurs during parsing, an error
response is only returned if the Accept header is explicitly set to
application/json.

204 responses are skipped too.


## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file

Author: istarkov

packages/sdk/src/resource-loader.test.ts

@@ -0,0 +1,77 @@
+import { describe, expect, test, beforeEach, jest } from "@jest/globals";
+
+import { loadResource } from "./resource-loader";
+import type { ResourceRequest } from "./schema/resources";
+
+// Mock the fetch function
+
+describe("loadResource", () => {
+  let mockFetch: jest.Mock<typeof fetch>;
+
+  beforeEach(() => {
+    mockFetch = jest.fn();
+    jest.clearAllMocks();
+  });
+
+  test("should successfully fetch a resource and return a JSON response", async () => {
+    const mockResponse = new Response(JSON.stringify({ key: "value" }), {
+      status: 200,
+    });
+    mockFetch.mockResolvedValue(mockResponse);
+
+    const resourceRequest: ResourceRequest = {
+      id: "1",
+      name: "resource",
+      url: "https://example.com/resource",
+      method: "get",
+      headers: [],
+      body: undefined,
+    };
+
+    const result = await loadResource(mockFetch, resourceRequest);
+
+    expect(mockFetch).toHaveBeenCalledWith("https://example.com/resource", {
+      method: "get",
+      headers: new Headers(),
+    });
+
+    expect(result).toEqual({
+      data: {
+        key: "value",
+      },
+      ok: true,
+      status: 200,
+      statusText: "",
+    });
+  });
+
+  test("should fetch resource successfully with non-JSON response", async () => {
+    const mockResponse = new Response("nonjson", {
+      status: 200,
+    });
+    mockFetch.mockResolvedValue(mockResponse);
+
+    const resourceRequest: ResourceRequest = {
+      id: "1",
+      name: "resource",
+      url: "https://example.com/resource",
+      method: "get",
+      headers: [],
+      body: undefined,
+    };
+
+    const result = await loadResource(mockFetch, resourceRequest);
+
+    expect(mockFetch).toHaveBeenCalledWith("https://example.com/resource", {
+      method: "get",
+      headers: new Headers(),
+    });
+
+    expect(result).toEqual({
+      data: "nonjson",
+      ok: true,
+      status: 200,
+      statusText: "",
+    });
+  });
+});

packages/sdk/src/resource-loader.ts

@@ -24,24 +24,30 @@ export const loadResource = async (
     // cloudflare workers fail when fetching url contains spaces
     // even though new URL suppose to trim them on parsing by spec
     const response = await customFetch(url.trim(), requestInit);
-    let data;
-    if (
-      response.ok &&
-      // accept json by default and when specified explicitly
-      (response.headers.has("content-type") === false ||
-        response.headers.get("content-type")?.includes("application/json"))
-    ) {
-      data = await response.json();
-    } else {
-      data = await response.text();
+
+    let data = await response.text();
+
+    try {
+      // If it looks like JSON and quacks like JSON, then it probably is JSON.
+      data = JSON.parse(data);
+    } catch {
+      // ignore, leave data as text
     }
+
+    if (!response.ok) {
+      console.error(
+        `Failed to load resource: ${url} - ${response.status}: ${JSON.stringify(data).slice(0, 300)}`
+      );
+    }
+
     return {
       ok: response.ok,
       data,
       status: response.status,
       statusText: response.statusText,
     };
   } catch (error) {
+    console.error(error);
     const message = (error as unknown as Error).message;
     return {
       ok: false,