Bull Board UI stuck on "Loading"

[whydnxx]

Hi, we have been looking for something to monitor our Bull Queues for quite some time. and I use Bull Board for monitor queues, I'm using Fastift rather than Express, and I have been stuck on Loading... This happened only on production, but on development all going well.

Reproduce:

export const setupBullBoard = (app: NestFastifyApplication) => {
  const bullServerAdapter = new BullFastifyAdapter();
  bullServerAdapter.setBasePath('/queues/ui');

  const queues = Object.values(QUEUES).map(
    (queue) => new BullAdapter(new Queue(queue)),
  );

  createBullBoard({
    queues,
    serverAdapter: bullServerAdapter,
  });

  app.register(bullServerAdapter.registerPlugin(), {
    prefix: '/queues/ui',
    basePath: '',
  });
};

"bull": "^4.2.1" "@nestjs/core": "^8.2.5" "@bull-board/fastify": "^3.9.0"

[felixmosh]

I'm not able to reproduce. I've used the with-fastify example, and change to you prefixes. All works.

If it works on dev but not on prod, it is probably a problem of mounting point, can you share the prefix that you have on prod?

[whydnxx]

Here are my main.ts

import { ValidationPipe, VersioningType } from '@nestjs/common';
import { NestFactory } from '@nestjs/core';
import {
  FastifyAdapter,
  NestFastifyApplication,
} from '@nestjs/platform-fastify';
import { useContainer } from 'class-validator';
import { AppModule } from './app/app.module';
import { setupSwagger } from './configs/swagger';
import compression from 'fastify-compress';
import { contentParser } from 'fastify-multer';
import { join } from 'path';
import { setupBullBoard } from './configs/bullBoard';

async function bootstrap() {
  const app = await NestFactory.create<NestFastifyApplication>(
    AppModule,
    new FastifyAdapter(),
  );
  app.enableVersioning({
    type: VersioningType.URI,
    defaultVersion: '1',
  });
  // Enable Cors for development
  app.enableCors();
  // Enable compression
  app.register(compression);
  // File storage system
  app.register(contentParser);
  app.useStaticAssets({ root: join(__dirname, '../media'), prefix: '/media' });
  // Global Pipe to intercept request and format data accordingly
  app.useGlobalPipes(new ValidationPipe({ transform: true }));
  useContainer(app.select(AppModule), { fallbackOnErrors: true });
  setupSwagger(app);
  // Set Bull Board
  setupBullBoard(app);
  // Listen to port given by environment on production server
  // Specify '0.0.0.0' in the listen() to accept connections on other hosts.
  await app.listen(process.env.PORT || 8080, '0.0.0.0');
}
bootstrap();

[felixmosh]

Pay attention that you get 504, gateway time out, it is for sure related to your prod setup

[whydnxx]

yes, on my production server always loading, is my prefix that must use versioning (v1)? but, in development server is going well

[whydnxx]

[felixmosh]

can you share your url path (without the domain) of the bull ui & the API requests it made?

[whydnxx]

endpoint for bull UI is : URL/queues/ui but I don't understand what API Request you mean did you mean this? swagger: /v1/docs/static/index.html bull ui: /queues/ui sample: v1/public/...

[felixmosh]

can you open the console, and check where the UI makes it's api requests?

[whydnxx]

it hit to queues/ui/api/queues?page=1

[felixmosh]

So routes look OK. you have probably an issue with reverse-proxy on your prod env. Do you have one? (a reverse proxy)

[whydnxx]

No I don't have, and I try to direct using IP and port, it same

[felixmosh]

It. Is not related to IP.

You don't have nginx or something similar?

[whydnxx]

finally, I found the thing that makes why it always loads, on my dev, running locally without docker. then I tried to run in my dev workspace using docker. the result is the same as in production, I use Docker in production.

Heres is my docker setup:

version: '2'
services:
  app:
    build: .
    container_name: app-api
    depends_on:
      - db
      - redis
    volumes:
      - ./src:/app/src
      - .env:/app/.env
    ports:
      - 8080:8080

  db:
    image: postgres:12
    container_name: app-db
    restart: always
    environment:
      POSTGRES_USER: root
      POSTGRES_DB: just_pay
      POSTGRES_PASSWORD: P@ssw0rd
    ports:
      - 5432:5432
    volumes:
      - postgresdata:/var/lib/postgresql

  redis:
    image: redis:5
    container_name: app-redis
    restart: always
    ports:
      - 6379:6379

volumes:
  postgresdata:

[felixmosh]

So it is not related to bull-board. I keep it open just to try to help you. Maybe your connection to redis is not working when you serve the app from docker?

[maxime-lenne]

Hi,

I have the same issue with bullboard + fastify on queues that have a large size job payload.

[felixmosh]

Hi,

I have the same issue with bullboard + fastify on queues that have a large size job payload.

It is not related to the this issue. Can you open a new issue with details (job for example)?

[jyotirmoy-bst]

I have found the same issue, and it seemed like there was a job with null and that was causing an issue for me, so I checked that node-modules/bull-board/routes/getDataForQeues.js In the getDataForQeues function, if we use flatMap instead of map. And in the formatJob function, if we use if (!job) return [];, then I think this case could be handled, let me know, if this helps. @felixmosh Can you please do these changes to resolve this issue at least maybe.

[felixmosh]

Hi @jyotirmoy-bst, looks like you are using a really old version of bull-board, can you update to latest and check if it solves your problem?

[felixmosh]

@whydnxx can we close this issue?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[fr1sk]

why this is closed? I am experiencing the same issue using 4.10.1 and the strangest thing is on local it is working on AWS I am getting 504. 🤷🏻‍♂️

[felixmosh]

This issue was stale for 90 days... What is the error that you get?

[fr1sk]

Make sense, but I am getting the same error. The same Redis instance on local is working, the deployed version on AWS gives me 504 after some time of loading, this is the only error that I get, nothing on server logs 😢

[felixmosh]

Can we debug it somehow? will you share you screen on Discord?

[fr1sk]

Unfortunately, I cannot share the code, but let's try to debug it together. My discord username is defalt#7298

[max-carey]

@fr1sk Did you ever figure this out? I am having the same problem.

[felixmosh]

@fr1sk Did you ever figure this out? I am having the same problem.

What do you get?

[Aldizh]

Also have the same problem with this one on an AWS instance, works fine locally with default Redis configs. We are getting 504 when requesting BASE_URL/BASE_BULL_PATH/api/queues?page=1&jobsPerPage=10.

At first i thought this is related to the reverse proxy issue mentioned earlier by @felixmosh but it is unlikely because a similar route works, i.e: I am able to add a job via BASE_URL/BASE_BULL_PATH/add?name=PROCESS_SYNC_JOB

[kheengz]

While using nestjs

import { BullModule } from '@nestjs/bull';
import { ConfigModule, ConfigService } from '@nestjs/config';

BullModule.forRootAsync({
  imports: [ConfigModule],
  inject: [ConfigService],
  useFactory: async (config: ConfigService) => {
    return {
      redis: {
        host: 'your-redis-host',
        port: 'your-redis-port',
        password: 'your-redis-password-if-any',
      },
    };
  },
}),

Make use of host, port and/or password

host: 'your-redis-host',
port: 'your-redis-port',
password: 'your-redis-password-if-any',

don't use url

url: `your-redis-url`

[dogukanakkaya]

Why is this closed? Having the same issue with AWS deployment that uses Elasticache instance.

[maximeburri]

Hello

I have the same issue, it seems to be an issue with the localization.

For the first time, when the local storage is empty, Bull Board put in the local storage an empty string for the language {"state":{"language":"",...}.

Then it's trying to fetch my language (locales/fr-CH/messages.json, french for Switzerland) but failed since it doesn't exist.

Changing the language to "fr-FR" or "en-US" worked.

But then I need to have access to the inspector, which is not possible on mobile.

[felixmosh]

Interesting, I'll investigate it, it should fallback to en automatically... But probably there is some issue. Can you open a new issue for that?