How I Handle Pocketbase Fields Errors

As I’m using Pocketbase at work for a new project to collect applicant data, I need to handle field validation errors effectively. I want to use Pocketbase’s default error messages when creating or updating records in a collection. To achieve this, I wrote a function to extract error messages from fields when a Pocketbase error occurs.

import { ClientResponseError } from "pocketbase";

export function isFieldError(error: unknown, key: string) {
  return error instanceof ClientResponseError
    : null;

Note: ClientResponseError is the type of error that Pocketbase throws whenever an error occurs.

In this project’s case, I’m using Astro with React for the dynamic parts of the application.

I use this function with useMemo to manage field errors:

const fieldErrors = useMemo(() => {
  return {
    name: isFieldError(error, "name")
    // ... other fields in your collection
}, [error]);

Here’s an example of how to use it with NextUI:

// ...
  placeholder="Enter Name"
// ...

By using this approach, I can easily handle and display field-specific error messages.