Novu•2mo ago

Not receiving notifications on websocket

We're using @novu/react and we're not receiving any messages on the websocket. We render the Inbox as our povider:

export function NotificationsProvider(props: PropsWithChildren) {
  const navigate = useNavigate();
  const { data: me } = useSuspenseQuery(trpc.customer.me.queryOptions());

  return (
    <Inbox
      applicationIdentifier={import.meta.env.VITE_NOVU_APP_ID}
      backendUrl="https://eu.api.novu.co"
      socketUrl="wss://eu.ws.novu.co"
      subscriberHash={me.notificationSubscriberHash}
      subscriber={me.uid}
      routerPush={(path: string) => navigate({ to: path })}
      appearance={appearance}
    >
      {props.children}
    </Inbox>
  );
}

export function NotificationsProvider(props: PropsWithChildren) {
  const navigate = useNavigate();
  const { data: me } = useSuspenseQuery(trpc.customer.me.queryOptions());

  return (
    <Inbox
      applicationIdentifier={import.meta.env.VITE_NOVU_APP_ID}
      backendUrl="https://eu.api.novu.co"
      socketUrl="wss://eu.ws.novu.co"
      subscriberHash={me.notificationSubscriberHash}
      subscriber={me.uid}
      routerPush={(path: string) => navigate({ to: path })}
      appearance={appearance}
    >
      {props.children}
    </Inbox>
  );
}

It establishes a connection and exchange ping/pong messages. But we do not receive a message for that subscriber when a notification is delivered. The user has to refresh the page to see the notifications. I would appreciate some help debugging this! 🙏

9 Replies

Pawan Jain•2mo ago

Axel

Could you please share the @novu/react version?

Axel DicksonOP•2mo ago

Thanks @Pawan Jain , we use version 3.4.0

Pawan Jain•2mo ago

Axel,

Could you try updating these two: - Update the @novu/react to the latest version 3.10.1 - Update the websocket URL with wss://eu.socket.novu.co

Axel DicksonOP•2mo ago

@Pawan Jain that fixed it thanks! 🌟 We see a warning in the browser that fires every time we open the <Notifications />: "cleanups created outside a createRoot or render will never be run" Is this something to worry about? We've built our custom popover:

function Notifications() {
  const { isOpen, onOpen, onClose } = useDisclosure();

  return (
    <Popover
      placement="bottom-end"
      gutter={12}
      isLazy
      isOpen={isOpen}
      onOpen={onOpen}
      onClose={onClose}
    >
      <PopoverTrigger>
        <span>
          <Bell
            renderBell={(unreadCount) => (
              <NotificationsButton unreadCount={unreadCount.total} />
            )}
          />
        </span>
      </PopoverTrigger>
      <PopoverContent
        maxH="80vh"
        overflowY="auto"
        minW="350px"
        overflowX="hidden"
        bg="secondary.modernNeutrals.grainOfSand"
      >
        <NovuNotifications onNotificationClick={onClose} />
      </PopoverContent>
    </Popover>
  );
}

function Notifications() {
  const { isOpen, onOpen, onClose } = useDisclosure();

  return (
    <Popover
      placement="bottom-end"
      gutter={12}
      isLazy
      isOpen={isOpen}
      onOpen={onOpen}
      onClose={onClose}
    >
      <PopoverTrigger>
        <span>
          <Bell
            renderBell={(unreadCount) => (
              <NotificationsButton unreadCount={unreadCount.total} />
            )}
          />
        </span>
      </PopoverTrigger>
      <PopoverContent
        maxH="80vh"
        overflowY="auto"
        minW="350px"
        overflowX="hidden"
        bg="secondary.modernNeutrals.grainOfSand"
      >
        <NovuNotifications onNotificationClick={onClose} />
      </PopoverContent>
    </Popover>
  );
}

Pawan Jain•2mo ago

Axel,

I will update you on this after checking with team. Give me some time

Axel DicksonOP•2mo ago

Thanks @Pawan Jain ! After updating we experience a new issue. When some users click a notification inside the custom popover an uncaught promise is thrown and we don't navigate. "TypeError: e.notification.read is not a function". Could it be that the routerPush interfers somehow with our onNotificationClick callback that we pass?

Pawan Jain•2mo ago

Could you please share full implementation of <NovuNotifications /> component

Axel DicksonOP•2mo ago

@Pawan Jain <NovuNotifications /> is just an alias:

import { Bell, Notifications as NovuNotifications } from '@novu/react';

import { Bell, Notifications as NovuNotifications } from '@novu/react';

Pawan Jain•2mo ago

Hi Axel

Are you wrapping <Popover> component in <Inbox /> component?

Gaming

Programming

Not receiving notifications on websocket

Did you find this page helpful?