search

TalismanSociety / talisman-web

Unlock the Paraverse with Talisman Portal. A Polkadot, Kusama & Parachain dashboard for the community.
https://app.talisman.xyz
GNU General Public License v3.0
84 stars 47 forks source link

React ErrorBoundary NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. #1129

Open sentry-io[bot] opened 3 months ago

sentry-io[bot] commented 3 months ago

Sentry Issue: PORTAL-62G

React ErrorBoundary NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
  at RouteErrorElement (../../src/components/widgets/ErrorBoundary.tsx:52:17)
  at Provider (../../src/libs/talisman/crowdloan.tsx:145:28)
  at Provider (../../src/libs/talisman/parachain.tsx:85:28)
  at Provider (../../src/libs/talisman/chainmeta.tsx:83:28)
  at Provider (../../src/libs/talisman/index.tsx:31:21)
...
(24 additional frame(s) were not displayed)

NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
  at Zj (../../../../node_modules/react-dom/cjs/react-dom.production.min.js:248:289)
  at Yj (../../../../node_modules/react-dom/cjs/react-dom.production.min.js:247:255)
  at Zj (../../../../node_modules/react-dom/cjs/react-dom.production.min.js:250:56)
  at ck (../../../../node_modules/react-dom/cjs/react-dom.production.min.js:251:315)
  at dk (../../../../node_modules/react-dom/cjs/react-dom.production.min.js:252:91)
...
(45 additional frame(s) were not displayed)
chidg commented 2 months ago

Hey @chrisling-dev I think you found a solution to this - could you advise?

chrisling-dev commented 2 months ago

Hey @chrisling-dev I think you found a solution to this - could you advise?

Hey so the problem and solution I found before was that translation extensions were messing up with react nodes, for example, this would throw the same error if you have translation software running:

<Button>
  <Spinner />
  Do something
</Button>

And it could be easily fixed by wrapping string:

<Button>
  <Spinner />
  <span>Do something</span>
</Button>

However I dont think this is the same thing as the code throwing this does not have any text rendering. But I did notice that the extension has some script that is invoking these functions and am wondering if it could be those scripts

// inject before head element so that it executes before everything else
const parent = document?.head || document?.documentElement
parent?.insertBefore(script, parent.children[0])
parent?.removeChild(script)

Other than these 2 places to look, I have no idea what is wrong here, potentially the user might have some other extensions that is trying to remove something?