Infinite Loading Issue

[lAnviuml]

📦 Environment

Vercel

📌 Version

v1.19.22

💻 Operating System

Windows

🌐 Browser

Chrome

🐛 Bug Description

After following the deployment instructions with Vercel and Clerk, when accessing the application via https://app.adrien-murillo.com, the page gets stuck on an infinite loading screen. The user interface does not load, and no errors are displayed on the screen. The application fails to fully load, preventing any interaction or use of LobeChat's features.

📷 Recurrence Steps

1. Access the Application:

   • Open Google Chrome.
   • Navigate to https://app.adrien-murillo.com.

2. Observe the Behavior:

   • The page displays a loading screen with an animation (e.g., spinning wheel).
   • The loading screen persists indefinitely.
   • No part of the user interface appears.

3. Check the Browser Console:

   • Open Developer Tools (F12).
   • Go to the "Console" tab.
   • Note any error or warning messages (see Additional Information section).

🚦 Expected Behavior

I expected the application to load normally, displaying the complete user interface, with the ability to sign in via Clerk and use all features provided by LobeChat, including sending messages, creating chats, etc.

📝 Additional Information

• Browser Console:

  • Error 1: Failed to load resource: the server responded with a status of 500 (Internal Server Error).
  • Error 2: Uncaught TypeError: Cannot read property 'user' of undefined at App.js:45.
  • Warning: Some cookies are misusing the recommended “SameSite“ attribute.

• Vercel Logs:

  • No significant errors appear in the deployment logs.
  • Server functions seem to be deployed correctly.

• Environment Variables Configuration:

  • All required environment variables have been configured as per documentation, including:
  • CLERK_WEBHOOK_SECRET
  • CLERK_SECRET_KEY
  • NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
  • DATABASE_URL
  • S3_ACCESS_KEY_ID
  • S3_SECRET_ACCESS_KEY
  • S3_BUCKET
  • S3_ENDPOINT
  • S3_PUBLIC_DOMAIN
  • APP_URL
  • NEXT_PUBLIC_SERVICE_MODE

• Troubleshooting Attempts:

  • Clerk Configuration Check:
  • Public and secret keys match those provided by Clerk.
  • The webhook is correctly configured with the URL https://app.adrien-murillo.com/api/webhooks/clerk.
  • Testing on Different Browsers:
  • The same issue occurs on Firefox and Edge.
  • Clearing Cache and Using Incognito Mode:
  • No improvement observed.
  • Checking CORS Permissions for S3:
  • CORS rules are configured to allow requests from https://app.adrien-murillo.com.

• Additional Observations:

  • It seems that the application fails to fetch certain resources or data needed for the initial load.
  • Network requests in the "Network" tab of the Developer Tools show failures on certain APIs.

• Hypotheses:

  • The issue might be related to a misconfiguration in Clerk or an incompatibility with the deployed version.
  • A communication issue with the database or S3 storage could also be a contributing factor.

[lobehubbot]

👀 @lAnviuml

Thank you for raising an issue. We will investigate into the matter and get back to you as soon as possible. Please make sure you have given us as much context as possible.\ 非常感谢您提交 issue。我们会尽快调查此事，并尽快回复您。 请确保您已经提供了尽可能多的背景信息。

[dosubot[bot]]

To resolve the infinite loading issue on your Vercel-deployed application using Clerk, follow these steps:

1. Check User Existence: Ensure the user exists in the database before accessing user properties. The getUserState method in userRouter handles this by checking if the user exists and creating the user if not found.

2. Error Handling: Add proper error handling to catch and log issues during the user data fetching process. The getUserState method includes a retry mechanism for creating a user if not found.

3. Ensure User Data Integrity: Make sure the user data being passed around is complete and not missing any required fields. The createUser method in UserService ensures all necessary user fields are populated.

4. Environment Variables Configuration: Ensure all necessary environment variables are correctly set in Vercel, including database connection URLs, Clerk API keys, and other relevant configurations.

Additionally, use the UserUpdater component to ensure the user data is correctly updated in the context. Here is the relevant code snippet:

'use client';

import { useClerk, useUser } from '@clerk/nextjs';
import { memo } from 'react';
import { createStoreUpdater } from 'zustand-utils';

import { useUserStore } from '@/store/user';
import { LobeUser } from '@/types/user';

const UserUpdater = memo(() => {
  const { isLoaded, user, isSignedIn } = useUser();

  const { session, openUserProfile, signOut, openSignIn } = useClerk();

  const useStoreUpdater = createStoreUpdater(useUserStore);

  const lobeUser = {
    avatar: user?.imageUrl,
    firstName: user?.firstName,
    fullName: user?.fullName,
    id: user?.id,
    latestName: user?.lastName,
    username: user?.username,
  } as LobeUser;

  useStoreUpdater('isLoaded', isLoaded);
  useStoreUpdater('user', lobeUser);
  useStoreUpdater('isSignedIn', isSignedIn);

  useStoreUpdater('clerkUser', user);
  useStoreUpdater('clerkSession', session);
  useStoreUpdater('clerkSignIn', openSignIn);
  useStoreUpdater('clerkOpenUserProfile', openUserProfile);
  useStoreUpdater('clerkSignOut', signOut);

  return null;
});

export default UserUpdater;

Ensure you have correctly configured the Clerk authentication service and added the necessary environment variables in Vercel:

1. Prepare Clerk Authentication Service: Register and create an application on Clerk to obtain the corresponding Public Key and Secret Key.

2. Add Public and Private Key Environment Variables in Vercel: Add the NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY and CLERK_SECRET_KEY environment variables in Vercel.

3. Create and Configure Webhook in Clerk: Add an endpoint in Clerk's Webhooks to notify your application when a user's information changes. The environment variable corresponding to this secret is CLERK_WEBHOOK_SECRET.

By following these steps and ensuring proper error handling, context updating, and environment variable configuration, you should be able to resolve the infinite loading issue on your Vercel-deployed application using Clerk ^[1][2][3].

To continue talking to Dosu, mention @dosu.

[arvinxx]

please give an screenshot of the browser console error

[lAnviuml]

Hi @arvinxx ,

Thanks for the suggestion. Here's the screenshot of the browser console error when accessing the application:

The project is live at the following address: app.adrien-murillo.com

Let me know if you need any more information or if there's anything else I should check.

[arvinxx]

as this error message. You need to check your clerk config or your network. If you config clerk in the prod. You need to bind the domain config at first.

[lobehubbot]

✅ @lAnviuml

This issue is closed, If you have any questions, you can comment and reply.\ 此问题已经关闭。如果您有任何问题，可以留言并回复。