Several Kafka Connect pages crash browser with infinite loop

[vincentjames501]

See attached videos.

Simply clicking on the cluster name triggers a mobx infinite loop and you can't click anything on the page. Eventually Chrome kills the tab. Note: This happens in Firefox and Safari as well.

https://github.com/user-attachments/assets/9b1a461c-1d70-4278-88f7-ed3bf9beace0

If you click on the "Connectors" tab, you can see that the components are infinitely rerendered. The page doesn't crash, but you also can't click on any of the connectors I guess due to them being rerendered so frequently.

https://github.com/user-attachments/assets/37a57271-7a30-4f68-84c9-36c11225a2d6

Currently running it as such:

  redpanda-console:
    image: docker.redpanda.com/redpandadata/console:v3.1.1
    entrypoint: /bin/sh
    command: -c 'echo "$$CONSOLE_CONFIG_FILE" > /tmp/config.yml && /app/console'
    volumes:
      - ./config:/tmp/config/
    environment:
      CONFIG_FILEPATH: ${CONFIG_FILEPATH:-/tmp/config.yml}
      CONSOLE_CONFIG_FILE: |
        kafka:
          brokers: ["kafka:9092"]
        schemaRegistry:
          enabled: true
          urls: ["http://schema-registry:8085"]
        kafkaConnect:
          enabled: true
          clusters:
            - name: kafka-connect
              url: http://connect:9031
        console:
          topicDocumentation:
            enabled: true
            git:
              enabled: true
              repository:
                url: https://github.com/redpanda-data/docs
                branch: main
                baseDirectory: tests/docker-compose
    ports:
      - 9032:8080
    profiles: ["kafka"]

[weeco]

Hey @vincentjames501 , I believe this must be something specific to your environment. Do you have a chance to share the network responses with us, to see if something suspicious pops up there? We are not able to reproduce it (among many deployments), making this a bit tricky

[vincentjames501]

@weeco I can't share a .har file on github for some reason (probably security).

The last two api requests never complete likely due to the JS issue. Here are the responses when I manually curl them:

~/P/dev-environment (main|✔) [127]$ curl http://localhost:9032/api/kafka-connect/clusters/kafka-connect
{"clusterName":"kafka-connect","host":"http://connect:9031","clusterVersion":"7.9.0-ccs","clusterCommit":"ebe6df624d6bc758c37aba7053cf868c1e532ccd","kafkaClusterId":"UHcB4xOIQJ2DPWOg4KjJKQ","plugins":[{"class":"io.debezium.connector.postgresql.PostgresConnector","type":"source","version":"3.1.2.Final"},{"class":"org.apache.kafka.connect.mirror.MirrorCheckpointConnector","type":"source","version":"7.9.0-ccs"},{"class":"org.apache.kafka.connect.mirror.MirrorHeartbeatConnector","type":"source","version":"7.9.0-ccs"},{"class":"org.apache.kafka.connect.mirror.MirrorSourceConnector","type":"source","version":"7.9.0-ccs"}]}⏎
~/P/dev-environment (main|✔) $ curl http://localhost:9032/api/kafka-connect/connectors
{"isConfigured":true,"clusters":[{"clusterName":"kafka-connect","clusterAddress":"http://connect:9031","clusterInfo":{"version":"7.9.0-ccs","commit":"ebe6df624d6bc758c37aba7053cf868c1e532ccd","kafka_cluster_id":"UHcB4xOIQJ2DPWOg4KjJKQ"},"totalConnectors":2,"runningConnectors":2,"connectors":[{"name":"restapi_debezium_outbox_config","class":"io.debezium.connector.postgresql.PostgresConnector","config":{"connector.class":"io.debezium.connector.postgresql.PostgresConnector","database.dbname":"restapi","database.hostname":"postgres","database.password":"password","database.port":"5432","database.server.id":"restapi","database.user":"debezium","name":"restapi_debezium_outbox_config","plugin.name":"pgoutput","slot.name":"restapi","table.include.list":"public.outbox","tombstones.on.delete":"false","topic.prefix":"cdc","transforms":"outbox","transforms.outbox.route.by.field":"domain","transforms.outbox.route.topic.replacement":"singlewire.domains.${routedByValue}","transforms.outbox.table.expand.json.payload":"false","transforms.outbox.table.field.event.key":"partition_key","transforms.outbox.table.field.event.payload":"payload","transforms.outbox.table.fields.additional.placement":"type:envelope:type,created_at:header:timestamp","transforms.outbox.type":"io.debezium.transforms.outbox.EventRouter","value.converter":"org.apache.kafka.connect.json.JsonConverter","value.converter.schemas.enable":"false"},"type":"source","topic":"unknown","state":"RUNNING","status":"HEALTHY","workerId":"connect:9031","totalTasks":1,"runningTasks":1,"errors":[],"tasks":[{"taskId":0,"state":"RUNNING","workerId":"connect:9031"}]},{"name":"wearables_service_debezium_outbox_config","class":"io.debezium.connector.postgresql.PostgresConnector","config":{"connector.class":"io.debezium.connector.postgresql.PostgresConnector","database.dbname":"wearables_service","database.hostname":"postgres","database.password":"password","database.port":"5432","database.server.id":"wearables_service","database.user":"debezium","name":"wearables_service_debezium_outbox_config","plugin.name":"pgoutput","slot.name":"wearables_service","table.include.list":"public.outbox","tombstones.on.delete":"false","topic.prefix":"cdc","transforms":"outbox","transforms.outbox.route.by.field":"domain","transforms.outbox.route.topic.replacement":"singlewire.domains.${routedByValue}","transforms.outbox.table.expand.json.payload":"false","transforms.outbox.table.field.event.key":"partition_key","transforms.outbox.table.field.event.payload":"payload","transforms.outbox.table.fields.additional.placement":"type:envelope:type,created_at:header:timestamp","transforms.outbox.type":"io.debezium.transforms.outbox.EventRouter","value.converter":"org.apache.kafka.connect.json.JsonConverter","value.converter.schemas.enable":"false"},"type":"source","topic":"unknown","state":"RUNNING","status":"HEALTHY","workerId":"connect:9031","totalTasks":1,"runningTasks":1,"errors":[],"tasks":[{"taskId":0,"state":"RUNNING","workerId":"connect:9031"}]}]}]}⏎
~/P/dev-environment (main|✔) $ curl http://localhost:9032/api/kafka-connect/connectors
{"isConfigured":true,"clusters":[{"clusterName":"kafka-connect","clusterAddress":"http://connect:9031","clusterInfo":{"version":"7.9.0-ccs","commit":"ebe6df624d6bc758c37aba7053cf868c1e532ccd","kafka_cluster_id":"UHcB4xOIQJ2DPWOg4KjJKQ"},"totalConnectors":2,"runningConnectors":2,"connectors":[{"name":"wearables_service_debezium_outbox_config","class":"io.debezium.connector.postgresql.PostgresConnector","config":{"connector.class":"io.debezium.connector.postgresql.PostgresConnector","database.dbname":"wearables_service","database.hostname":"postgres","database.password":"password","database.port":"5432","database.server.id":"wearables_service","database.user":"debezium","name":"wearables_service_debezium_outbox_config","plugin.name":"pgoutput","slot.name":"wearables_service","table.include.list":"public.outbox","tombstones.on.delete":"false","topic.prefix":"cdc","transforms":"outbox","transforms.outbox.route.by.field":"domain","transforms.outbox.route.topic.replacement":"singlewire.domains.${routedByValue}","transforms.outbox.table.expand.json.payload":"false","transforms.outbox.table.field.event.key":"partition_key","transforms.outbox.table.field.event.payload":"payload","transforms.outbox.table.fields.additional.placement":"type:envelope:type,created_at:header:timestamp","transforms.outbox.type":"io.debezium.transforms.outbox.EventRouter","value.converter":"org.apache.kafka.connect.json.JsonConverter","value.converter.schemas.enable":"false"},"type":"source","topic":"unknown","state":"RUNNING","status":"HEALTHY","workerId":"connect:9031","totalTasks":1,"runningTasks":1,"errors":[],"tasks":[{"taskId":0,"state":"RUNNING","workerId":"connect:9031"}]},{"name":"restapi_debezium_outbox_config","class":"io.debezium.connector.postgresql.PostgresConnector","config":{"connector.class":"io.debezium.connector.postgresql.PostgresConnector","database.dbname":"restapi","database.hostname":"postgres","database.password":"password","database.port":"5432","database.server.id":"restapi","database.user":"debezium","name":"restapi_debezium_outbox_config","plugin.name":"pgoutput","slot.name":"restapi","table.include.list":"public.outbox","tombstones.on.delete":"false","topic.prefix":"cdc","transforms":"outbox","transforms.outbox.route.by.field":"domain","transforms.outbox.route.topic.replacement":"singlewire.domains.${routedByValue}","transforms.outbox.table.expand.json.payload":"false","transforms.outbox.table.field.event.key":"partition_key","transforms.outbox.table.field.event.payload":"payload","transforms.outbox.table.fields.additional.placement":"type:envelope:type,created_at:header:timestamp","transforms.outbox.type":"io.debezium.transforms.outbox.EventRouter","value.converter":"org.apache.kafka.connect.json.JsonConverter","value.converter.schemas.enable":"false"},"type":"source","topic":"unknown","state":"RUNNING","status":"HEALTHY","workerId":"connect:9031","totalTasks":1,"runningTasks":1,"errors":[],"tasks":[{"taskId":0,"state":"RUNNING","workerId":"connect:9031"}]}]}]}⏎

This is just local dev stuff, passwords have been replaced. If you have something specific you're interested in let me know. The ones that are failing here are due to not having admin api or enterprise stuff enabled.

[dg-korolev]

I encountered the same issue - an infinite loading loop when trying to open the connector page.

This problem occurs when using docker.redpanda.com/redpandadata/console:v3.1.1 on first launch with a clean volume.

If I use docker.redpanda.com/redpandadata/console:v3.1.0, the issue does not happen.

I also tried starting with version v3.1.0 on a clean volume, then updated the image to v3.1.1 - and that worked for me as well.