search

khoj-ai / khoj

Your AI second brain. Self-hostable. Get answers from the web or your docs. Build custom agents, schedule automations, do deep research. Turn any online or local LLM into your personal, autonomous AI (e.g gpt, claude, gemini, llama, qwen, mistral).
https://khoj.dev
GNU Affero General Public License v3.0
15.92k stars 785 forks source link

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

Closed saccohuo closed 2 months ago

saccohuo commented 3 months ago

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

image

Platform

If self-hosted

Additional context

Add any other context about the problem here.

rogerc66 commented 3 months ago

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 commented 3 months ago

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

Pasting console log below:

Screenshot 2024-08-08 at 5 52 24 PM

/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 commented 3 months ago

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

image

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 commented 3 months ago

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

please try this

rogerc66 commented 3 months ago

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 commented 3 months ago

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 commented 3 months ago

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 commented 3 months ago

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 commented 3 months ago

@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 commented 3 months ago

@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 commented 3 months ago

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

sabaimran commented 3 months ago

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 commented 2 months ago

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 commented 2 months ago

@sabaimran Hi, is any update?

debanjum commented 2 months ago

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

  1. The original Application error issue seems to have resolved
  2. 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 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

  1. Delete your Khoj docker container, images and volumes (with docker-compose down --volumes)
  2. Get the latest Khoj docker-compose.yml . The Docker setup has been simplified in #919 using self hosted Khoj
  3. 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
  4. 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