TypeError: Invalid URL: `undefined/api/execute` when using sandbox `exec`

[ItsWendell]

Description

When attempting to execute a command within a Worker sandbox environment, the request fails with a TypeError: Invalid URL. This suggests that the base URL might not be set or doesn't correctly resolve within the Worker's environment, resulting in an undefined.

Steps to Reproduce

1. Configure a Worker project with a service binding for a sandbox service in wrangler.toml.

2. Enable the nodejs_compat compatibility flag.

3. In the Worker's source code, retrieve the service binding for the sandbox.

4. Attempt to execute a command using the sandbox service like so:

   // Assuming 'env.Sandbox' is the service binding for the sandbox service.
   const sandbox = getSandbox(env.Sandbox, "sandbox-test");
   const result = await sandbox.exec("ls", []);
   console.log("result", result);

5. Run the Worker using wrangler dev.

Expected Behavior

The sandbox.exec() method should successfully make an HTTP POST request to the configured sandbox service endpoint (e.g., http://127.0.0.1:8787/api/execute/) and return the result of the executed command.

Actual Behavior

The request fails, and the following error is thrown in the console:

[HTTP Client] Making POST request to undefined/api/execute/
✘ [ERROR] [HTTP Client] Request error: POST undefined/api/execute [TypeError: Invalid URL: undefined/api/execute]

Environment

• Wrangler version: 4.22.0
• Node.js version: v20.18.1
• Operating System: Linux
• Compatibility Date: 2024-05-01
• Enabled Compatibility Flags: nodejs_compat, enable_request_signal

```log
[HTTP Client] Making POST request to undefined/api/execute/
✘ [ERROR] [HTTP Client] Request error: POST undefined/api/execute [TypeError: Invalid URL: undefined/api/execute]

[ItsWendell]

Here's a workaround that I made that works for me:

import { type ContainerOptions, getContainer } from "@cloudflare/containers";
import { Sandbox as SandboxBase } from "@cloudflare/sandbox";
import { createClient } from "@cloudflare/sandbox/client";

export class Sandbox extends SandboxBase {
  constructor(state: DurableObjectState, env: Env, options: ContainerOptions) {
    super(state, env, options);
    this.client = createClient({
      baseUrl: `http://localhost:${this.defaultPort}`,
      stub: this,
      port: this.defaultPort,
    });
  }

  containerFetch(
    requestOrUrl: Request | string | URL,
    portOrInit?: number | RequestInit,
    portParam?: number
  ): Promise<Response> {
    // HOTFIX: Fix request URLs that don't start with http, add http://localhost:3000

    let finalRequestOrUrl = requestOrUrl;

    if (finalRequestOrUrl instanceof Request) {
      finalRequestOrUrl.url = finalRequestOrUrl.url.startsWith("http")
        ? finalRequestOrUrl.url
        : `http://localhost:${this.defaultPort}${finalRequestOrUrl.url}`;
    } else if (typeof finalRequestOrUrl === "string") {
      finalRequestOrUrl = finalRequestOrUrl.startsWith("http")
        ? finalRequestOrUrl
        : `http://localhost:${this.defaultPort}${finalRequestOrUrl}`;
    }

    return super.containerFetch(finalRequestOrUrl, portOrInit, portParam);
  }
}

export const getSandbox = async (
  ns: DurableObjectNamespace<Sandbox>,
  id: string
) => {
  return getContainer(ns, id);
};

There seems to be two issues here with the creation of the HTTPClient within the Sandbox (

sandbox-sdk/packages/sandbox/src/index.ts

Line 12 in c5bd973

client: HttpClient = new HttpClient({

):

1. The sandbox's HTTPClient isn't created with a baseUrl, which breaks requests and URL objects.
2. The stub (the container itself) is not passed to the client in

   sandbox-sdk/packages/sandbox/src/index.ts

   Line 12 in c5bd973

   client: HttpClient = new HttpClient({

[tlgimenes]

I'm also seeing the same behavior in here. Waiting for this fix for testing this new feature. Really excited for what I'm building with this

[ItsWendell]

I'm also seeing the same behavior in here. Waiting for this fix for testing this new feature. Really excited for what I'm building with this

I've posted a workaround that you can just use in your own project in order to get started with the sandbox in my previous post, if you want to start playing around it earlier.