Listening to event gives errors

[SmartChain-AI]

Current Behavior

So i'm using this to test for events https://github.com/orodio/flow-view-source/blob/master/src/pages/event.comp.js and it gives me the events I'm subscribed to. I'm using a polling rate of 3 seconds and was wondering how the heights are worked out for each poll because it seems like it skips some blocks. You can see in the screenshot the end of the last block range searched and the start of the next block range. What happens to the blocks in between? Also you can see it scans the same block range up to 3 times for some reason, why is that happening?

I'm also getting this problem that kills the event listening completely even though the rest call is wrapped in a try catch.

So many errors how is this done clean and for every block, no fail?

Expected Behavior

Expecting no errors

Steps To Reproduce

Using the following React script:

import * as fcl from "@onflow/fcl";
import { useState, useEffect } from "react";

function Tables() {
  const [eventError, setEventerror] = useState()
  const [events, setEvents] = useState([])
  let count = 0

  fcl.config({
    "accessNode.api": "https://rest-mainnet.onflow.org",
    "fcl.eventPollRate": 3000
  });

  const contractAddress = "4eb8a10cb9f87357";
  const contractName = "NFTStorefront";
  const eventName = "ListingAvailable";
  let queries = [{}]
  const eventKey = `A.${contractAddress}.${contractName}.${eventName}`;

  try {
    useEffect(() => {

      queries =
        fcl.events(eventKey).subscribe((event) => {
          if (event.nftType.typeID === 'A.329feb3ab062d289.UFC_NFT.NFT') {
            setEvents((oldEvents) => [...oldEvents, event])
          }
        }
        )
    }), [eventError]

  } catch (error) {
    count = count + 1
    setEventerror(count)
  }

  return (
<>
            <div>
              <div>Events: </div>
              <span>{eventKey}</span>
            </div>
            <h3>Events</h3>
            <ul>
              <li>
                <div>Oldest</div>
              </li>
              {!events.length && (
                <li>
                  <strong>No Events Yet</strong>
                </li>
              )}
              {events.map((d, i) => {
                return (
                  <li key={i}>
                    <pre>{JSON.stringify(d, null, 2)}</pre>
                  </li>
                )
              })}
              <li>
                <div>Newest</div>
              </li>
            </ul>
</>
  );
}

export default Tables;

Environment

- OS: Windows 11
- Node: v16.17.0
- npm: 9.6.2

Here is the code put on Netlify so you can see the errors https://flowevents.netlify.app/ if you wait a minute or two you will see the script breaks completely and event listening stops running

[aautem]

@SmartChain-AI did you ever figure out why the event listening is sometimes killed even though it's wrapped in a try/catch? I'm running into the same issue.

Related Discord thread w/ @jribbink: https://discord.com/channels/613813861610684416/1179900687258243102

There's actually some big changes coming to the fcl.events() feature. The previous implementation was fairly bug prone & used polling under the hood. However, the new implementation uses WebSockets to stream events instead and should be completely lossless & more responsive 🙂

Bad news: It's not currently available on mainnet. It's only on testnet so the changes have not yet been released to FCL.

For testnet, you can try it using a preview build of FCL (npm install @onflow/fcl@event-streaming)

Event streaming PR: https://github.com/onflow/fcl-js/pull/1794

[jribbink]

@aautem @SmartChain-AI WebSocket event streaming has been deployed to mainnet now, so the tagged branch should be working on both testnet & mainnet & the latest flow-cli emulator. I'll work towards getting this into the latest alpha tagged branch and hopefully a stable release in the near future.

[aautem]

@jribbink Wow, that was fast, thanks for the update!