Monsters tab is broken

[1nspir3d]

Current behavior:

Search for monsters doesn't work

When you try to search for a specific monster it just says No results

The tab itself is broken

When you scroll to a certain point (the last entity you'll see on the right-most column is Akiiki the Black ~ Jackalman Hero) it just crashes the page completely with following error:

TypeError: Cannot convert undefined or null to object
    at Function.entries (<anonymous>)
    at Details (Details.tsx:31:32)
    at Uh (react-dom.production.min.js:166:135)
    at Uk (react-dom.production.min.js:289:384)
    at Tk (react-dom.production.min.js:279:383)
    at Sk (react-dom.production.min.js:279:319)
    at Hk (react-dom.production.min.js:279:180)
    at Mk (react-dom.production.min.js:270:86)
    at Fk (react-dom.production.min.js:267:399)
    at J (scheduler.production.min.js:13:197)

Desired behavior:

• Search works for monsters
• Monsters tab doesn't crash on scrolling

[1nspir3d]

@rehevkor5 @fonsleenaars @HighbornHellest 👀

[Noiredd]

Still a problem in November 2025, confirmed on PC (Windows 10 22H2) on:

• MS Edge 141.0.3537.99
• Vivaldi 7.6.3797.63 (Stable channel) (64-bit)

and Vivaldi 7.6.3810.117 on Android (don't remember the system version).

[fonsleenaars]

Whooooooooooooooops, I'll try to get to this soon, only a few years late!

[Kormelad]

Issue Description

The issue is still here. I did a bit of digging and I believe the issue is in the code block of the Details.tsx file (components/Monsters/Monster/Details/Details.tsx):

const abilitiesList = Object.entries(abilities).map(([tag, skillLevel]) => ({
  ...skills[tag],
  level: skillLevel,
}));

Those abilities come from the parent Monster.ts component, which passes the props as in

<Details abilities={monster.abilities[difficulty]} ... />

There are 9 creatures that have an empty array of abilities, while all other creatures have 3 items in the abilities prop, 1 for each difficulty. Those are the "broken" creatures:

['tagMonsterName130', 'tagMonsterName1331', 'x2tagMonsterName193', 'x4tagEarthElemental', 'x4tagWaterElemental', 'x4tagWoodElemental', 'x4tagZazamankh', 'xtagDevName04', 'xtagDevName05']

I'm not sure if the fix should be applied to a parser, as it's just providing data in the specific format. But the frontend might be patched with something like that:

The fix I suggest.

components/Monsters/Monster/Details/Details.tsx

const abilitiesList = abilities && /* <-- The fix */ Object.entries(abilities).map(([tag, skillLevel]) => ({
  ...skills[tag],
  level: skillLevel,
}));

Given that the following code already has a lodash.isEmpty check, this fix should be suffice:

{!isEmpty(abilitiesList) && (...

P.S.

@fonsleenaars sorry for necro-tagging, but your website is still the most up-to-date tq-db we have. If there's a repo for frontend I can do a pull request there.

[fonsleenaars]

@Kormelad no problem, it's been poking at me in the back of my mind most days that I'd love to clean up some of it. I will try to get to some cleanup!

Thanks for the poke