8000 [selfhost][desktop] Account button issue in sidebar-menu-footer · Issue #68 · colanode/colanode · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content
[selfhost][desktop] Account button issue in sidebar-menu-footer #68
New issue
New issue
Closed
#76
Closed
[selfhost][desktop] Account button issue in sidebar-menu-footer#68
#76
@eljonny

Description

@eljonny
eljonny
opened on Jun 16, 2025

Hello!
I've been debugging the account button not showing up, and ran into something interesting.
I will preface this by saying I don't have a lot of experience with React, more Angular and Vue.
I followed the app render process and for some reason, React is removing the img tag in the button through the sidebar-menu-footer rendering process.

Here is the stack trace at the moment of removal during that process:

removeChild (react-dom-client.development.js:19359)
runWithFiberInDEV (react-dom-client.development.js:1519)
commitDeletionEffectsOnFiber (react-dom-client.development.js:12914)
recursivelyTraverseMutationEffects (react-dom-client.development.js:13113)
commitMutationEffectsOnFiber (react-dom-client.development.js:13134)
recursivelyTraverseMutationEffects (react-dom-client.development.js:13123)
commitMutationEffectsOnFiber (react-dom-client.development.js:13134)
recursivelyTraverseMutationEffects (react-dom-client.development.js:13123)
commitMutationEffectsOnFiber (react-dom-client.development.js:13347)
recursivelyTraverseMutationEffects (react-dom-client.development.js:13123)
commitMutationEffectsOnFiber (react-dom-client.development.js:13134)
recursivelyTraverseMutationEffects (react-dom-client.development.js:13123)
com
A8CB
mitMutationEffectsOnFiber (react-dom-client.development.js:13134)
recursivelyTraverseMutationEffects (react-dom-client.development.js:13123)
commitMutationEffectsOnFiber (react-dom-client.development.js:13134)
recursivelyTraverseMutationEffects (react-dom-client.development.js:13123)
commitMutationEffectsOnFiber (react-dom-client.development.js:13134)
recursivelyTraverseMutationEffects (react-dom-client.development.js:13123)
commitMutationEffectsOnFiber (react-dom-client.development.js:13134)
recursivelyTraverseMutationEffects (react-dom-client.development.js:13123)
commitMutationEffectsOnFiber (react-dom-client.development.js:13134)
recursivelyTraverseMutationEffects (react-dom-client.development.js:13123)
commitMutationEffectsOnFiber (react-dom-client.development.js:13134)
recursivelyTraverseMutationEffects (react-dom-client.development.js:13123)
commitMutationEffectsOnFiber (react-dom-client.development.js:13134)
recursivelyTraverseMutationEffects (react-dom-client.development.js:13123)
commitMutationEffectsOnFiber (react-dom-client.development.js:13134)
recursivelyTraverseMutationEffects (react-dom-client.development.js:13123)
commitMutationEffectsOnFiber (react-dom-client.development.js:13134)
recursivelyTraverseMutationEffects (react-dom-client.development.js:13123)
commitMutationEffectsOnFiber (react-dom-client.development.js:13562)
recursivelyTraverseMutationEffects (react-dom-client.development.js:13123)
commitMutationEffectsOnFiber (react-dom-client.development.js:13134)
recursivelyTraverseMutationEffects (react-dom-client.development.js:13123)
commitMutationEffectsOnFiber (react-dom-client.development.js:13562)
recursivelyTraverseMutationEffects (react-dom-client.development.js:13123)
commitMutationEffectsOnFiber (react-dom-client.development.js:13134)
recursivelyTraverseMutationEffects (react-dom-client.development.js:13123)
commitMutationEffectsOnFiber (react-dom-client.development.js:13562)
recursivelyTraverseMutationEffects (react-dom-client.development.js:13123)
commitMutationEffectsOnFiber (react-dom-client.development.js:13134)
recursivelyTraverseMutationEffects (react-dom-client.development.js:13123)
commitMutationEffectsOnFiber (react-dom-client.development.js:13134)
recursivelyTraverseMutationEffects (react-dom-client.development.js:13123)
commitMutationEffectsOnFiber (react-dom-client.development.js:13134)
recursivelyTraverseMutationEffects (react-dom-client.development.js:13123)
commitMutationEffectsOnFiber (react-dom-client.development.js:13562)
recursivelyTraverseMutationEffects (react-dom-client.development.js:13123)
commitMutationEffectsOnFiber (react-dom-client.development.js:13134)
recursivelyTraverseMutationEffects (react-dom-client.development.js:13123)
commitMutationEffectsOnFiber (react-dom-client.development.js:13134)
recursivelyTraverseMutationEffects (react-dom-client.development.js:13123)
commitMutationEffectsOnFiber (react-dom-client.development.js:13134)
recursivelyTraverseMutationEffects (react-dom-client.development.js:13123)
commitMutationEffectsOnFiber (react-dom-client.development.js:13134)
recursivelyTraverseMutationEffects (react-dom-client.development.js:13123)
commitMutationEffectsOnFiber (react-dom-client.development.js:13347)
recursivelyTraverseMutationEffects (react-dom-client.development.js:13123)
commitMutationEffectsOnFiber (react-dom-client.development.js:13134)
recursivelyTraverseMutationEffects (react-dom-client.development.js:13123)
commitMutationEffectsOnFiber (react-dom-client.development.js:13347)
recursivelyTraverseMutationEffects (react-dom-client.development.js:13123)
commitMutationEffectsOnFiber (react-dom-client.development.js:13134)
recursivelyTraverseMutationEffects (react-dom-client.development.js:13123)
commitMutationEffectsOnFiber (react-dom-client.development.js:13347)
recursivelyTraverseMutationEffects (react-dom-client.development.js:13123)
commitMutationEffectsOnFiber (react-dom-client.development.js:13150)
recursivelyTraverseMutationEffects (react-dom-client.development.js:13123)
commitMutationEffectsOnFiber (react-dom-client.development.js:13347)
recursivelyTraverseMutationEffects (react-dom-client.development.js:13123)
commitMutationEffectsOnFiber (react-dom-client.development.js:13562)
recursivelyTraverseMutationEffects (react-dom-client.development.js:13123)
commitMutationEffectsOnFiber (react-dom-client.development.js:13134)
recursivelyTraverseMutationEffects (react-dom-client.development.js:13123)
commitMutationEffectsOnFiber (react-dom-client.development.js:13562)
recursivelyTraverseMutationEffects (react-dom-client.development.js:13123)
commitMutationEffectsOnFiber (react-dom-client.development.js:13134)
recursivelyTraverseMutationEffects (react-dom-client.development.js:13123)
commitMutationEffectsOnFiber (react-dom-client.development.js:13562)
recursivelyTraverseMutationEffects (react-dom-client.development.js:13123)
commitMutationEffectsOnFiber (react-dom-client.development.js:13134)
recursivelyTraverseMutationEffects (react-dom-client.development.js:13123)
commitMutationEffectsOnFiber (react-dom-client.development.js:13562)
recursivelyTraverseMutationEffects (react-dom-client.development.js:13123)
commitMutationEffectsOnFiber (react-dom-client.development.js:13134)
recursivelyTraverseMutationEffects (react-dom-client.development.js:13123)
commitMutationEffectsOnFiber (react-dom-client.development.js:13562)
recursivelyTraverseMutationEffects (react-dom-client.development.js:13123)
commitMutationEffectsOnFiber (react-dom-client.development.js:13134)
recursivelyTraverseMutationEffects (react-dom-client.development.js:13123)
commitMutationEffectsOnFiber (react-dom-client.development.js:13562)
recursivelyTraverseMutationEffects (react-dom-client.development.js:13123)
commitMutationEffectsOnFiber (react-dom-client.development.js:13134)
recursivelyTraverseMutationEffects (react-dom-client.development.js:13123)
commitMutationEffectsOnFiber (react-dom-client.development.js:13562)
recursivelyTraverseMutationEffects (react-dom-client.development.js:13123)
commitMutationEffectsOnFiber (react-dom-client.development.js:13134)
recursivelyTraverseMutationEffects (react-dom-client.development.js:13123)
commitMutationEffectsOnFiber (react-dom-client.development.js:13134)
recursivelyTraverseMutationEffects (react-dom-client.development.js:13123)
commitMutationEffectsOnFiber (react-dom-client.development.js:13134)
recursivelyTraverseMutationEffects (react-dom-client.development.js:13123)
commitMutationEffectsOnFiber (react-dom-client.development.js:13562)
recursivelyTraverseMutationEffects (react-dom-client.development.js:13123)
commitMutationEffectsOnFiber (react-dom-client.development.js:13134)
recursivelyTraverseMutationEffects (react-dom-client.development.js:13123)
commitMutationEffectsOnFiber (react-dom-client.development.js:13562)
recursivelyTraverseMutationEffects (react-dom-client.development.js:13123)
commitMutationEffectsOnFiber (react-dom-client.development.js:13134)
recursivelyTraverseMutationEffects (react-dom-client.development.js:13123)
commitMutationEffectsOnFiber (react-dom-client.development.js:13134)
recursivelyTraverseMutationEffects (react-dom-client.development.js:13123)
commitMutationEffectsOnFiber (react-dom-client.development.js:13134)
recursivelyTraverseMutationEffects (react-dom-client.development.js:13123)
commitMutationEffectsOnFiber (react-dom-client.development.js:13405)
flushMutationEffects (react-dom-client.development.js:15426)
commitRoot (react-dom-client.development.js:15401)
commitRootWhenReady (react-dom-client.development.js:14652)
performWorkOnRoot (react-dom-client.development.js:14575)
performSyncWorkOnRoot (react-dom-client.development.js:16231)
flushSyncWorkAcrossRoots_impl (react-dom-client.development.js:16079)
processRootScheduleInMicrotask (react-dom-client.development.js:16116)
(anonymous) (react-dom-client.development.js:16250)
<img>
exports.jsxDEV (react-jsx-dev-runtime.development.js:346)
AvatarImage (avatar-image.tsx:34)
react-stack-bottom-frame (react-dom-client.development.js:23863)
renderWithHooks (react-dom-client.development.js:5529)
updateFunctionComponent (react-dom-client.development.js:8897)
beginWork (react-dom-client.development.js:10522)
runWithFiberInDEV (react-dom-client.development.js:1519)
performUnitOfWork (react-dom-client.development.js:15132)
workLoopSync (react-dom-client.development.js:14956)
renderRootSync (react-dom-client.development.js:14936)
performWorkOnRoot (react-dom-client.development.js:14419)
performSyncWorkOnRoot (react-dom-client.development.js:16231)
flushSyncWorkAcrossRoots_impl (react-dom-client.development.js:16079)
processRootScheduleInMicrotask (react-dom-client.development.js:16116)
(anonymous) (react-dom-client.development.js:16250)
<AvatarImage>
exports.jsxDEV (react-jsx-dev-runtime.development.js:346)
Avatar (avatar.tsx:34)
react-stack-bottom-frame (react-dom-client.development.js:23863)
renderWithHooks (react-dom-client.development.js:5529)
updateFunctionComponent (react-dom-client.development.js:8897)
beginWork (react-dom-client.development.js:10522)
runWithFiberInDEV (react-dom-client.development.js:1519)
performUnitOfWork (react-dom-client.development.js:15132)
workLoopSync (react-dom-client.development.js:14956)
renderRootSync (react-dom-client.development.js:14936)
performWorkOnRoot (react-dom-client.development.js:14419)
performSyncWorkOnRoot (react-dom-client.development.js:16231)
flushSyncWorkAcrossRoots_impl (react-dom-client.development.js:16079)
processRootScheduleInMicrotask (react-dom-client.development.js:16116)
(anonymous) (react-dom-client.development.js:16250)
<Avatar>
exports.jsxDEV (react-jsx-dev-runtime.development.js:346)
SidebarMenuFooter (sidebar-menu-footer.tsx:50)
react-stack-bottom-frame (react-dom-client.development.js:23863)
renderWithHooks (react-dom-client.development.js:5529)
updateFunctionComponent (react-dom-client.development.js:8897)
beginWork (react-dom-client.development.js:10522)
runWithFiberInDEV (react-dom-client.development.js:1519)
performUnitOfWork (react-dom-client.development.js:15132)
workLoopSync (react-dom-client.development.js:14956)
renderRootSync (react-dom-client.development.js:14936)
performWorkOnRoot (react-dom-client.development.js:14419)
performSyncWorkOnRoot (react-dom-client.development.js:16231)
flushSyncWorkAcrossRoots_impl (react-dom-client.development.js:16079)
processRootScheduleInMicrotask (react-dom-client.development.js:16116)
(anonymous) (react-dom-client.development.js:16250)
<SidebarMenuFooter>
exports.jsxDEV (react-jsx-dev-runtime.development.js:346)
SidebarMenu (sidebar-menu.tsx:48)
react-stack-bottom-frame (react-dom-client.development.js:23863)
renderWithHooks (react-dom-client.development.js:5529)
updateFunctionComponent (react-dom-client.development.js:8897)
beginWork (react-dom-client.development.js:10522)
runWithFiberInDEV (react-dom-client.development.js:1519)
performUnitOfWork (react-dom-client.development.js:15132)
workLoopSync (react-dom-client.development.js:14956)
renderRootSync (react-dom-client.development.js:14936)
performWorkOnRoot (react-dom-client.development.js:14419)
performSyncWorkOnRoot (react-dom-client.development.js:16231)
flushSyncWorkAcrossRoots_impl (react-dom-client.development.js:16079)
processRootScheduleInMicrotask (react-dom-client.development.js:16116)
(anonymous) (react-dom-client.development.js:16250)
<SidebarMenu>
exports.jsxDEV (react-jsx-dev-runtime.development.js:346)
Sidebar (sidebar.tsx:14)
react-stack-bottom-frame (react-dom-client.development.js:23863)
renderWithHooks (react-dom-client.development.js:5529)
updateFunctionComponent (react-dom-client.development.js:8897)
beginWork (react-dom-client.development.js:10522)
runWithFiberInDEV (react-dom-client.development.js:1519)
performUnitOfWork (react-dom-client.development.js:15132)
workLoopSync (react-dom-client.development.js:14956)
renderRootSync (react-dom-client.development.js:14936)
performWorkOnRoot (react-dom-client.development.js:14419)
performSyncWorkOnRoot (react-dom-client.development.js:16231)
flushSyncWorkAcrossRoots_impl (react-dom-client.development.js:16079)
processRootScheduleInMicrotask (react-dom-client.development.js:16116)
(anonymous) (react-dom-client.development.js:16250)
<Sidebar>
exports.jsxDEV (react-jsx-dev-runtime.development.js:346)
Layout (layout.tsx:95)
react-stack-bottom-frame (react-dom-client.development.js:23863)
renderWithHooks (react-dom-client.development.js:5529)
updateFunctionComponent (react-dom-client.development.js:8897)
beginWork (react-dom-client.development.js:10522)
runWithFiberInDEV (react-dom-client.development.js:1519)
performUnitOfWork (react-dom-client.development.js:15132)
workLoopSync (react-dom-client.development.js:14956)
renderRootSync (react-dom-client.development.js:14936)
performWorkOnRoot (react-dom-client.development.js:14419)
performSyncWorkOnRoot (react-dom-client.development.js:16231)
flushSyncWorkAcrossRoots_impl (react-dom-client.development.js:16079)
processRootScheduleInMicrotask (react-dom-client.development.js:16116)
(anonymous) (react-dom-client.development.js:16250)
<Layout>
exports.jsxDEV (react-jsx-dev-runtime.development.js:346)
Workspace (workspace.tsx:75)
react-stack-bottom-frame (react-dom-client.development.js:23863)
renderWithHooks (react-dom-client.development.js:5529)
updateFunctionComponent (react-dom-client.development.js:8897)
beginWork (react-dom-client.development.js:10522)
runWithFiberInDEV (react-dom-client.development.js:1519)
performUnitOfWork (react-dom-client.development.js:15132)
workLoopSync (react-dom-client.development.js:14956)
renderRootSync (react-dom-client.development.js:14936)
performWorkOnRoot (react-dom-client.development.js:14419)
performSyncWorkOnRoot (react-dom-client.development.js:16231)
flushSyncWorkAcrossRoots_impl (react-dom-client.development.js:16079)
processRootScheduleInMicrotask (react-dom-client.development.js:16116)
(anonymous) (react-dom-client.development.js:16250)
<Workspace>
exports.jsxDEV (react-jsx-dev-runtime.development.js:346)
Account (account.tsx:77)
react-stack-bottom-frame (react-dom-client.development.js:23863)
renderWithHooks (react-dom-client.development.js:5529)
updateFunctionComponent (react-dom-client.development.js:8897)
beginWork (react-dom-client.development.js:10522)
runWithFiberInDEV (react-dom-client.development.js:1519)
performUnitOfWork (react-dom-client.development.js:15132)
workLoopSync (react-dom-client.development.js:14956)
renderRootSync (react-dom-client.development.js:14936)
performWorkOnRoot (react-dom-client.development.js:14419)
performSyncWorkOnRoot (react-dom-client.development.js:16231)
flushSyncWorkAcrossRoots_impl (react-dom-client.development.js:16079)
processRootScheduleInMicrotask (react-dom-client.development.js:16116)
(anonymous) (react-dom-client.development.js:16250)
<Account>
exports.jsxDEV (react-jsx-dev-runtime.development.js:346)
App (app.tsx:93)
react-stack-bottom-frame (react-dom-client.development.js:23863)
renderWithHooks (react-dom-client.development.js:5529)
updateFunctionComponent (react-dom-client.development.js:8897)
beginWork (react-dom-client.development.js:10522)
runWithFiberInDEV (react-dom-client.development.js:1519)
performUnitOfWork (react-dom-client.development.js:15132)
workLoopSync (react-dom-client.development.js:14956)
renderRootSync (react-dom-client.development.js:14936)
performWorkOnRoot (react-dom-client.development.js:14419)
performSyncWorkOnRoot (react-dom-client.development.js:16231)
flushSyncWorkAcrossRoots_impl (react-dom-client.development.js:16079)
processRootScheduleInMicrotask (react-dom-client.development.js:16116)
(anonymous) (react-dom-client.development.js:16250)
<App>
exports.jsxDEV (react-jsx-dev-runtime.development.js:346)
RootProvider (root-provider.tsx:66)
react-stack-bottom-frame (react-dom-client.development.js:23863)
renderWithHooks (react-dom-client.development.js:5529)
updateFunctionComponent (react-dom-client.development.js:8897)
beginWork (react-dom-client.development.js:10522)
runWithFiberInDEV (react-dom-client.development.js:1519)
performUnitOfWork (react-dom-client.development.js:15132)
workLoopSync (react-dom-client.development.js:14956)
renderRootSync (react-dom-client.development.js:14936)
performWorkOnRoot (react-dom-client.development.js:14419)
performWorkOnRootViaSchedulerTask (react-dom-client.development.js:16216)
performWorkUntilDeadline (scheduler.development.js:45)
<RootProvider>
exports.jsxDEV (react-jsx-dev-runtime.development.js:346)
Root (root.tsx:9)
react-stack-bottom-frame (react-dom-client.development.js:23863)
renderWithHooks (react-dom-client.development.js:5529)
updateFunctionComponent (react-dom-client.development.js:8897)
beginWork (react-dom-client.development.js:10522)
runWithFiberInDEV (react-dom-client.development.js:1519)
performUnitOfWork (react-dom-client.development.js:15132)
workLoopSync (react-dom-client.development.js:14956)
renderRootSync (react-dom-client.development.js:14936)
performWorkOnRoot (react-dom-client.development.js:14419)
performWorkOnRootViaSchedulerTask (react-dom-client.development.js:16216)
performWorkUntilDeadline (scheduler.development.js:45)
<Root>
exports.jsxDEV (react-jsx-dev-runtime.development.js:346)
(anonymous) (root.tsx:13)

So the correct avatar img gets added, then removed.
Why this removal step gets added to the render process, I do not understand, but once it happens, the account img tag inside the button is and no attempt is made to re-render it.

The src field seems probably valid (I don't know if the local-file:// is an electron/chromium thing?) and when I put the URL in a browser and load the file, it does so:
file:///C:/Users/user/AppData/Roaming/Colanode/accounts/01jvpsmzrqz5k1v6f2gdqbtwnfac/avatars/01jxsd352eaz3ptaakwe3hsqqtav.jpeg

When I search for local-file:// on DuckDuckGo I get nothing found:

Image

But I see it in the repo (along with 248 other references across all of GitHub):

Image

The account and avatar IDs align with what is in the local SQLite DB, PostgreSQL DB, and in the MinIO bucket in the avatars key (for my instance this is in colanode-storage/avatars).

This only happens on Windows and happens with the dev server client (started with DEBUG=colanode:* electron-forge start), packaged 'production' client run straight from the applicable architecture-specific apps/desktop/out subdirectory, and the installed 'production' client.

I'm still looking into this and will update as I have more information.
I noticed that it continues to try to re-render the button with the img tag but consistently fails to do so, I'm still debugging that part to try to understand why.

I found a couple other potential issues that I am going to make new Issues for that you may want to take a look at.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions
      0