Debugging Errors & Best Practices
In this lesson, we'll explore effective debugging strategies and best practices for developing with Webiny. You'll learn how to quickly identify and fix issues in both Admin and API applications.
In this lesson...
Here are the topics we'll cover
Debugging API and Lambda errors.
Debugging Admin application errors.
Best practices for error prevention.
Understanding Webiny's Error Handling
Webiny consists of Admin and API applications, which are frontend and backend apps respectively. This means errors can occur in different places:
- API application - Server-side Lambda function errors, GraphQL queries and mutations
- Admin application - Client-side React errors in the browser
- Infrastructure - Deployment errors from Pulumi (permissions, quotas, resource configuration)
Understanding where an error originates is the first step to fixing it efficiently.
Debugging API Application Errors
API errors occur in AWS Lambda functions. During local development with yarn webiny watch api, debugging is straightforward because your code runs locally.
Debugging Tools for API
Console Logs
When developing API extensions, console logs are a quick and solid choice for debugging - they get the job done:
With Local AWS Lambda Development (yarn webiny watch api), your console logs appear directly in the terminal. You don't need to check CloudWatch or the browser - the watch command outputs all logs immediately, giving you instant feedback like any local Node.js application.
Webiny Logger
For a more robust logging solution, especially for production use, use Webiny's Logger:
When to use Logger vs console.log:
- console.log - Quick debugging during local development
- Logger - Production logging that needs to persist to CloudWatch
Debugging Admin Application Errors
The Admin application is a React application running in the browser. Use standard browser debugging tools to identify and fix issues.
Debugging Tools for Admin
When developing Admin extensions, use your browser's DevTools:
- Console - View logs and errors
- Network tab - Inspect GraphQL requests and responses
- React Developer Tools - Debug React component state and props
- GraphQL Network Inspector - Inspect and debug GraphQL queries and mutations
Use the React DevTools "Select Element" tool to click on any UI element and immediately see which React component renders it. This is invaluable when working with unfamiliar code.
Debugging Deployment Errors
Deployment errors occur when you run yarn webiny deploy. When Pulumi fails to deploy, errors are printed in the terminal, which helps you identify and fix issues in your infrastructure code.
It's time to take a quiz!
Test your knowledge and see what you've just learned.
Where do console.log statements appear when running 'yarn webiny watch api'?
Summary
Effective debugging is essential for productive development with Webiny:
- API debugging - Use console.log during local development, Logger for production
- Admin debugging - Use browser DevTools, React DevTools, and GraphQL Network Inspector
- Deployment errors - Read Pulumi error messages in terminal to fix infrastructure issues
Different tools are available for different parts of your application: browser-based tools for Admin development, and console logs or Logger for API development.