Catastrophic Failure at getContainerNameFromURL (ContainerClient)

[OldManMeta]

"dependencies": {
"@azure/storage-blob": "^12.11.0",
"@emotion/react": "11.10.4",
"@emotion/styled": "11.10.4",
"@mui/icons-material": "5.10.3",
"@mui/material": "5.10.3",
"@types/react": "18.0.18",
"@types/react-dom": "18.0.6",
"@types/uuid": "^8.3.4",
"blob-util": "^2.0.2",
"dotenv-webpack": "^8.0.1",
"react": "^18.2.0",
"react-cropper": "^2.1.8",
"react-dom": "^18.2.0",
"react-image-file-resizer": "^0.4.8",
"rxjs": "7.5.6",
"style-loader": "^3.3.1"
},
"devDependencies": {
"css-loader": "^6.7.1",
"file-loader": "^6.2.0",
"filemanager-webpack-plugin": "^7.0.0",
"source-map-loader": "^3.0.1",
"ts-loader": "^9.2.8",
"typescript": "^4.6.3",
"webpack": "^5.71.0",
"webpack-cli": "^4.9.2"
}

Describe the bug
I have created a local instance of Azurite.
I have connected to it with Azure Storage Explorer.
I have create a CORS policy.

I can successfully create an instance of a Blob Service Client.

I call the method:

blobServiceClient.getContainerClient(<name>)

Uncaught (in promise) Error: Unable to extract containerName with provided information.
at ContainerClient.getContainerNameFromUrl (ContainerClient.ts:2122:13)
at new ContainerClient (ContainerClient.ts:772:32)
at BlobServiceClient.getContainerClient (BlobServiceClient.ts:505:12)
at newTestLocal.tsx:29:51
at Generator.next ()
at fulfilled (mainPresenter.tsx:428:29)

To Reproduce
Steps to reproduce the behavior:

1. Create a new React Application
2. Setup with SAS token - confirm connection to Storage
3. Instantiate a new Blob Service Client
4. Call to getContainerClient

Expected behavior
No error and a return to state either the blob is available or not

Screenshots
Blob Service Client created

Error shown:

This is clearly happening because the Blob Service Client has a URL which is complete jank consisting of the SAS token - and when calling the getContainerClient - it blows up completely, because along the construction path, someone decided it would be a good idea to try and extract the container name from a URL - even thought it is explicitly provided as a parameter.

I note here is your instructions:
https://docs.microsoft.com/en-us/javascript/api/@azure/storage-blob/blobserviceclient?view=azure-node-latest#@azure-storage-blob-blobserviceclient-getcontainerclient

A work around would be most appreciated asap.

[xirzec]

If I understand correctly, you are connecting to a local Azurite instance rather than a service account and having issues with calling getContainerClient off of the service client.

Can you share how you are creating the service client and passing the SAS token? I note from your screenshot that somehow the URL is getting mangled https://http//127.0.0.1 instead of http://127.0.0.1

I agree with you that the constructor logic inside ContainerClient is a little silly, since there are several code paths where the container name is known, and yet it always tries to parse the url:

azure-sdk-for-js/sdk/storage/storage-blob/src/ContainerClient.ts

Line 772 in 6a3d6c0

this._containerName = this.getContainerNameFromUrl();

[OldManMeta]

@xirzec - Jeff thanks for the response.

Can you share how you are creating the service client and passing the SAS token? I note from your screenshot that somehow the URL is getting mangled https://http//127.0.0.1 instead of http://127.0.0.1

Your eagle eye has spotted what was indeed the source of the problem.

Let this be a lesson in 3am cut and paste.... I had noticed the local Azurite instance is running only on http, and so modifying a piece of my logic that constructs the URL, I had a pesky + symbol lurking around creating a concatenation.

Let me close this out, ruled as self inflicted stupidity.

[xirzec]

@OldManMeta no worries, the number of times I've been smashing my face into my keyboard and then a coworker walks over and spots the problem in 5 seconds... well let's just say it's a bit bigger than zero. 😉