Wallaby v2 UI loading forever through tunnel

[schonarth]

Issue description or question

Wallaby v2 runs fine locally, but when I'm on a remote machine via Microsoft's Remote - Tunnels VS Code extension, the new Wallaby tab stalls in the "connecting" state forever.

I have also tried running it externally, in browser mode, with the same outcome.

Both machines work fine when I run Wallaby locally.

Maybe it uses its own port that isn't being tunneled?

Wallaby diagnostics report

Below is my report when tunneling from the Mac into the Windows PC.

{
  editorVersion: '1.95.3',
  pluginVersion: '1.0.396',
  editorType: 'VSCode',
  osVersion: 'win32 10.0.22631',
  nodeVersion: 'v20.9.0',
  coreVersion: '1.0.1648',
  pnp: '<not set>',
  pnpEsm: '<not set>',
  checksum: 'ZjlkMzMxNGZlZmQ4NWMyNDJhMjU3ZGQyNGM5NmUzYzgsMTc0Njc0ODgwMDAwMCww',
  config: {
    diagnostics: {
      jest: {
        config: {
          configs: [
            {
              automock: false,
              cache: true,
              cacheDirectory: 'C:\\Users\\username\\AppData\\Local\\Temp\\jest',
              clearMocks: false,
              collectCoverageFrom: [],
              coverageDirectory: 'C:\\Users\\username\\Projects\\ClientName\\Chat\\coverage',
              coveragePathIgnorePatterns: [ '\\\\node_modules\\\\' ],
              cwd: 'C:\\Users\\username\\Projects\\ClientName\\Chat',
              dependencyExtractor: undefined,
              detectLeaks: false,
              detectOpenHandles: false,
              displayName: undefined,
              errorOnDeprecated: false,
              extensionsToTreatAsEsm: [],
              fakeTimers: { enableGlobally: false },
              filter: undefined,
              forceCoverageMatch: [],
              globalSetup: undefined,
              globalTeardown: undefined,
              globals: {},
              haste: { computeSha1: false, enableSymlinks: false, forceNodeFilesystemAPI: true, throwOnModuleCollision: false },
              id: 'b7a08da2e92c30dfa5390f17c878b5ff',
              injectGlobals: true,
              moduleDirectories: [ 'node_modules' ],
              moduleFileExtensions: [ 'ts', 'tsx', 'js', 'jsx', 'json', 'node' ],
              moduleNameMapper: [],
              modulePathIgnorePatterns: [],
              modulePaths: undefined,
              openHandlesTimeout: 1000,
              prettierPath: 'prettier',
              resetMocks: false,
              resetModules: false,
              resolver: undefined,
              restoreMocks: false,
              rootDir: 'C:\\Users\\username\\Projects\\ClientName\\Chat',
              roots: [ 'C:\\Users\\username\\Projects\\ClientName\\Chat' ],
              runner: 'C:\\Users\\username\\Projects\\ClientName\\Chat\\node_modules\\jest-runner\\build\\index.js',
              runtime: undefined,
              sandboxInjectedGlobals: [],
              setupFiles: [],
              setupFilesAfterEnv: [],
              skipFilter: false,
              skipNodeResolution: undefined,
              slowTestThreshold: 5,
              snapshotFormat: { escapeString: false, printBasicPrototype: false },
              snapshotResolver: undefined,
              snapshotSerializers: [],
              testEnvironment: 'C:\\Users\\username\\Projects\\ClientName\\Chat\\node_modules\\jest-environment-node\\build\\index.js',
              testEnvironmentOptions: {},
              testLocationInResults: false,
              testMatch: [ '**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[tj]s?(x)' ],
              testPathIgnorePatterns: [ 'C:\\\\Users\\\\username\\\\Projects\\\\ClientName\\\\Chat\\\\dist\\\\', 'C:\\\\Users\\\\username\\\\Projects\\\\ClientName\\\\Chat\\\\node_modules\\\\' ],
              testRegex: [],
              testRunner: 'C:\\Users\\username\\Projects\\ClientName\\Chat\\node_modules\\jest-circus\\runner.js',
              transform: [
                [ '^.+\\.tsx?$', 'C:\\Users\\username\\Projects\\ClientName\\Chat\\node_modules\\babel-jest\\build\\index.js', {} ],
                [ '^.+.tsx?$', 'C:\\Users\\username\\Projects\\ClientName\\Chat\\node_modules\\ts-jest\\dist\\index.js', {} ]
              ],
              transformIgnorePatterns: [ '\\\\node_modules\\\\', '\\.pnp\\.[^\\\\]+$' ],
              unmockedModulePathPatterns: undefined,
              watchPathIgnorePatterns: []
            }
          ],
          globalConfig: {
            bail: 0,
            changedFilesWithAncestor: false,
            changedSince: undefined,
            ci: false,
            collectCoverage: false,
            collectCoverageFrom: [],
            coverageDirectory: 'C:\\Users\\username\\Projects\\ClientName\\Chat\\coverage',
            coverageProvider: 'babel',
            coverageReporters: [ 'json', 'text', 'lcov', 'clover' ],
            coverageThreshold: undefined,
            detectLeaks: false,
            detectOpenHandles: false,
            errorOnDeprecated: false,
            expand: false,
            filter: undefined,
            findRelatedTests: false,
            forceExit: false,
            globalSetup: undefined,
            globalTeardown: undefined,
            json: false,
            lastCommit: false,
            listTests: false,
            logHeapUsage: false,
            maxConcurrency: 5,
            maxWorkers: 11,
            noSCM: undefined,
            noStackTrace: false,
            nonFlagArgs: undefined,
            notify: false,
            notifyMode: 'failure-change',
            onlyChanged: false,
            onlyFailures: false,
            openHandlesTimeout: 1000,
            outputFile: undefined,
            passWithNoTests: false,
            projects: [],
            randomize: undefined,
            replname: undefined,
            reporters: undefined,
            rootDir: 'C:\\Users\\username\\Projects\\ClientName\\Chat',
            runInBand: undefined,
            runTestsByPath: false,
            seed: -401232581,
            shard: undefined,
            showSeed: undefined,
            silent: undefined,
            skipFilter: false,
            snapshotFormat: { escapeString: false, printBasicPrototype: false },
            testFailureExitCode: 1,
            testNamePattern: undefined,
            testPathPattern: '',
            testResultsProcessor: undefined,
            testSequencer: 'C:\\Users\\username\\Projects\\ClientName\\Chat\\node_modules\\@jest\\test-sequencer\\build\\index.js',
            testTimeout: undefined,
            updateSnapshot: 'new',
            useStderr: false,
            verbose: undefined,
            watch: false,
            watchAll: false,
            watchPlugins: undefined,
            watchman: true,
            workerIdleMemoryLimit: undefined,
            workerThreads: false
          },
          hasDeprecationWarnings: false,
          wallaby: {
            roots: [],
            watchPathIgnorePatterns: [
              '\\\\node_modules\\\\',
              '\\.\\\\dist\\\\|\\.\\\\build\\\\|\\.\\\\coverage\\\\|\\.\\\\git\\\\|\\\\\\..+\\\\',
              'C:\\Users\\username\\AppData\\Local\\Temp\\jest',
              '\\.\\\\dist\\\\',
              '\\.\\\\node_modules\\\\',
              '\\.\\coverage'
            ],
            testPathIgnorePatterns: [
              '\\\\node_modules\\\\',
              '\\.\\\\dist\\\\|\\.\\\\build\\\\|\\.\\\\coverage\\\\|\\.\\\\git\\\\|\\\\\\..+\\\\',
              'C:\\Users\\username\\AppData\\Local\\Temp\\jest',
              '\\.\\\\dist\\\\',
              '\\.\\\\node_modules\\\\',
              '\\.\\coverage'
            ],
            testMatch: [ '**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[tj]s?(x)' ],
            testRegex: []
          }
        }
      }
    },
    testFramework: { version: 'jest@24.8.0', configurator: 'jest@24.8.0', reporter: 'jest@24.8.0', starter: 'jest@24.8.0', autoDetected: true, toolVersion: '29.7.0' },
    filesWithCoverageCalculated: [],
    filesWithNoCoverageCalculated: [],
    globalSetup: false,
    dot: true,
    files: [
      { pattern: '\\\\node_modules\\\\', regexp: /\\node_modules\\/, ignore: true, trigger: true, load: true, file: true, test: true },
      {
        pattern: '\\.\\\\dist\\\\|\\.\\\\build\\\\|\\.\\\\coverage\\\\|\\.\\\\git\\\\|\\\\\\..+\\\\',
        regexp: /\.\\dist\\|\.\\build\\|\.\\coverage\\|\.\\git\\|\\\..+\\/,
        ignore: true,
        trigger: true,
        load: true,
        file: true,
        test: true
      },
      { pattern: 'C:\\Users\\username\\AppData\\Local\\Temp\\jest', regexp: /<homeDir>\AppData\Local\Temp\jest/, ignore: true, trigger: true, load: true, file: true, test: true },
      { pattern: '\\.\\\\dist\\\\', regexp: /\.\\dist\\/, ignore: true, trigger: true, load: true, file: true, test: true },
      { pattern: '\\.\\\\node_modules\\\\', regexp: /\.\\node_modules\\/, ignore: true, trigger: true, load: true, file: true, test: true },
      { pattern: '\\.\\coverage', regexp: /\.\coverage/, ignore: true, trigger: true, load: true, file: true, test: true },
      { pattern: '**/**', ignore: false, trigger: true, load: true, order: 1 },
      { pattern: '**/__tests__/**/*.[jt]s?(x)', ignore: true, trigger: true, load: true, file: true },
      { pattern: '**/?(*.)+(spec|test).[tj]s?(x)', ignore: true, trigger: true, load: true, file: true }
    ],
    captureConsoleLog: true,
    tests: [
      { pattern: '\\\\node_modules\\\\', regexp: /\\node_modules\\/, ignore: true, trigger: true, load: true, test: true, file: false },
      {
        pattern: '\\.\\\\dist\\\\|\\.\\\\build\\\\|\\.\\\\coverage\\\\|\\.\\\\git\\\\|\\\\\\..+\\\\',
        regexp: /\.\\dist\\|\.\\build\\|\.\\coverage\\|\.\\git\\|\\\..+\\/,
        ignore: true,
        trigger: true,
        load: true,
        test: true,
        file: false
      },
      { pattern: 'C:\\Users\\username\\AppData\\Local\\Temp\\jest', regexp: /<homeDir>\AppData\Local\Temp\jest/, ignore: true, trigger: true, load: true, test: true, file: false },
      { pattern: '\\.\\\\dist\\\\', regexp: /\.\\dist\\/, ignore: true, trigger: true, load: true, test: true, file: false },
      { pattern: '\\.\\\\node_modules\\\\', regexp: /\.\\node_modules\\/, ignore: true, trigger: true, load: true, test: true, file: false },
      { pattern: '\\.\\coverage', regexp: /\.\coverage/, ignore: true, trigger: true, load: true, test: true, file: false },
      { pattern: '**/__tests__/**/*.[jt]s?(x)', ignore: false, trigger: true, load: true, test: true, order: 2 },
      { pattern: '**/?(*.)+(spec|test).[tj]s?(x)', ignore: false, trigger: true, load: true, test: true, order: 3 }
    ],
    runAllTestsInAffectedTestFile: false,
    updateNoMoreThanOneSnapshotPerTestFileRun: false,
    compilers: {},
    smartStart: [ { test: true, source: false, pattern: '**/*', startMode: 'open' }, { test: false, source: true, pattern: '**/*', startMode: 'edit' } ],
    logLimits: { inline: { depth: 5, elements: 5000 }, values: { default: { stringLength: 8192 }, autoExpand: { elements: 5000, stringLength: 8192, depth: 10 } } },
    preprocessors: {},
    maxConsoleMessagesPerTest: 100,
    maxTraceSteps: 999999,
    maxTraceStepsForWatchExpressionPrefetch: 10,
    autoConsoleLog: true,
    delays: { run: 0, edit: 100, update: 0 },
    workers: { initial: 0, regular: 0, recycle: false },
    teardown: undefined,
    hints: {
      ignoreCoverage: '__REGEXP /ignore coverage|istanbul ignore|c8 ignore/',
      ignoreCoverageForFile: '__REGEXP /ignore file coverage/',
      commentAutoLog: '?',
      testFileSelection: { include: '__REGEXP /file\\.only/', exclude: '__REGEXP /file\\.skip/' }
    },
    automaticTestFileSelection: true,
    runSelectedTestsOnly: true,
    mapConsoleMessagesStackTrace: false,
    extensions: {},
    env: {
      type: 'node',
      params: {},
      runner: 'C:\\Users\\username\\AppData\\Local\\Volta\\tools\\image\\node\\20.9.0\\node.exe',
      viewportSize: { width: 800, height: 600 },
      options: { width: 800, height: 600 },
      bundle: true
    },
    reportUnhandledPromises: true,
    slowTestThreshold: 75,
    lowCoverageThreshold: 80,
    runAllTestsWhenNoAffectedTests: false,
    configCode: 'auto.detect#305962386',
    testLocations: [ '__tests__/pushNotifications.ts' ]
  },
  packageJSON: {
    dependencies: {
      '@sentry/node': '^7.80.1',
      '@types/express': '^4.17.13',
      '@types/jsonwebtoken': '^8.5.8',
      'async-kit': '^2.2.4',
      cors: '^2.8.5',
      dotenv: '^16.0.1',
      express: '^4.19.2',
      'firebase-admin': '^11.6.0',
      jsonwebtoken: '^9.0.0',
      mongoose: '^6.11.3',
      'node-fetch-cache': '^3.0.5',
      'socket.io': '^4.4.1',
      typescript: '^4.6.3'
    },
    devDependencies: {
      '@babel/preset-env': '^7.26.0',
      '@babel/preset-typescript': '^7.26.0',
      '@types/jest': '^29.5.14',
      '@types/node': '^17.0.25',
      '@types/socket.io': '^3.0.2',
      concurrently: '^7.1.0',
      jest: '^29.7.0',
      nodemon: '^2.0.19',
      'ts-jest': '^29.2.5'
    }
  },
  fs: { numberOfFiles: 44 },
  debug: [
    '2024-11-26T19:06:00.304Z project waiting for initial run signal\n',
    '2024-11-26T19:06:00.319Z model Initialization Completed: 463ms\n',
    '2024-11-26T19:06:00.505Z config Attempting automatic configuration for angular\n',
    '2024-11-26T19:06:00.521Z ui.service Starting UI service on port: 55000\n',
    '2024-11-26T19:06:00.526Z ui.service UI service started on port: 55000\n',
    '2024-11-26T19:06:00.528Z angular/cli config Angular CLI not found.\n',
    '2024-11-26T19:06:00.528Z config Finished attempting automatic configuration for angular (23ms)\n',
    '2024-11-26T19:06:00.528Z config Attempting automatic configuration for jest\n',
    '2024-11-26T19:06:00.794Z jest/config Detected Jest.\n',
    '2024-11-26T19:06:00.795Z jest/config Configured Jest.\n',
    '2024-11-26T19:06:00.795Z config Finished attempting automatic configuration for jest (267ms)\n',
    '2024-11-26T19:06:00.797Z project Wallaby Node version: v20.9.0\n',
    '2024-11-26T19:06:00.797Z project Wallaby config: C:\\Users\\username\\Projects\\ClientName\\Chat\\auto.detect\n',
    '2024-11-26T19:06:00.857Z fs File system starting\n',
    '2024-11-26T19:06:00.960Z fs File system scan completed\n',
    '2024-11-26T19:06:00.966Z project File cache: C:\\Users\\username\\.vscode-server\\extensions\\wallabyjs.wallaby-vscode-1.0.396\\projects\\6a6a735b67e15175\n',
    '2024-11-26T19:06:00.969Z project package.json file change detected, invalidating local cache\n',
    '2024-11-26T19:06:00.996Z workers Parallelism for initial run: 10, for regular run: 5\n',
    '2024-11-26T19:06:00.996Z workers Starting run worker instance #0\n',
    '2024-11-26T19:06:00.996Z workers Starting run worker instance #1\n',
    '2024-11-26T19:06:00.996Z workers Starting run worker instance #2\n',
    '2024-11-26T19:06:00.996Z workers Starting run worker instance #3\n',
    '2024-11-26T19:06:00.996Z workers Starting run worker instance #4\n',
    '2024-11-26T19:06:00.996Z workers Starting run worker instance #5\n',
    '2024-11-26T19:06:00.996Z workers Starting run worker instance #6\n',
    '2024-11-26T19:06:00.996Z workers Starting run worker instance #7\n',
    '2024-11-26T19:06:00.996Z workers Starting run worker instance #8\n',
    '2024-11-26T19:06:00.996Z workers Starting run worker instance #9\n',
    '2024-11-26T19:06:00.999Z workers Web server is listening at 61672\n',
    '2024-11-26T19:06:00.999Z project File cache requires some updates, waiting required files from IDE\n',
    '2024-11-26T19:06:01.221Z project Stopping process pool\n',
    '2024-11-26T19:06:01.245Z project Test run started; run priority: 3\n',
    '2024-11-26T19:06:01.247Z project Running all tests\n',
    '2024-11-26T19:06:01.252Z project Test run finished\n',
    '2024-11-26T19:06:01.252Z project Test run data re-queued\n',
    '2024-11-26T19:06:01.440Z workers Started run worker instance (delayed) #0\n',
    '2024-11-26T19:06:01.455Z workers Started run worker instance (delayed) #1\n',
    '2024-11-26T19:06:01.470Z workers Started run worker instance (delayed) #3\n',
    '2024-11-26T19:06:01.473Z workers Started run worker instance (delayed) #2\n',
    '2024-11-26T19:06:01.492Z workers Started run worker instance (delayed) #4\n',
    '2024-11-26T19:06:01.496Z workers Started run worker instance (delayed) #5\n',
    '2024-11-26T19:06:01.517Z workers Started run worker instance (delayed) #7\n',
    '2024-11-26T19:06:01.525Z workers Started run worker instance (delayed) #6\n',
    '2024-11-26T19:06:01.535Z workers Started run worker instance (delayed) #8\n',
    '2024-11-26T19:06:01.544Z workers Started run worker instance (delayed) #9\n',
    '2024-11-26T19:11:13.498Z project Requested to run all tests\n',
    '2024-11-26T19:11:13.509Z project Test run started; run priority: 3\n',
    '2024-11-26T19:11:13.509Z project Running all tests\n',
    '2024-11-26T19:11:13.512Z workers Starting test run, priority: 3\n',
    '2024-11-26T19:11:13.512Z nodeRunner Starting sandbox [worker #0, session #kswxl]\n',
    '2024-11-26T19:11:13.512Z nodeRunner Preparing sandbox [worker #0, session #kswxl]\n',
    '2024-11-26T19:11:13.512Z nodeRunner Prepared sandbox [worker #0, session #kswxl]\n',
    '2024-11-26T19:11:13.512Z workers [worker #0, session #kswxl] Running tests in sandbox\n',
    "2024-11-26T19:11:14.635Z workers 'Scheduling Jest Test Run (kswxl): 2024-11-26T19:11:14.631Z'\n",
    '2024-11-26T19:11:26.582Z workers [kswxl] Loaded unknown number of test(s)\n',
    '2024-11-26T19:11:26.610Z workers [kswxl] Test executed: should send push notification to channel members, but not the sender\n',
    '2024-11-26T19:11:26.618Z workers [kswxl] Test executed: getContactModelsByIds should throw when no tenant is provided\n',
    '2024-11-26T19:11:26.621Z workers [kswxl] Test executed: getContactModelsByIds should return empty array when no contactIds are provided\n',
    '2024-11-26T19:11:26.628Z workers [kswxl] Run 3 test(s), skipped 0 test(s)\n',
    "2024-11-26T19:11:26.630Z workers 'Jest Test Run Complete (kswxl): 2024-11-26T19:11:26.629Z'\n",
    '2024-11-26T19:11:26.631Z workers [kswxl] Sandbox is responsive, closing it\n',
    '2024-11-26T19:11:26.632Z project Test run finished\n',
    '2024-11-26T19:11:26.633Z project Processed console.log entries\n',
    '2024-11-26T19:11:26.633Z project Processed loading sequences\n',
    '2024-11-26T19:11:26.634Z project Processed executed tests\n',
    '2024-11-26T19:11:26.642Z project Processed code coverage\n',
    '2024-11-26T19:11:26.661Z project Test run result processed and sent to IDE\n'
  ]
}

[mburnell]

Thanks for reporting the issue - we've been able to reproduce it. We're looking into what we can do to support this workflow, and will get back to you with further details as they emerge.

[mburnell]

We've made changes to support this workflow and released them in Wallaby for VS Code 1.0.398 and Wallaby Core 1.0.1655. There are a few things to be aware of.

When started, Wallaby will create a port forwarding entry (visible in the VS Code Ports UI). This port will be private by default. Because of the way authentication is handled for private ports (requiring redirects) and the way the Wallaby UI view is hosted (in a VS Code webview, rather than a full browser instance), Wallaby UI cannot work inside VS Code with such a private port.

There are two ways to use the Wallaby UI with remote tunnels:

1. Change the port to public. While this will mean anyone with the URL can access the tunneled endpoint, it will not load / connect to Wallaby without the "secret" (a cryptographic value unique to the Wallaby session provided when launched from VS Code). Anyone attempting to abuse the URL without the secret can only cause a bit of extra load by requesting the Wallaby UI base assets (not your private data). The port can be changed from private to public by right-clicking on the entry in the Ports UI and using Port Visibility->Public. If there are multiple mapped ports and you need to identify which one is Wallaby's, you can use the Wallaby.js: Show Wallaby Remote Port command.

2. Use Wallaby UI in linked mode. Using the Wallaby.js: Open in Browser command will open the Wallaby UI in your browser, which will correctly navigate the authentication redirects, and the UI will load and function correctly.

[schonarth]

Yes, after I updated to the latest releases and started Wallaby again in the remote environment, I saw a second shared port in VS Code. The first is the actual tunnel session, and then Wallaby at 55000. When I switched Wallaby's to public, the UI appeared here.

Thanks a lot!

[mburnell]

Good to hear it's working for you! I've updated my answer above to cover the additional changes we've made to support this workflow, along with some additional information.