[Violation] 'message' handler took 215ms

[jamalsoueidan]

How frequently does the bug occur?

Always

Description

I call a function in atlas mongodb, and then I receive these errors, if I also wait for message in the chat, I also receive these kind of errors right before i receive the messages, sometime the app continue to work, but sometime suddently it freeze.

Stacktrace & log output

(17) [Violation] 'setTimeout' handler took <N>ms
realm-js-wasm.mjs:8 [Violation] 'message' handler took 215ms
Scrollbar.tsx:40 [Violation] Handling of 'wheel' input event was delayed for 4383 ms due to main thread being busy. Consider marking event handler as 'passive' to make the page more responsive.
Scrollbar.tsx:40 [Violation] Handling of 'wheel' input event was delayed for 4383 ms due to main thread being busy. Consider marking event handler as 'passive' to make the page more responsive.
realm-js-wasm.mjs:8 [Violation] 'message' handler took 604ms

### Can you reproduce the bug?

Always

### Reproduction Steps

Very simple setup, nothing fancy

```js
import { Box, Input, Loader, Stack } from "@mantine/core";
import { getHotkeyHandler } from "@mantine/hooks";
import { useUser } from "@realm/react";
import { useEffect, useRef, useState } from "react";
import { useMessages } from "../sources/useMessages";
import { MessageImage } from "./messages-types/MessageImage";
import { MessageText } from "./messages-types/MessageText";
import { MessageUnknown } from "./messages-types/MessageUnknown";

export function Messages({ conversation }: { conversation: string }) {
  const user = useUser();

  const [value, setValue] = useState("");
  const [sendingMessages, setSendingMessages] = useState<string[]>([]);
  const { messages } = useMessages({
    conversation,
  });
  const previousMessageLength = useRef(messages.length);
  const messagesEndRef = useRef<null | HTMLDivElement>(null);

  const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: "instant" });
  };

  useEffect(() => {
    setTimeout(() => {
      scrollToBottom();
    }, 250);
  }, [messages]);

  useEffect(() => {
    setTimeout(() => {
      scrollToBottom();
    }, 250);
  }, []);

  const handleSubmit = () => {
    const currentValue = value;
    previousMessageLength.current = messages.length;
    setValue("");

    // Add to sending messages list
    setSendingMessages((prev) => [...prev, currentValue]);

    user.functions["func-send-messages"]({
      business_phone_number_id: "364826260",
      messaging_product: "whatsapp",
      recipient_type: "individual",
      to: "0012331317428",
      type: "text",
      text: {
        preview_url: true,
        body: currentValue,
      },
    }).finally(() => {
      setSendingMessages((prev) => prev.filter((msg) => msg !== currentValue));
    });
  };

  return (
    <>
      <div
        style={{
          overflowX: "hidden",
          overflowY: "scroll",
          backgroundColor: "gray",
          height: "calc(100% - 70px)",
          padding: "20px",
        }}
      >
        <Stack gap="5px">
          {messages.map((msg) => {
            if (msg.type === "text") {
              return <MessageText msg={msg} key={msg._id as any} />;
            } else if (msg.type === "image") {
              return <MessageImage msg={msg} key={msg._id as any} />;
            } else {
              return <MessageUnknown msg={msg} key={msg._id as any} />;
            }
          })}
        </Stack>
        <div ref={messagesEndRef} />
      </div>
      <Box p="md">
        <Input
          size="md"
          placeholder="Type a message"
          radius="md"
          autoFocus
          value={value}
          rightSection={
            sendingMessages.length ? <Loader color="blue" size="sm" /> : <></>
          }
          onChange={(e) => setValue(e.target.value)}
          onKeyDown={getHotkeyHandler([["Enter", handleSubmit]])}
        />
      </Box>
    </>
  );
}

Version

12.0.0-browser.2

What services are you using?

Atlas App Services: Functions or GraphQL or DataAPI etc

Are you using encryption?

No

Platform OS and version(s)

Windows

Build environment

No response

Cocoapods version

No response

[sync-by-unito]

➤ PM Bot commented:

Jira ticket: RJS-2881

[jamalsoueidan]

The project was using the old ReactDOM.render, so I changed it to createRoot. and now it works.