Application error: a client-side exception has occurred (see the browser console for more information).

[Sandeepkasturi]

An application error is occurring where a client-side exception is being thrown. This error is preventing the application from functioning correctly. The browser console suggests that the issue is happening on the client-side.

[techcontributor]

Could you provide information on how to reproduce the issue?

[Pathfainder]

Got the same issue just randomly searching, it doesn't crash imediately. It shows the first usual result, then it crashes if i wait long enough (matter of seconds) or click on a link or "follow up".

My deployment

Here is GPT4-o response from chrome's error console logs :

---

Console Errors Breakdown:

net::ERR_CONNECTION_REFUSED for POST http://localhost:5000/transcribe

Cause: This error indicates that the client attempted to send a POST request to http://localhost:5000/transcribe, but the connection was refused. This often happens if the server at localhost:5000 is not running or is not accepting connections on the specified port.

Solution: Ensure that the server at localhost:5000 is running and listening for requests. Check if the server has started successfully without errors.

Mixed Content Warning

Cause: The page at https://ai-search-engine-three.vercel.app/search/5nV6Iub was loaded over HTTPS, but it requested a resource (http://www.discusmedia.com/upload/resize_cache/iblock/...jpg) over HTTP. This leads to a mixed content warning.

Solution: Serve all content over HTTPS to avoid mixed content issues. Ensure all resources (images, scripts, etc.) are loaded using HTTPS.

Uncaught (in promise) TypeError: Failed to fetch in content.js:9:21

Cause: This error occurs when the fetch API fails to complete the request. The likely reason is the same ERR_CONNECTION_REFUSED as mentioned earlier.

Solution: Resolve the server connection issue. Also, ensure the URL is correct and the server is reachable.

Error: Connection closed in 23-b09ef3d5f7e8b04a.js:2:17735

Cause: This error indicates that a connection was established but then closed unexpectedly. This could be due to various reasons including server-side issues, network problems, or client-side interruptions.

Solution: Investigate the server logs to understand why the connection was closed. Ensure the server is stable and not experiencing crashes or abrupt terminations.

---

Not a dev myself so I do not have the skills to fix or even understand this yet but here GPT's suggestions :

---

Check Server Status:

Ensure the server at localhost:5000 is running without errors. Restart the server and observe any error messages in the server logs.

Upgrade to HTTPS:

Ensure all external resources are served over HTTPS to avoid mixed content warnings. Update URLs in your codebase to use HTTPS.

Network Configuration:

Verify network settings to ensure there are no firewall or proxy issues blocking the connection to localhost:5000. Debugging Fetch API:

Use browser developer tools to inspect the network request and responses. Ensure the fetch call is correctly formed and the server endpoint is correct. Review Server Logs:

Check server logs for any indication of why the connection might be closed unexpectedly. Look for patterns or frequent errors that could indicate a server-side issue.

---

I tried to redeploy, create a new vercel project with new db but I encountered the same issue each time. I still have a working previous deployment here from 2 days ago but i cannot deploy it again due to my free plan on vercel (too old) and Instant Rollback and Promote didn't work at all on vercel's side. I do not have change anything that I did not undo when it starts crashing. (just modified the page.tsx and reversed to original).

Hope this is clear ! If anyone can help !

Many thanks from France ! ;)

[nathan0411]

Got the same issue just randomly searching, it doesn't crash imediately. It shows the first usual result, then it crashes if i wait long enough (matter of seconds) or click on a link or "follow up".

My deployment

Here is GPT4-o response from chrome's error console logs :

Console Errors Breakdown:

net::ERR_CONNECTION_REFUSED for POST http://localhost:5000/transcribe

Cause: This error indicates that the client attempted to send a POST request to http://localhost:5000/transcribe, but the connection was refused. This often happens if the server at localhost:5000 is not running or is not accepting connections on the specified port.

Solution: Ensure that the server at localhost:5000 is running and listening for requests. Check if the server has started successfully without errors.

Mixed Content Warning

Cause: The page at https://ai-search-engine-three.vercel.app/search/5nV6Iub was loaded over HTTPS, but it requested a resource (http://www.discusmedia.com/upload/resize_cache/iblock/...jpg) over HTTP. This leads to a mixed content warning.

Solution: Serve all content over HTTPS to avoid mixed content issues. Ensure all resources (images, scripts, etc.) are loaded using HTTPS.

Uncaught (in promise) TypeError: Failed to fetch in content.js:9:21

Cause: This error occurs when the fetch API fails to complete the request. The likely reason is the same ERR_CONNECTION_REFUSED as mentioned earlier.

Solution: Resolve the server connection issue. Also, ensure the URL is correct and the server is reachable.

Error: Connection closed in 23-b09ef3d5f7e8b04a.js:2:17735

Cause: This error indicates that a connection was established but then closed unexpectedly. This could be due to various reasons including server-side issues, network problems, or client-side interruptions.

Solution: Investigate the server logs to understand why the connection was closed. Ensure the server is stable and not experiencing crashes or abrupt terminations.

Not a dev myself so I do not have the skills to fix or even understand this yet but here GPT's suggestions :

Check Server Status:

Ensure the server at localhost:5000 is running without errors. Restart the server and observe any error messages in the server logs.

Upgrade to HTTPS:

Ensure all external resources are served over HTTPS to avoid mixed content warnings. Update URLs in your codebase to use HTTPS.

Network Configuration:

Verify network settings to ensure there are no firewall or proxy issues blocking the connection to localhost:5000. Debugging Fetch API:

Use browser developer tools to inspect the network request and responses. Ensure the fetch call is correctly formed and the server endpoint is correct. Review Server Logs:

Check server logs for any indication of why the connection might be closed unexpectedly. Look for patterns or frequent errors that could indicate a server-side issue.

I tried to redeploy, create a new vercel project with new db but I encountered the same issue each time. I still have a working previous deployment here from 2 days ago but i cannot deploy it again due to my free plan on vercel (too old) and Instant Rollback and Promote didn't work at all on vercel's side. I do not have change anything that I did not undo when it starts crashing. (just modified the page.tsx and reversed to original).

Hope this is clear ! If anyone can help !

Many thanks from France ! ;)

Hi! It seems that your app is working correctly. May I ask how you were able to resolve the issue?

Thank you!

[LaneYang]

Hey, was able to see this error when using the demo site https://www.morphic.sh/ Got this error when asking the engine to find dates for different events and sort them in one query. The engine tried to break my query to several tasks and the error occurred during the last phase when generating the final answer Application error: a client-side exception has occurred (see the browser console for more information)

[miurla]

The likely cause was an inconsistency in the generation state. Disabling the new button during generation has probably fixed it: #223