`Something went wrong while processing your request.` while running a minimal demo

• Client version: "pocketbase": "^0.2.1",
• Server version: pocketbase version 0.3.2
• Client code:
  • vite

function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    PocketBaseClient.getFeedbacks().then(feedbacks => {
      console.log(feedbacks);
    }).catch(err => {
      console.log(err);
    });
  });

import PocketBase, { Record } from "pocketbase";

const client = new PocketBase(process.env.NODE_ENV === "production" ? process.env.PB_URL : "http://localhost:8090");

export class PocketBaseClient {
  static getFeedbacks = async (): Promise<Record[]> => {
    const records = await client.Records.getFullList("feedback", 200 /* batch size */, {
      sort: "-created",
    });

    return records;
  }
}

package.json:

{
  "name": "web",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "pocketbase": "^0.2.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.15",
    "@types/react-dom": "^18.0.6",
    "@vitejs/plugin-react": "^2.0.0",
    "typescript": "^4.6.4",
    "vite": "^3.0.0"
  }
}

Error stack:

ClientResponseError 0: Something went wrong while processing your request.
    at new i2 (ClientResponseError.ts:13:9)
    at Client.ts:175:23
    at async PocketBaseClient.getFeedbacks (index.ts:7:21)

The JSON response looks good:

{
  "page": 1,
  "perPage": 200,
  "totalItems": 1,
  "items": [
    {
      "@collectionId": "icxcxKTTpbM7iv9",
      "@collectionName": "feedback",
      "attachments": [
        "DsOmZWHtfBnCFAcXSQsn1RmswOykjuR0.png"
      ],
      "created": "2022-07-23 13:08:35.599",
      "email": "[e-mail]",
      "id": "rJJTW8mAXt6uoDk",
      "metadata": {
        "foo": 1
      },
      "updated": "2022-07-23 13:08:35.599"
    }
  ]
}

Now sure why there’s such an error ?

[ganigeorgiev]

@CM-IV I’ve cloned your repo and it seems that it is not a cors issue (or at least not directly).

Your code currently has a side effect - when you try to submit the edit or delete form, the native form submit event is not stopped/prevented and it is causing page refresh/redirect while the fetch call is being processed. There is an open “issue” in Firefox for that in https://bugzilla.mozilla.org/show_bug.cgi?id=1280189.

To fix it, you need to prevent the native browser form behavior and leave your javascript to handle the form submission, aka. you have to add e.preventDefault() to your onSubmit handlers. Here is for example the delContact:

    async function delContact(e) {
        e.preventDefault();

        try {
            await db.collection("contacts").delete(urlId);
    
            router.back();

            router.refresh();
        } catch (err) {
            /*@ts-ignore*/
            console.log(err.originalError);
        }
    }

[ganigeorgiev]

@CM-IV Hm, TypeError: NetworkError when attempting to fetch resource. is usually a CORS error and it is most likely caused because nextjs13 as far as I know uses their own custom fetch. I’ll try to find time tomorrow and will test the repo locally to see if I can reproduce it.