How to debug Netlify serverless lambda functions using VS Code for your JAMstack app

UpdatedMay 13, 2021

•5 min read•View as Markdown

How to debug Netlify serverless lambda functions using VS Code for your JAMstack app

Tapas Adhikary

Comments (1)

Join the discussion

Michal5y ago

Hi,

thanks for a great article. I tried to follow it but can't make it work. After some investigation it looks like the sourcemaps for lambda functions are actually not generated at all and therefore the breakpoints do not work. I can't find sourcemaps in /lambda folder. Am I missing any pre-requisite?

I am using netlify-cli/2.69.1 win32-x64 node-v14.15.1

Thanks

Tapas Adhikary5y ago

I am running with the same version of the netlify-cli and found it working. Actually, I got the same error in the beginning when I had issues in establishing the debugging(one of the motivations for writing this article).

A couple of things that I could found to resolve is,

If you have installed netlify locally, have this property set correctly

"program": "${workspaceFolder}\\node_modules\\.bin\\netlify"

If you have netlify globally, please omit the program property altogether.

If you are using pwa-node, make sure you have resolveSourceMapLocations defined.

Here is an example of the launch.json file where netlify is defined globally with pwa-node,

{
    "version": "1.0.0",
    "configurations": [
      {
        "name": "Netlify Debugging",
        "type": "pwa-node",
        "request": "launch",
        "runtimeArgs": ["run-script", "debug"],
        "runtimeExecutable": "npm",
        "skipFiles": ["<node_internals>/**"],
        "resolveSourceMapLocations": [
            "${workspaceFolder}/**",
            "!**/node_modules/**"
        ]
      }
    ]
  }

Please let me know if it helps. If you happen the fix it in any other ways, that would be great too to be aware Michal.

Another thing is, make sure the same port netlify is not running in parallel too..

With all the explained here, I am able to run it.. Just done the same settings again as it explained..

Michal5y ago

Tapas Adhikary Hi, neither of these things help. It looks like the sourcemap files for lambda functions are not generated at all. Where exactly do you have them? In /lambda folder with generated .js files?

Tapas Adhikary5y ago

Michal ,

This is what I'm doing for my current project,

I use netlify dev for my functions, not netlify-lambda. As mentioned here it fits my need to incrementally develop the functions.
All my functions are inside a special folder called functions.

Then defined the netlify.toml file with these content,

[build]
  functions = "functions"

[[redirects]]
  from = "/api/*"
  to = "/.netlify/functions/:splat"
  status = 200

If you are using netlify-lambda I see an open issue similar to what you face?

Michal5y ago

Tapas Adhikary

I do use netlify dev. Yes, the functions are in /src/lambda and when I run netlify dev they are generated to /lambda folder. However, there are no sourcemaps in /lambda folder. I believe that is why I get the error about sourcemaps not found.

When I add a break point to any function in /src/lambda it is not triggered, because the actual JS that is being run when I call any Netlify function is in /lambda folder.

Where exactly are sourcemaps for lambda functions located in your project?

Tapas Adhikary5y ago

Michal, hmm interesting as I do not see any of the related sourcemaps either. My functions folder is outside of the src though as the src is meant for having the UI code for me.

I see it connects all the time and I am able to debug too..

Do you want to debug it out together 😃? We can jump into a 30 mins google meet/zoom call to do that tomorrow. Let me know, I can ping you the meeting id on Twitter.

Michal5y ago

Tapas Adhikary I finally made it work. I had to add lambda.config.js file and reference to it in package.json scripts. You can check the details here https://github.com/netlify/netlify-lambda/issues/262

Jamstack for All

Part 6 of 11

Jamstck is not new. It's around since 2015 and growing every day. In this series, We will learn about Jamstack basic to advanced concepts. Follow the series for knowledge, practical examples, and fun!

Up next

How to create a Jamstack pet store app using Stripe, Gatsbyjs, and Netlify functions

Jamstack is a modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup. One of the aspects of Jamstack is, it is practically serverless. To put it more clearly, we do not maintain any server-side applica...

More from this blog

Goodbye, Slow-Motion Tortoise: A Deep Dive into SSR Streaming

Traditional SSR is great, but it has a massive buffering problem. Let's look into the SSR Streaming and learn how it could be a game changer.

Jul 21, 202610 min read97

Goodbye, Slow-Motion Tortoise: A Deep Dive into SSR Streaming

Mastering React Design Patterns for Building Maintainable Forms

Learn how to build maintainable, reusable forms in React using design patterns like custom hooks, compound components, and context for scalable CRUD

Feb 10, 20266 min read548

Mastering React Design Patterns for Building Maintainable Forms

JavaScript Variables Explained Clearly: Values, Types, and How Data Really Works

Learn how JavaScript variables work, including let vs const, primitive and reference types, pass by value, and how JavaScript stores data in memory.

Jan 28, 20265 min read178

JavaScript Variables Explained Clearly: Values, Types, and How Data Really Works

JavaScript Explained From Scratch: How the Web Becomes Interactive

A beginner-friendly introduction to JavaScript covering what it is, how it works, and how to set up your JavaScript environment

Jan 22, 20265 min read146

JavaScript Explained From Scratch: How the Web Becomes Interactive

Tidbit 01: How Does Event Loop Handle Promises? Ever Thought?

Learn how the promises are handled internally using event loop. This concept is essentials to debug and work with async programming.

Jun 10, 20252 min read461

Tidbit 01: How Does Event Loop Handle Promises? Ever Thought?

GreenRoots Blog - A Blog by Tapas Adhikary

186 posts

Educator | YouTuber | Building ReactPlay | Let's Connect

The JAMstack is a modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup. JAMstack applications are practically serverless. To put it more clearly, we do not maintain any server-side applications but rather use existing services (like email, media, database, search, and so on).

Netlify serverless functions are an extremely flexible way to become practically serverless. It is hassle-free to set it up and get it running. As a developer of these functions, it is an implicit requirement. We should know how to debug them when a painful situation arises. I haven’t found many resources on the internet that explain this debugging setup in a step-by-step manner. That’s why I wrote this article.

If you use code editors like Visual Studio Code(VS Code), it should be easier to set up. In this article, we will learn how to debug Netlify Functions using VS Code.

Netlify Serverless Function

Netlify functions are Powered by AWS Lambda. Using the AWS Lambda serverless function, we can run server-side code without running a dedicated server. However, creating an AWS account, managing service discovery, configuring API gateways, etc., could be overwhelming for someone who wants to stick to the business logic.

Netlify lets us deploy serverless Lambda functions without an AWS account. Netlify takes all the underlying management part care. You can learn more about managing serverless functions from here.

Here is an example of a simple serverless function,

exports.handler = async (event, context) => {
  const { id } = JSON.parse(event.body);

   // make an API call, send an email, search, 
  // media, everything!
  const { data, errors } = await query(query, { id });

  if (errors) {
    return {
      statusCode: 500,
      body: JSON.stringify(errors)
    };
  }

  return {
    statusCode: 200,
    body: JSON.stringify({ item: data.deleteItem })
  };
};

Netlify deploys these functions as full API endpoints. These functions receive request context or event data and return the client's response data (like UI application) to consume.

How to Debug Netlify Function using VS Code

Assuming you are already using VS Code editor for development, you may find this section straightforward and simple to understand.

Step 1: To get started with the debugging, we need to install the netlify-cli command-line tool. Open a command prompt at the project root directory and execute this command to install netlify-cli locally to your project.

npm install netlify-cli --save-dev

To install it globally, use this command,

npm install -g netlify-cli

Step 2: Create a launch file. Click on the ‘Run’ option from the left menu and then click on the link, “create a launch.json file” as shown in the image below.

Step 3: A list of options will appear to select from. Please select the option, Node.js(preview). If you are on an older version of the VS Code and the preview environment is not available, please select Node.js instead.

Step 4: A Launch.json file will be created with the following content. If you had selected a ‘Node’ environment in the last step, you would see the type as, ‘node’.

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${file}"
        }
    ]
}

Change the file content to the content shown below. If you already have an existing Launch.json file, edit that to add the below configuration.

{
    "version": "0.2.0",
    "configurations": [
      {
        "name": "Netlify Debugging",
        "type": "pwa-node",
        "request": "launch",
        "program": "${workspaceFolder}\\node_modules\\.bin\\netlify",
        "runtimeArgs": ["run-script", "debug"],
        "runtimeExecutable": "npm",
        "skipFiles": ["<node_internals>/**"],
        "resolveSourceMapLocations": [
            "${workspaceFolder}/**",
            "!**/node_modules/**"
        ]
      }
    ]
  }

Please note, if you set the type to ‘node’ instead of ‘pwa-node’ the ‘resolveSourceMapLocations’ array will not work. You can remove it. The ‘resolveSourceMapLocations’ config parameter makes sure we do not get unnecessary warnings for not having the source map files inside the node_modules folder.

You may also not need the program attribute in the configuration if netlify-cli is installed globally.

Step 5: Open the package.json file and add this entry under the scripts section,

"debug": "netlify dev --inspect"

Step 6: We are all set. We need to start the debugging. To start the debugging, click on the play icon at the left side-bar.

Step 7: Set breakpoints as required.

Step 8: Click on the play button at the left-top corner to start the debugging.

You should see an item appearing in the ‘CALL STACK’ section to indicate. We are ready to debug. A browser window will also pop open at this stage with the Netlify URL. By default, it is, http://localhost:8888. You can leave that window as it is.

Step 9: The Debug Console log will also print about running Netlify functions in the debug mode.

Step 10: When you make an API call(using the user interface or any tools like PostMan), you should see the code execution paused at the breakpoint.

Step 11: At this time, you can inspect the variable values, check the scopes, etc., from the left-side panels, as shown in the image below.

Step 12: Last but not least, you can control the debugging(Stepping through, coming out of the debug mode, etc.) from this control.

Before you go…

Thank you for reading this far! Let’s connect. You can @ me on Twitter (@tapasadhikary) with comments, or feel free to follow.

Command Palette

Comments (1)

Jamstack for All

How to create a Jamstack pet store app using Stripe, Gatsbyjs, and Netlify functions

More from this blog

Netlify Serverless Function

How to Debug Netlify Function using VS Code

Before you go…