Realtime issue - "UnprocessableEntity: %{messages: [%{payload: [\"can't be blank\"]}]}"

therealtimhawkins · 2025-08-25T06:12:12.816Z

Hi there, I am having issues with my Realtime setup. I am wrapping my realtime channel in a client and calling it with a sendMessage function. This system is working fine in some cases but not others. In the Supabase realtime logs I am getting the error: "UnprocessableEntity: %{messages: [%{payload: [\"can't be blank\"]}]}" I am getting the same error locally and in production. I am calling my realtime client like this: ``` const channel = createRealtimeClient({ channelId: `${organizationId}:realtime`, defaultEvent: `validation-progress:updated`, token, }); channel.sendMessage({ payload: { message: "polygon-boundaries" }, }); ``` Grateful for any help! And really great product, appreciate the work you do 🙏

T

therealtimhawkinsOP•8/25/25, 6:12 AM

My realtime client looks like this:

import { RealtimeChannel } from "@supabase/supabase-js";
import { Logger } from "@xylo/types";

import { createSupabaseClient } from "./client";

// eslint-disable-next-line @typescript-eslint/no-explicit-any
type Payload = { [key: string]: any };

class RealtimeClient {
  channel: RealtimeChannel;
  defaultEvent: string;
  metadata: Payload;
  logger?: Logger;

  constructor({
    channelId,
    defaultEvent,
    metadata,
    token,
    logger,
  }: {
    channelId: string;
    defaultEvent: string;
    token: string;
    metadata?: Payload;
    logger?: Logger;
  }) {
    const supabase = createSupabaseClient(token);
    this.channel = supabase.channel(channelId);
    this.channel.subscribe();
    this.defaultEvent = defaultEvent;
    this.metadata = metadata || {};
    this.logger = logger;
  }

  sendMessage({ event, payload }: { event?: string; payload: Payload }) {
    this.logger?.info(
      { event: event || this.defaultEvent, payload },
      "Sending realtime message",
    );

    this.channel.send({
      type: "broadcast",
      event: event || this.defaultEvent,
      ...this.metadata,
      ...payload,
    });
  }

  unsubscribe() {
    this.channel.unsubscribe();
  }
}

export const createRealtimeClient = ({
  channelId,
  defaultEvent,
  token,
  metadata,
  logger,
}: {
  channelId: string;
  defaultEvent: string;
  token: string;
  metadata?: Payload;
  logger?: Logger;
}) => {
  return new RealtimeClient({
    channelId,
    defaultEvent,
    metadata,
    token,
    logger,
  });
};

import { RealtimeChannel } from "@supabase/supabase-js";
import { Logger } from "@xylo/types";

import { createSupabaseClient } from "./client";

// eslint-disable-next-line @typescript-eslint/no-explicit-any
type Payload = { [key: string]: any };

class RealtimeClient {
  channel: RealtimeChannel;
  defaultEvent: string;
  metadata: Payload;
  logger?: Logger;

  constructor({
    channelId,
    defaultEvent,
    metadata,
    token,
    logger,
  }: {
    channelId: string;
    defaultEvent: string;
    token: string;
    metadata?: Payload;
    logger?: Logger;
  }) {
    const supabase = createSupabaseClient(token);
    this.channel = supabase.channel(channelId);
    this.channel.subscribe();
    this.defaultEvent = defaultEvent;
    this.metadata = metadata || {};
    this.logger = logger;
  }

  sendMessage({ event, payload }: { event?: string; payload: Payload }) {
    this.logger?.info(
      { event: event || this.defaultEvent, payload },
      "Sending realtime message",
    );

    this.channel.send({
      type: "broadcast",
      event: event || this.defaultEvent,
      ...this.metadata,
      ...payload,
    });
  }

  unsubscribe() {
    this.channel.unsubscribe();
  }
}

export const createRealtimeClient = ({
  channelId,
  defaultEvent,
  token,
  metadata,
  logger,
}: {
  channelId: string;
  defaultEvent: string;
  token: string;
  metadata?: Payload;
  logger?: Logger;
}) => {
  return new RealtimeClient({
    channelId,
    defaultEvent,
    metadata,
    token,
    logger,
  });
};

import { RealtimeChannel } from "@supabase/supabase-js";
import { Logger } from "@xylo/types";

import { createSupabaseClient } from "./client";

// eslint-disable-next-line @typescript-eslint/no-explicit-any
type Payload = { [key: string]: any };

class RealtimeClient {
  channel: RealtimeChannel;
  defaultEvent: string;
  metadata: Payload;
  logger?: Logger;

  constructor({
    channelId,
    defaultEvent,
    metadata,
    token,
    logger,
  }: {
    channelId: string;
    defaultEvent: string;
    token: string;
    metadata?: Payload;
    logger?: Logger;
  }) {
    const supabase = createSupabaseClient(token);
    this.channel = supabase.channel(channelId);
    this.channel.subscribe();
    this.defaultEvent = defaultEvent;
    this.metadata = metadata || {};
    this.logger = logger;
  }

  sendMessage({ event, payload }: { event?: string; payload: Payload }) {
    this.logger?.info(
      { event: event || this.defaultEvent, payload },
      "Sending realtime message",
    );

    this.channel.send({
      type: "broadcast",
      event: event || this.defaultEvent,
      ...this.metadata,
      ...payload,
    });
  }

  unsubscribe() {
    this.channel.unsubscribe();
  }
}

export const createRealtimeClient = ({
  channelId,
  defaultEvent,
  token,
  metadata,
  logger,
}: {
  channelId: string;
  defaultEvent: string;
  token: string;
  metadata?: Payload;
  logger?: Logger;
}) => {
  return new RealtimeClient({
    channelId,
    defaultEvent,
    metadata,
    token,
    logger,
  });
};

import { RealtimeChannel } from "@supabase/supabase-js";
import { Logger } from "@xylo/types";

import { createSupabaseClient } from "./client";

// eslint-disable-next-line @typescript-eslint/no-explicit-any
type Payload = { [key: string]: any };

class RealtimeClient {
  channel: RealtimeChannel;
  defaultEvent: string;
  metadata: Payload;
  logger?: Logger;

  constructor({
    channelId,
    defaultEvent,
    metadata,
    token,
    logger,
  }: {
    channelId: string;
    defaultEvent: string;
    token: string;
    metadata?: Payload;
    logger?: Logger;
  }) {
    const supabase = createSupabaseClient(token);
    this.channel = supabase.channel(channelId);
    this.channel.subscribe();
    this.defaultEvent = defaultEvent;
    this.metadata = metadata || {};
    this.logger = logger;
  }

  sendMessage({ event, payload }: { event?: string; payload: Payload }) {
    this.logger?.info(
      { event: event || this.defaultEvent, payload },
      "Sending realtime message",
    );

    this.channel.send({
      type: "broadcast",
      event: event || this.defaultEvent,
      ...this.metadata,
      ...payload,
    });
  }

  unsubscribe() {
    this.channel.unsubscribe();
  }
}

export const createRealtimeClient = ({
  channelId,
  defaultEvent,
  token,
  metadata,
  logger,
}: {
  channelId: string;
  defaultEvent: string;
  token: string;
  metadata?: Payload;
  logger?: Logger;
}) => {
  return new RealtimeClient({
    channelId,
    defaultEvent,
    metadata,
    token,
    logger,
  });
};

I

inder•8/25/25, 6:36 AM

i haven't ran the code but I believe the issue is that you're spreading the payload object itself. Instead you need to pass an object to payload, it should either be

payload:payload

payload:payload

payload:payload

payload:payload, or if you want to add some common property in the payload then

payload:{...payload,common:""}

payload:{...payload,common:""}

payload:{...payload,common:""}

payload:{...payload,common:""}

    this.channel.send({
      type: "broadcast",
      event: event || this.defaultEvent,
      ...this.metadata,
      ...payload, // this is the issue
    });

    this.channel.send({
      type: "broadcast",
      event: event || this.defaultEvent,
      ...this.metadata,
      ...payload, // this is the issue
    });

    this.channel.send({
      type: "broadcast",
      event: event || this.defaultEvent,
      ...this.metadata,
      ...payload, // this is the issue
    });

    this.channel.send({
      type: "broadcast",
      event: event || this.defaultEvent,
      ...this.metadata,
      ...payload, // this is the issue
    });

T

therealtimhawkinsOP•8/25/25, 7:21 AM

Great will try now. It is strange that this works in some cases though? Or could that be just to do with the shape of the payload that I am passing?

Ttherealtimhawkins Great will try now. It is strange that this works in some cases though? Or could...

I

inder•8/25/25, 7:49 AM

If you were passing the payload this way, then your code would've worked

 channel.sendMessage({
        payload: {payload: { message: "polygon-boundaries" }},
      });

 channel.sendMessage({
        payload: {payload: { message: "polygon-boundaries" }},
      });

 channel.sendMessage({
        payload: {payload: { message: "polygon-boundaries" }},
      });

 channel.sendMessage({
        payload: {payload: { message: "polygon-boundaries" }},
      });

T

therealtimhawkinsOP•8/25/25, 12:37 PM

Thanks mate, that did the trick

T

therealtimhawkinsOP•8/25/25, 12:37 PM

Its strange that it was working intermittently before but

Iinder If you were passing the payload this way, then your code would've worked ```js ...

I

inder•8/25/25, 7:43 PM

The only 2 reasons I can think of is either this payload was being passed, which I believe is highly unlikely or the one which I think must have happened is that you didn't use the spread operator before

Realtime issue - "UnprocessableEntity: %{messages: [%{payload: [\"can't be blank\"]}]}"

Similar Threads

Similar Threads

Similar Threads