In today's fast-paced development environment, having an efficient and seamless logging system is crucial for maintaining and debugging applications. App Spaces is a new experience which does things a bit differently from what’s common in Azure today. It brings different logging systems together to form a seamless end-to-end experience so that you can start producing and monitoring your application easily.
First, what is App Spaces?
App Spaces is a new experience which is designed to simplify the process of building end-to-end applications in Azure. Here’s how it stands out:
- Visual Design Interface: App Spaces provides a simple interface that helps you visualize your architecture, making it easier to build and manage your applications end-to-end.
- Automatically chooses the best service to host your code: One of the biggest challenges in building applications is deciding which services to use. App Spaces removes this complexity by analyzing your code and choosing for you.
- Simple but doesn’t box you in: While App Spaces removes unnecessary complexity for you, it still gives your application the room to grow for when you inevitably get the point where you’ll need more of the advanced features that Azure has to offer.
Learn more about App Spaces here
Client-side Logging for Static App Components
Logging should be simple, yet getting started is often more complicated than it should be. App Spaces makes it easy to get basic logging enabled with the click of a button, but also walks you through a couple of easy steps if you want more control of what you’re logging.
Automatic Logging
If you just want bare minimum logs for all outbound traffic and don’t want to bother with instrumenting your app, then automatic logs should work just fine for you. Automatic logs will keep track of dependencies that your app needs to pull in on page load, as well as any outbound ajax requests that it makes to any API.
To enable, just:
- Open your Static App component in your App Space
- Click on the “Logs” tab
- Click on the “Log settings” button and “enable” automatic logging.
“How does this work for a static web app?” you may ask. Well Static app components leverage the snippets feature of Azure Static Web Apps to inject code into the <HEAD> tag of your web page to pull in the Application Insights SDK. Once injected, Application Insights will intercept and log outbound HTTP requests without you needing to do anything else.
Manual Logging
For those who need more control over what and how they log, App Spaces provides a manual logging option. This option is not so much a mode but rather instructions on how to quickly instrument your application:
- Install the SDK: First, install the Application Insights SDK.
- Copy/paste sample code: Then, copy and paste the sample code provided by App Spaces into your app to initialize Application Insights and start logging custom events.
You keep mentioning Application Insights. What is that?
Application Insights is a robust logging service for monitoring and analyzing application telemetry and is the service which Static Web Apps prefers for application logging. For the most part, you don’t need to worry too much about how Application Insights works unless you want to use more of the advanced features it offers. Within App Spaces, we mostly abstract this from you so that you only need to think about is how to write logs and how to view them.
Something to understand about client-side logging
Client-side application logging with Application Insights works by making calls directly to the Application Insights service using something called your iKey (instrumentation key). Both automatic and manual logging is storing this key directly in your HTML code for this to work. iKeys are not “secrets” per-se because you cannot use them to read your log data and are strictly used for ingestion purposes. While this is a common pattern for logging, some people may be uncomfortable with the idea that their iKey is out in the public. If you are, then a way around this would be to add an API which your front-end could call to handle logging for you. It’s a bit more work because you would probably still want to lock down that API somehow with auth. App Spaces authentication and authorization features makes this simple, but it’s up to you to evaluate exactly how secure you need to make your telemetry pipeline. If you're interested in how to add auth to your app, checkout this post I made about securing your 3-tier app.
Viewing Your Logs
Once you have logging enabled, whether through automatic or manual logging, viewing your logs in App Spaces is straightforward. To view your logs:
- Open Your App: Start by browsing to your Static App using the "Open app in browser" link.
- Navigate to Logs: Return to the Azure Portal and click on your Static App component within your App Space.
- View Logs: Click on the "Logs" tab to view traces and requests. Logs typically appear within 30-60 seconds but can take up to 5 minutes depending on traffic.
Advanced Queries
For more control over how you query your data, click on the "Open in Advanced Queries" link. This will open a KQL (Kusto Query Language) query editor. KQL is a modern query language designed to run super-fast query operations over large sets of data. It's excellent for detailed querying and also for building graphs and charts if needed.
Troubleshooting
If logs are not appearing:
- Ensure your app is making AJAX requests.
- Check that custom events are being logged properly with the correct instrumentation key mentioned in the code snippets in the manual log settings.
Logging for App Components
Logging for regular app components in App Spaces is even more straightforward than static app components. Unlike static apps, you don't need to enable or install any SDK to get custom log events to Log Analytics.
Types of Logs for App Components
There are two primary types of logs for regular app components:
- System Logs: These logs are related to the internal infrastructure that hosts your app on Azure Container Apps. You will typically see logs associated with the startup and shutdown processes of your app.
- Console Logs: These logs capture any output your application sends to STDOUT or STDERR. For example, here’s how you would do it for Node.js apps:
- console.log() - STDOUT
- console.error() - STDERR
If your app is already logging to these streams, the logs will be captured automatically.
Viewing Logs for App Components
Viewing logs for regular App Components is almost identical to viewing logs for front-end static app components:
- Access Logs: Click on your component in your App Space and go to the "Logs" tab.
- Wait for Data: Logs usually appear within 30-60 seconds but can take up to 5 minutes in some cases.
You mentioned something about Log Analytics earlier. What is that?
Regular App Components in App Spaces are built on-top of Azure Container Apps which uses Log Analytics instead of Application Insights to log telemetry. Log Analytics is very similar to Application Insights in many ways, but it’s still yet another thing you would normally need to think about. App Spaces hides the distinction between these two services from you so that you don't have to think about it.
Summary
App Spaces makes it incredibly easy to get your logs flowing for both static and non-static app components. You don't need to understand the difference between where or how your logs are stored, whether that be Application Insights or Log Analytics. The viewing experience is consistent across both component types, providing a simplified and unified view of your logs. With App Spaces, you can focus more on building great applications while worrying less about how to manage them.