Update v0.0.5 */bouncers subpage empty

[v1rusnl]

When I want to go to the "Engines" tab, I get redirected to "https://cm.mydomain.com/bouncers" and the page is empty

20251206-1150-09.9032682.mp4

No errors in container log, but in Browser:

vendor-MpC7ldIv.js:32 TypeError: x.map is not a function
    at ge (Bouncers-Br9soK_9.js:1:4788)
    at Li (vendor-MpC7ldIv.js:30:16959)
    at Du (vendor-MpC7ldIv.js:32:3134)
    at vc (vendor-MpC7ldIv.js:32:44241)
    at pc (vendor-MpC7ldIv.js:32:39513)
    at Hd (vendor-MpC7ldIv.js:32:39444)
    at il (vendor-MpC7ldIv.js:32:39302)
    at Ku (vendor-MpC7ldIv.js:32:35719)
    at cc (vendor-MpC7ldIv.js:32:34675)
    at k (vendor-MpC7ldIv.js:17:1562)
Iu @ vendor-MpC7ldIv.js:32
Xa.n.callback @ vendor-MpC7ldIv.js:32
Io @ vendor-MpC7ldIv.js:30
Zo @ vendor-MpC7ldIv.js:32
ac @ vendor-MpC7ldIv.js:32
Vd @ vendor-MpC7ldIv.js:32
Kd @ vendor-MpC7ldIv.js:32
kt @ vendor-MpC7ldIv.js:32
cc @ vendor-MpC7ldIv.js:32
k @ vendor-MpC7ldIv.js:17
pn @ vendor-MpC7ldIv.js:17
vendor-MpC7ldIv.js:32 Uncaught TypeError: x.map is not a function
    at ge (Bouncers-Br9soK_9.js:1:4788)
    at Li (vendor-MpC7ldIv.js:30:16959)
    at Du (vendor-MpC7ldIv.js:32:3134)
    at vc (vendor-MpC7ldIv.js:32:44241)
    at pc (vendor-MpC7ldIv.js:32:39513)
    at Hd (vendor-MpC7ldIv.js:32:39444)
    at il (vendor-MpC7ldIv.js:32:39302)
    at Ku (vendor-MpC7ldIv.js:32:35719)
    at cc (vendor-MpC7ldIv.js:32:34675)
    at k (vendor-MpC7ldIv.js:17:1562)

Additionally, I updated from :dev image from end of november to 0.0.5, but the Dashboard shows Beta-v0.0.6.

[hhftechnology]

I know it's a weird bug. If you refresh it it goes away, I have tried different logic to iron it but not yet successfully done. I will see what I can do.

[v1rusnl]

I know it's a weird bug. If you refresh it it goes away, I have tried different logic to iron it but not yet successfully done. I will see what I can do.

I did not try to F5 😄 Now that you say it, it works.

[hhftechnology]

will figure out this annoying bug

[smoochy]

I was able to reproduce this on 2.2.0.

Problem:
When I navigate to the Engines page (/bouncers) from any other page inside the app, the page often renders blank. If I then do a full browser reload (F5) while already on /bouncers, the page loads correctly.

What Codex did to investigate:

• Reproduced the behavior in a running 2.2.0 instance.
• Inspected the frontend bundle shipped inside the container.
• Compared the built bundle with the upstream TypeScript source for the /bouncers route.
• Traced how the React Query cache is populated on the dashboard and then consumed on the Bouncers page.

Root cause:
The same React Query cache key, ['bouncers'], is used with incompatible data shapes.

• The dashboard stores the raw API payload under ['bouncers'], shaped like:
  { bouncers: [...], count: N }
• The /bouncers page uses the same query key, but later treats the result like a plain Bouncer[].

So after client-side navigation, the Bouncers page can receive the already-cached object from the dashboard instead of an array. That breaks rendering and results in a blank page. A full reload on /bouncers works because the page fetches fresh data for itself.

Concrete patch suggestion:
Normalize the cached value on the Bouncers page before rendering, instead of assuming the query data is always an array.

Example patch for web/src/pages/Bouncers.tsx:

function normalizeBouncers(raw: unknown): Bouncer[] {
  if (Array.isArray(raw)) return raw as Bouncer[]

  if (raw && typeof raw === 'object') {
    const obj = raw as Record<string, unknown>
    for (const value of Object.values(obj)) {
      if (Array.isArray(value)) return value as Bouncer[]
    }
  }

  return []
}

const { data: bouncers, isLoading, isError, error, refetch } = useQuery({
  queryKey: ['bouncers'],
  queryFn: async () => {
    const response = await api.crowdsec.getBouncers()
    return response.data.data
  },
  select: normalizeBouncers,
})

Alternative fix:
Use different query keys for the dashboard payload and the Bouncers page payload, so different shapes are never shared through the same cache entry.

Why Codex thinks the patch above is the safest minimal fix:

• it is small
• it is backward-compatible
• it fixes the client-side navigation case
• it does not require backend changes

Note:
AI assistance was used during the investigation to help inspect the shipped frontend bundle, compare it with the upstream source, and narrow the issue down to the React Query cache-key/data-shape mismatch.

[v1rusnl]

I can confirm that this fix works.

@smoochy Would you open a PR for @hhftechnology ? I built the 2.2.0 image with your fix and it's working great. But I don't want to steal your work

[smoochy]

I am not sure, if hhf would allow this, as actually none of what the fix contains is coming from myself. I just threw the error description at Codex and Codex did the rest. I do not understand any of how Typescript is working. So it is "AI slop". Some authors are ok with it, others are denying code coming from AI.

If they are ok with it, I will create a PR. Otherwise, they can fix it themselves and release a new version.

[hhftechnology]

@smoochy send a pr. I can read code. :). We are are not some reddit. We appreciate tools. AI is just a tool to make your life easy.

Branch pangolin.

[smoochy]

I added PR #67.

While trying to include https://github.com/hhftechnology/middleware-manager into my setup, I came across another issue, which I threw at Codex and which could be resolved with PR #69. Please doublecheck everything. As said, I'm vibecoding my way and just try to help you ship it faster, instead of having to write everything from scratch.

Feel free to take any code and adapt or correct it if it is necessary.

Kind Regards

[hhftechnology]

@v1rusnl @smoochy solved. merging it now