Too many ping requests cause app to stuck

Forge Forge UI Kit and Custom UI
1

Hi,

We have an app that provides gadgets for dashboards. In this app, we have two gadget types, one of them is a regular gadget and the other one is a gadget controlling the data shown in the other type of gadgets. When we change filters on the gadget controlling the data shown, it transmits current filters to other gadgets who use it as source. To transmit this information, we emit events with @forge/bridge. However, sometimes charts stuck and we observe lots of ping requests sent in the network tab. We wonder whether this might be a bug in events of @forge/bridge. What might be the cause of this issue?
Best regards,
Odin

2

Hi Odin

I’ll let the team involved with @forge/bridge know about this but in the mean time would you be able to provide a minimum reproducible example of what you’re talking about?

We won’t be able to investigate too far without it.

Cheers
Joshua

3

Hi,
Thank you. I tried to come up with a minimal example. Here is my manifest.yml file, I have two gadget modules:

`modules:
  jira:dashboardGadget:
    - key: trial-dashboard-hello-world-gadget
      title: emit-dashboard
      description: A hello world dashboard gadget.
      thumbnail: https://developer.atlassian.com/platform/forge/images/icons/issue-panel-icon.svg
      resource: main
      resolver:
        function: resolver
      edit:
        resource: main
    - key: hello-world-gadget
      title: catch-dashboard
      description: A hello world dashboard gadget.
      thumbnail: https://developer.atlassian.com/platform/forge/images/icons/issue-panel-icon.svg
      resource: main
      resolver:
        function: resolver
      edit:
        resource: other
  function:
    - key: resolver
      handler: index.handler
resources:
  - key: main
    path: static/hello-world/build
  - key: other
    path: static/simple-search-gadget/build
permissions:
  content:
    styles:
      - unsafe-inline
app:
  id: ari:cloud:ecosystem::app/1162bff5-b4fe-40e4-a766-19abeb8640ea
`

emit-dashboard View.js and Edit.js files:

import Button from "@atlaskit/button";
import {events} from "@forge/bridge";
export default function View(){
    return <div>
        <Button onClick={async () => {
            await events.emit("test", {
                content: "jlkjkljklj",
            })
        }}>
            Emit event
        </Button>
    </div>;
}

catch-dashboard View.js and Edit.js files:

import Button from "@atlaskit/button";
import {events} from "@forge/bridge";
import {useState} from "react";
export default function View(){
    const [content, setContent] = useState(null);
    events.on("test", (payload) => setContent(payload));
    return <div>
        {JSON.stringify(content ?? {})}
    </div>;
}

When I add those two gadgets to the same dashboard, even without clicking the emit event button actually, I got many request show up in the network tab:

image
image1919×975 143 KB

4

The events API doesn’t make any network requests, it communicates locally over the iframe postMessage API.

I believe the ping messages you are seeing come from Jira itself.

You can check this by running a similar page but without the app present. Are there less ping messages in those cases?

5

Yes, without the gadgets coming from the app, I can only see a few ping messages.

6

Hi Odin,

This issue is in your app. You’re calling events.on("test", (payload) => setContent(payload)); on every render of your View component, and every time new content is emitted it rerenders so you end up creating a large number of event subscribers. If you setup your subscriptions inside a useEffect hook that only reruns when it should and returns a cleanup function then it should work.

Cheers,
Stephen.

1 Like
7

Hi,
Thanks for pointing it out, that fixed the issue.
Kind regards,
Odin