[FIX] Docker version: Application error: a client-side exception has occurred (see the browser console for more information). #881

saccohuo · 2024-08-05T16:02:15Z

rogerc66 · 2024-08-06T17:57:49Z

Same here

`The error messages you provided indicate several issues related to JavaScript and possibly an associated framework that might not be named or described in your question. Here are some explanations for each of these errors:

SVG Attribute Error:
attribute height: Expected length, "auto"

This error is thrown because when you define height on an element using an attribute (such as height="auto"), JavaScript tries to read the value of height. If height is defined with a string ('auto') instead of a numeric value, this throws an error since it's not recognized as a number or a length in JavaScript.

JS TypeError:
TypeError: Cannot read properties of undefined (reading 'icon')

This typically happens when your code attempts to access the icon property of an object that is undefined, null, or has no such property. This might be due to:

The icon variable being not properly set before use.
An issue with asynchronous operations where dependencies are not fully loaded when expected, and thus certain variables are null.
Additional Errors (TypeScript Errors):
The additional errors seem to stem from an older TypeScript version (7023-52c1be60135eb057.js file), which might have compatibility or type issues with newer components or frameworks. Here's how you can address them:

Addressing SVG Attribute:
Ensure that if auto is intended to be treated as a string and used for styling purposes, your attribute should be set like this instead:

If it needs to define an actual size (for example, in pixels), ensure the value follows this format: Addressing JS Type Errors: Check that all components you are trying to access have been initialized properly. If these issues happen in a part of your code that relies on asynchronous operations like fetching data or loading modules, make sure the async processes complete before accessing them:

await Promise.resolve(); // This is an empty promise and waits until it's resolved.
Or using async/await directly:

async function init() {
const icon = await loadIcon();
// Use icon here...
}

init();
Addressing TypeScript Issues:
If you're still seeing issues related to TypeScript, ensure that all imported types are correctly specified and that your code doesn't rely on features that are not supported in your version of TypeScript. Upgrading to the latest stable version might solve these issues if it includes fixes for older features.

Additionally, updating dependencies or frameworks (if any) could resolve compatibility issues between your codebase and its components. Always ensure that you're using libraries or frameworks up to date with your project's requirements.

If specific lines of code were intended to be shared but not provided, I would need those exact pieces of code to provide more tailored solutions. However, based on the context given by the errors themselves, these suggestions should help resolve the issues mentioned above.`

ajikmr · 2024-08-08T12:25:02Z

Hello.
I am also getting same error. A flash of correct screen, followed by error message being displayed.

Pasting console log below:

/api/settings?detailed=true:1

   Failed to load resource: the server responded with a status of 403 (Forbidden)

fd9d1056-2b978342deb60015.js:1 Error: attribute height: Expected length, "auto".
eK @ fd9d1056-2b978342deb60015.js:1
/api/v1/user:1

   Failed to load resource: the server responded with a status of 403 (Forbidden)

7023-52c1be60135eb057.js:1 TypeError: Cannot read properties of undefined (reading 'icon')
at page-36c7dd2d51d747e5.js:1:22255
at Array.map ()
at page-36c7dd2d51d747e5.js:1:22238
at aW (fd9d1056-2b978342deb60015.js:1:73244)
at oe (fd9d1056-2b978342deb60015.js:1:84685)
at ol (fd9d1056-2b978342deb60015.js:1:85323)
at or (fd9d1056-2b978342deb60015.js:1:85207)
at ol (fd9d1056-2b978342deb60015.js:1:86268)
at or (fd9d1056-2b978342deb60015.js:1:85207)
at ol (fd9d1056-2b978342deb60015.js:1:86268)

PiyushDixit96 · 2024-08-09T04:55:24Z

Describe the bug

Open localhost:42110, after a flash of some window, then get the blank page with error Application error: a client-side exception has occurred (see the browser console for more information).

In the console, shows fd9d1056-2b978342deb60015.js:1 Error: <svg> attribute height: Expected length.

Screenshots

Platform
* Server:
  
  * [ ]  Cloud-Hosted (https://app.khoj.dev)
  * [x]  Self-Hosted Docker
  * [ ]  Self-Hosted Python package
  * [ ]  Self-Hosted source code

* Client:
  
  * [ ]  Obsidian
  * [ ]  Emacs
  * [ ]  Desktop app
  * [x]  Web browser
  * [ ]  WhatsApp

* OS:
  
  * [x]  Windows
  * [ ]  macOS
  * [ ]  Linux
  * [ ]  Android
  * [ ]  iOS
If self-hosted
* Server Version [e.g. 1.0.1]: I cannot get the version.
Additional context

Add any other context about the problem here.

Hello.
I am also getting same error.

PiyushDixit96 · 2024-08-09T05:00:04Z

issue fix update this value in docker-compose.yml
KHOJ_DEBUG=True
and upgrade the build
docker-compose up --build

please try this

rogerc66 · 2024-08-09T06:40:41Z

issue fix update this value in docker-compose.yml KHOJ_DEBUG=True and upgrade the build docker-compose up --build

please try this

No luck, still get the same error after rebuild, after a quick flash of normal page, error page kicks in

Miskina · 2024-08-09T08:55:42Z

Hello I am having the same problem on Debian Bookworm (self-hosting with Docker).
It seems the problem is in the page.tsx:114 file of the web frontend. Specifically one of the agents in the agents array seems to be undefined which in turn causes the error. I'm not sure what the root cause of it is, but modifying the code from:

        const agentIcons = agents.map(
            (agent) =>
                getIconFromIconName(agent.icon, agent.color) || (
                    <Image
                        key={agent.name}
                        src={agent.avatar}
                        alt={agent.name}
                        width={50}
                        height={50}
                    />
                ),
        );

to:

        const agentIcons = agents.filter(agent => agent !== null && agent !== undefined).map(
            (agent) =>
                getIconFromIconName(agent.icon, agent.color) || (
                    <Image
                        key={agent.name}
                        src={agent.avatar}
                        alt={agent.name}
                        width={50}
                        height={50}
                    />
                ),
        );

seems to work. Of course you need to make the docker-compose build from source instead of pull the image for the changes to take effect.

sabaimran · 2024-08-10T07:53:25Z

Hey folks! Sorry about this, let me push a fix for this. This should also be resolved if you setup a chat model configuration and restart your server. Thanks for the root cause discovery, @Miskina !

rogerc66 · 2024-08-10T10:21:03Z

Hey folks! Sorry about this, let me push a fix for this. This should also be resolved if you setup a chat model configuration and restart your server. Thanks for the root cause discovery, @Miskina !

Hi, Sabi

Can you please tell us how to setup a chat model config in docker compose? by adding a environment parameter or what ? Thank you.

saccohuo · 2024-08-12T17:02:51Z

@sabaimran Hi, the 1.20.4 version solves the problem, but I get Bad Request (400) when I visit http://<myip>:42110/server/admin.

rogerc66 · 2024-08-14T06:34:52Z

@sabaimran Hi, the 1.20.4 version solves the problem, but I get Bad Request (400) when I visit http://<myip>:42110/server/admin.

I'm having the same problem, blank 400 page for /server/admin

saccohuo · 2024-08-24T02:12:52Z

@sabaimran Hi, could you please fix this problem? Many thanks.

sabaimran · 2024-08-24T21:11:24Z

I'll make some time to look into it today or tomorrow @saccohuo . You're able to load the rest of the app, right? And are you able to load it on localhost, or is it always returning a bad request 400? Some more details about your setup will be helpful to debug.

saccohuo · 2024-08-25T05:14:12Z

I'll make some time to look into it today or tomorrow @saccohuo . You're able to load the rest of the app, right? And are you able to load it on localhost, or is it always returning a bad request 400? Some more details about your setup will be helpful to debug.我会在今天或明天抽时间来看看这个问题 @saccohuo。你能加载应用的其他部分吗？你能在 localhost 上加载吗，还是总是返回错误请求 400？关于你的设置的更多细节将有助于调试。

@sabaimran After Application error: a client-side exception has occurred (see the browser console for more information). problem solved, I get 400 at http://<myip>:42110/server/admin.
I cannot set the model, so I cannot do anything to it.

saccohuo · 2024-09-03T08:28:50Z

@sabaimran Hi, is any update?

debanjum · 2024-09-21T21:37:18Z

Hi folks, this issue seems to contain 2 separate issues, both of which should be resolved:

The original Application error issue seems to have resolved
The admin panel not being accessible and showing Bad Request (400) when trying to be accessed over external i.p (instead of localhost)

On issue 2. @saccohuo,

I was able to access Khoj web app and web admin panel with Khoj being run on Windows + WSL2 + Docker
I was also able to access the admin panel over an external i.p or domain like http://<myip>:42110/server/admin when run from PR Improve Khoj First Run, Docker Setup and Documentation #919.

I get Bad Request (400) when I visit http://:42110/server/admin.

I can reproduce the Bad Request (400) page when trying to access the server admin page when the KHOJ_DOMAIN environment variable in the docker-compose.yml isn't (correctly) set to <myip>. This issue can be resolved by setting the environment variable KHOJ_DOMAIN=<myip> in your docker-compose.yml

Next Steps

for folks who got stuck trying to setup their Khoj server for remote access

Delete your Khoj docker container, images and volumes (with docker-compose down --volumes)
Get the latest Khoj docker-compose.yml . The Docker setup has been simplified in Improve Khoj First Run, Docker Setup and Documentation #919 using self hosted Khoj
Edit the downloaded khoj docker-compose.yml for Remote Access and Chat Models you want to enable by default. See the new Remote Access Doc and the updated Self Hosting Setup Docs for details
Now startup Khoj by running docker-compose up

I'm closing this issue as the original bug has been resolved.
Feel free to create a new issue if you're still facing problems with remote access. Details on how you tried to setup Khoj (OS, Docker vs Pip) and what error you're seeing (screenshots or server logs) would be useful to troubleshoot

saccohuo added the fix Fix something that isn't working as expected label Aug 5, 2024

debanjum added docker fix Fix something that isn't working as expected and removed fix Fix something that isn't working as expected labels Sep 18, 2024

debanjum closed this as completed Sep 21, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[FIX] Docker version: Application error: a client-side exception has occurred (see the browser console for more information). #881

[FIX] Docker version: Application error: a client-side exception has occurred (see the browser console for more information). #881

saccohuo commented Aug 5, 2024

rogerc66 commented Aug 6, 2024 •

edited

Loading

ajikmr commented Aug 8, 2024 •

edited

Loading

PiyushDixit96 commented Aug 9, 2024

Describe the bug

Screenshots

Platform

If self-hosted

Additional context

PiyushDixit96 commented Aug 9, 2024

rogerc66 commented Aug 9, 2024 •

edited

Loading

Miskina commented Aug 9, 2024

sabaimran commented Aug 10, 2024

rogerc66 commented Aug 10, 2024

saccohuo commented Aug 12, 2024

rogerc66 commented Aug 14, 2024

saccohuo commented Aug 24, 2024

sabaimran commented Aug 24, 2024 •

edited

Loading

saccohuo commented Aug 25, 2024 •

edited

Loading

saccohuo commented Sep 3, 2024

debanjum commented Sep 21, 2024 •

edited

Loading

[FIX] Docker version: Application error: a client-side exception has occurred (see the browser console for more information). #881

[FIX] Docker version: Application error: a client-side exception has occurred (see the browser console for more information). #881

Comments

saccohuo commented Aug 5, 2024

Describe the bug

Screenshots

Platform

If self-hosted

Additional context

rogerc66 commented Aug 6, 2024 • edited Loading

ajikmr commented Aug 8, 2024 • edited Loading

PiyushDixit96 commented Aug 9, 2024

Describe the bug

Screenshots

Platform

If self-hosted

Additional context

PiyushDixit96 commented Aug 9, 2024

rogerc66 commented Aug 9, 2024 • edited Loading

Miskina commented Aug 9, 2024

sabaimran commented Aug 10, 2024

rogerc66 commented Aug 10, 2024

saccohuo commented Aug 12, 2024

rogerc66 commented Aug 14, 2024

saccohuo commented Aug 24, 2024

sabaimran commented Aug 24, 2024 • edited Loading

saccohuo commented Aug 25, 2024 • edited Loading

saccohuo commented Sep 3, 2024

debanjum commented Sep 21, 2024 • edited Loading

Next Steps

rogerc66 commented Aug 6, 2024 •

edited

Loading

ajikmr commented Aug 8, 2024 •

edited

Loading

rogerc66 commented Aug 9, 2024 •

edited

Loading

sabaimran commented Aug 24, 2024 •

edited

Loading

saccohuo commented Aug 25, 2024 •

edited

Loading

debanjum commented Sep 21, 2024 •

edited

Loading