Troubleshooting NodeJS Azure function within a docker container using VS Code debugger

I am facing issues setting up remote debugging for my NodeJS Azure function in a docker container.

Configuration:

Following the guidelines from official documentation, I created an HTTP triggered function as per the steps below:

func init --worker-runtime node --language typescript --docker
func new --name HttpExample --template "HTTP trigger" --authlevel anonymous

This resulted in the creation of the specified folder structure and Docker file.

https://i.sstatic.net/wkLsx.png

The Docker file generated was as follows:

FROM mcr.microsoft.com/azure-functions/node:4-node18

ENV AzureWebJobsScriptRoot=/home/site/wwwroot \
    AzureFunctionsJobHost__Logging__Console__IsEnabled=true

COPY . /home/site/wwwroot

RUN cd /home/site/wwwroot && \
    npm install && \
    npm run build

I initiated the container with Node debugger enabled using the command below:

docker run -p 8080:80 -p 9233:9233 -e NODE_OPTIONS=--inspect=0.0.0.0:9233 -it af-docker

Subsequently, I found that the debugger was indeed listening on port 9233.

info: Host.Function.Console[0]
  Debugger listening on ws://0.0.0.0:9233/77214a10-aeb3-47e0-ac5a-2dcd4f021008
info: Host.Function.Console[0]
  For help, see: https://nodejs.org/en/docs/inspector

To enable remote debugging, I edited the launch.json file with appropriate configurations:

{
    "configurations": [
    {
        "type": "node",
        "request": "attach",
        "name": "Docker: Attach to Node",
        "remoteRoot": "/site/wwwroot/dist/src/functions",
        "localRoot": "${workspaceRoot}\\src\\functions",
        "port": 9233,
        "address": "localhost",
        "sourceMaps": true,
        }
    ]
}

Outcome:

Upon initiating debugging (F5), the container output indicated successful attachment of the debugger.

info: Host.Function.Console[0]
  Debugger attached.

However, despite this success message, I encountered errors in the debug console suggesting issues with source map paths and breakpoints not functioning correctly.

LanguageWorkerConsoleLogWorker b62c4a73-8509-4a3f-a496-cca18cb56bb0 connecting on 127.0.0.1:42681
worker-bundle.js:2
Could not read source map for file:///azure-functions-host/workers/node/dist/src/nodejsWorker.js: ENOENT: no such file or directory, open 'C:\azure-functions-host\workers\node\dist\src\nodejsWorker.js.map'
Could not read source map for file:///home/site/wwwroot/dist/src/functions/HttpExample.js: ENOENT: no such file or directory, open 'C:\home\site\wwwroot\dist\src\functions\HttpExample.js.map'

The invalid paths (C:\azure-functions-host\**) and (C:\home\site\**) do not exist locally, indicating potential misconfiguration in the launch.json file. Further investigation is required to rectify this issue.

Answer №1

The source map for file:///azure-functions-host/workers/node/dist/src/nodejsWorker.js could not be read: ENOENT: the file or directory does not exist, open 'C:\azure-functions-host\workers\node\dist\src\nodejsWorker.js.map'. Similarly, the source map for file:///home/site/wwwroot/dist/src/functions/HttpExample.js could not be read: ENOENT: no such file or directory, open 'C:\home\site\wwwroot\dist\src\functions\HttpExample.js.map'

This error occurs because the debugger is searching for the 'dist\src\functions' folder in your directory structure.

To create the 'dist' folder, follow these steps in order-

 1. func init --worker-runtime node --language typescript --docker
 2. func new --name HttpExample --template "HTTP trigger" --authlevel anonymous
 3. npm install
 4. npm start

Your folder structure will now display as outlined above.

I then applied the same modifications mentioned in the 'launch.json' file.

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Docker: Attach to Node",
            "type": "node",
            "request": "attach",
            "remoteRoot": "/site/wwwroot/dist/src/functions",
            "localRoot": "${workspaceRoot}\\src\\functions",
            "port": 9233,
            "address": "localhost",
            "sourceMaps": true,
        }
    ]
}

After starting the debugger, I received the anticipated output.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide on incorporating TypeScript ambient declaration interfaces within an interface specified in a d.ts file

I am looking to create a helper in a .ts file like the following: class ResponseHelper implements IResponseHelper {...} The IResponseHelper is a simple .d.ts file with the structure: import * as mongoose from 'mongoose'; import * as express fr ...

Angular and TypeScript make a powerful combination when working with the mat-table component

I'm currently working with Angular's mat-table component. One challenge I'm facing is setting a caption for the table. <table mat-table [dataSource]="dataSource" class="mat-elevation-z8" id=tbl_suchergebnis> <caption> ...

Establishing the parameters for a list that is not empty using a specific data type

Is it feasible to establish a non-empty list within TypeScript's type system? While I am aware that it is possible to define a list with a specific number of elements, similar to a Tuple: type TwoElementList = [number, number]; This approach is limi ...

Encountering an issue with NextJS 13 when utilizing the vectorstore recommended by Langchain, specifically receiving an error message stating that HNSWLib

Currently, I am building an application utilizing Langchain and OpenAI for assistance. My approach involves loading data using JSONLoader and intending to save it in a vectorstore. This way, I can provide specific answers to user queries based on the store ...

What is the process of changing a number to the double data type in JavaScript or TypeScript?

Within a single input field, users can enter various numbers such as 12, 12.1, 12.30, and 12.34. The challenge is to pass this value in a service call where only the value can be sent as a number but with two decimal points. let a = input //a will be a ty ...

What could be causing the Typescript error when utilizing useContext in combination with React?

I am currently working on creating a Context using useContext with TypeScript. I have encapsulated a function in a separate file named MovieDetailProvider.tsx and included it as a wrapper in my App.tsx file. import { Context, MovieObject } from '../in ...

Is there a TypeScript type that represents a subset of the keys of another type?

When given an object, is it possible to create a second typed object that contains only a subset of the original keys with different value types? I attempted to use Partial<keyof ...>, but it did not have the desired effect. Is there another approach ...

"Would someone be able to advise me on how to correctly reference the PrimeNG AutoCompleteModule within my

I've been developing an application that relies on auto-complete functionality. To begin, I installed some available templates using the dotnet command line tool and then selected a template directory before installing the Angular template. dotnet ne ...

Different types of arrays suitable for the useState hook

I have a scenario where I am utilizing setState to assign an array of objects. Here is the code snippet: const [friendList, setFriendList] = useState<any>(); const _onCompleted = (data: any) => { let DATA = data.me.friends.map( (item ...

The router is unable to direct when an item is clicked

I am encountering an issue with my routing setup - when I click on an item in the list-item component, it does not successfully route to the detail-component. Here is a glimpse of my source code: product-list.component.html: <h1>Product List Compon ...

Overloading TypeScript functions with Observable<T | T[]>

Looking for some guidance from the experts: Is there a way to simplify the function overload in the example below by removing as Observable<string[]> and using T and T[] instead? Here's a basic example to illustrate: import { Observable } from ...

Typescript's approach to function decorators in their original form

I have a basic decorator function in Python that I am using to decorate another function. def decorator(fn): def wrapper(args): print("calling function") fn(args) return wrapper @decorator def printMyName(name): prin ...

Using logical operators with potential undefined values in TypeScript

I've encountered an error that I'm struggling to fully understand. It seems to be related to the fact that a certain value might be undefined, requiring me to check if it exists. However, when setting up the code as shown below, errors occur. Sur ...

Issue encountered when attempting to assign a local variable as the initial value of an enum object member

Check out this playground link for a TypeScript example. I'm having issues setting the initial value of an enum member using a constant numeric value. Unfortunately, all subsequent values give an error stating "Enum member must have initializer." Is ...

Utilizing custom types in React with TypeScript and Prop-Types

Currently, I am working with a string type literal that looks like this: type MyType = 'str1' | 'str2' | 'str3'. I need one of my props to only accept this specific type, but I'm struggling to specify this in PropTypes. ...

NG build error: Module parsing failed due to an unexpected token - no updates made

Two days ago, out of nowhere, we started encountering build errors during deployment using GitLab CI. No alterations have been made to the build scripts, and none of the versions of NPM, NG, or Angular have been modified. The same compilation commands cont ...

After selecting an item, the Next UI navbar menu seems to have trouble closing

Having trouble with the navbar menu component not closing when an option is selected from the menu. The menu does open and close successfully within the menu icon. I attempted to use onPress() but it doesn't seem to be working as expected. "use c ...

Script for running a React app with Prettier and eslint in a looping fashion

My Create React App seems to be stuck in a compile loop, constantly repeating the process. Not only is this behavior unwanted, but it's also quite distracting. The constant compiling occurs when running the default npm run start command. I suspect t ...

The expected rendering of column headers was not achieved following the refactoring of <Column />

After making changes, the header is not rendering properly and I cannot see the "Product ID" header for the column: // DataTable.tsx // React Imports import React, { useState } from 'react'; // PrimeReact Imports import { DataTable as DT } from ...

Can Next.js be integrated with Docker and Nginx for a seamless development environment?

I have a nextjs project that I want to run using Docker and nginx. The setup requires nginx to connect to nextjs behind the scenes, with only nginx being able to communicate with nextjs (users must talk to nginx to access nextjs). Given the typical nextjs ...