Application erroriaclientside exception has occurred (see the browser console for moreinformation), Error opening the application using UOS arm browser

[cinrad]

Self Checks

• [x] This is only for bug report, if you would like to ask a question, please head to Discussions.
• [x] I have searched for existing issues search for existing issues, including closed ones.
• [x] I confirm that I am using English to submit this report (我已阅读并同意 Language Policy).
• [x] [FOR CHINESE USERS] 请务必使用英文提交 Issue，否则会被关闭。谢谢！:）
• [x] Please do not modify this template :) and fill in all the required fields.

Dify version

v0.15.3

Cloud or Self Hosted

Self Hosted (Docker)

Steps to reproduce

Unable to open the application using UOS arm browser. Throw "TypeError: e.toReversed is not a function".

✔️ Expected Behavior

No response

❌ Actual Behavior

No response

[dosubot[bot]]

Hello @cinrad! I'm here to assist you with bug fixes, answer questions, and guide you on becoming a contributor. Let's get to the bottom of this together! 🤖

The error you're encountering, "TypeError: e.toReversed is not a function," suggests that the toReversed method is being called on an object that does not support it. This could be due to the UOS arm browser not supporting this JavaScript feature.

The toReversed method is a relatively new addition to JavaScript, and not all browsers may support it yet. To address this issue, you can consider the following options:

1. Polyfill: Implement a polyfill for the toReversed method to ensure compatibility with browsers that do not support it. A polyfill is a piece of code that provides the functionality of a newer feature in older environments.

2. Feature Detection: Use feature detection to check if the toReversed method is available before using it. If it's not available, you can implement an alternative logic to reverse the array or object.

3. Browser Compatibility: Verify the compatibility of the UOS arm browser with the JavaScript features used in your application. You might need to adjust your code or use a different browser that fully supports the required features.

Unfortunately, I couldn't find specific documentation or code in the Dify repository addressing this issue directly. You might need to explore the codebase to identify where toReversed is used and apply one of the above solutions.

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Other}

[crazywoola]

Please provide the DSL.

[cinrad]

I searched the entire dify project and found only one place where the toReversed method appeared: /web/app/componets/base/chat/utils.ts Line 103: const stack = tree.toReversed() It seems to apply toReversed() in the JavaScript array. The simple javascript polyfill is shown in the attachment. Since I don't know typescript, I don't know how to modify it. I hope that the polyfill can be added to future projects.

[crazywoola]

What's your browser and it's version?

[cinrad]

uos is compatible with ubuntu0.18.04, the default chromium version is 83.0.4103

[linjicong]

I encountered the same issue, and here is the screenshot.

[thl283406834]

I have the same issues. docker-compose run server on Linux Rocky

User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36

But

user-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36 is OK

[hailynch]

This is a version compatibility issue. Taking Chrome as an example, the Chrome version needs to be 110 or higher. Users can resolve related issues by upgrading their browser. Unfortunately, some users cannot upgrade their browsers, such as those using Windows 7, which only supports up to Chrome version 109. In this situation, you can solve the problem using polyfills.

Here are the specific steps to implement a TypeScript polyfill for toReversed:

1. Check if Array.prototype.toReversed exists:

Modern browsers may already natively support toReversed. To avoid overriding the native implementation, we first need to check if it exists.If it does not exist, then provide a polyfill: If toReversed is not available, we will add our own implementation to Array.prototype.

interface Array<T> { toReversed(): T[]; } if (!Array.prototype.toReversed) { Array.prototype.toReversed = function<T>(): T[] { // 1.Create a shallow copy of the original array const reversedArray = [...this]; // Create a shallow copy using the spread operator // 2. Use the native reverse() method to reverse the copied array reversedArray.reverse(); // 3. Return the new reversed array (copy) return reversedArray; }; }

2. Add the code to your project:

Add the above TypeScript code snippet to a file in the /web/app/components/base/chat directory. For example, you can create a file named array.polyfill.ts and paste the code there. Import the polyfill in utils.ts:

In the /web/app/components/base/chat/utils.ts file, add the following import statement: import './array.polyfill';

3. Ensure that you compile the TypeScript code so that the changes take effect.

I have tested this approach in older browsers, and it effectively resolves these types of issues.

[imacemarx]

This is a version compatibility issue. Taking Chrome as an example, the Chrome version needs to be 110 or higher. Users can resolve related issues by upgrading their browser. Unfortunately, some users cannot upgrade their browsers, such as those using Windows 7, which only supports up to Chrome version 109. In this situation, you can solve the problem using polyfills.

Here are the specific steps to implement a TypeScript polyfill for toReversed:

1. Check if Array.prototype.toReversed exists:

Modern browsers may already natively support toReversed. To avoid overriding the native implementation, we first need to check if it exists.If it does not exist, then provide a polyfill: If toReversed is not available, we will add our own implementation to Array.prototype.

interface Array<T> { toReversed(): T[]; } if (!Array.prototype.toReversed) { Array.prototype.toReversed = function<T>(): T[] { // 1.Create a shallow copy of the original array const reversedArray = [...this]; // Create a shallow copy using the spread operator // 2. Use the native reverse() method to reverse the copied array reversedArray.reverse(); // 3. Return the new reversed array (copy) return reversedArray; }; }

2. Add the code to your project:

Add the above TypeScript code snippet to a file in the /web/app/components/base/chat directory. For example, you can create a file named array.polyfill.ts and paste the code there. Import the polyfill in utils.ts:

In the /web/app/components/base/chat/utils.ts file, add the following import statement: import './array.polyfill';

3. Ensure that you compile the TypeScript code so that the changes take effect.

I have tested this approach in older browsers, and it effectively resolves these types of issues.

Thank you! Your reply helped me solve the same issue.

I followed your solution and resolved it by replacing the Docker image. Here’s how I did it:

1. First, I followed your approach and fixed the code.
2. Then, I built the web Docker image:

   cd web
   docker build -t my-fixed-image .  
   

3. Next, I modified docker/docker-compose.yaml and replaced
   langgenius/dify-web:0.15.3 with my-fixed-image, which was around line 445.
4. Finally, I restarted the containers:

   docker-compose down
   docker-compose up -d
   

[jimiopex]

Same issue, using latest chrome still the same.

[white8night]

I have the same issues. docker-compose run server on Ubuntu

My client is windows 7 and i tested 360/86.0.4240.198 360/122 Chrome/109 FireFox/96 FireFox/115. FireFox 115 is ok, 360/122 can use but some picture(robot avater) is broken.

[UULIN]

请问如何进行ts代码编译

[tinelion]

The 360 Browser has encountered the same issue.

[ycccc93]

This is a version compatibility issue. Taking Chrome as an example, the Chrome version needs to be 110 or higher. Users can resolve related issues by upgrading their browser. Unfortunately, some users cannot upgrade their browsers, such as those using Windows 7, which only supports up to Chrome version 109. In this situation, you can solve the problem using polyfills. Here are the specific steps to implement a TypeScript polyfill for toReversed:

1. Check if Array.prototype.toReversed exists:

Modern browsers may already natively support toReversed. To avoid overriding the native implementation, we first need to check if it exists.If it does not exist, then provide a polyfill: If toReversed is not available, we will add our own implementation to Array.prototype. interface Array<T> { toReversed(): T[]; } if (!Array.prototype.toReversed) { Array.prototype.toReversed = function<T>(): T[] { // 1.Create a shallow copy of the original array const reversedArray = [...this]; // Create a shallow copy using the spread operator // 2. Use the native reverse() method to reverse the copied array reversedArray.reverse(); // 3. Return the new reversed array (copy) return reversedArray; }; }

2. Add the code to your project:

Add the above TypeScript code snippet to a file in the /web/app/components/base/chat directory. For example, you can create a file named array.polyfill.ts and paste the code there. Import the polyfill in utils.ts: In the /web/app/components/base/chat/utils.ts file, add the following import statement: import './array.polyfill';

3. Ensure that you compile the TypeScript code so that the changes take effect.

I have tested this approach in older browsers, and it effectively resolves these types of issues.

Thank you! Your reply helped me solve the same issue.

I followed your solution and resolved it by replacing the Docker image. Here’s how I did it:

1. First, I followed your approach and fixed the code.
2. Then, I built the web Docker image: cd web docker build -t my-fixed-image .
3. Next, I modified docker/docker-compose.yaml and replaced langgenius/dify-web:0.15.3 with my-fixed-image, which was around line 445.
4. Finally, I restarted the containers: docker-compose down docker-compose up -d

I followed the steps and the chat model of llm was lost. I recomposed the official one and it was fine. What went wrong?