Added logging blogpost (#7356)

ChilliCream · Aug 11, 2024 · 9a08ac2 · 9a08ac2
1 parent 6eced6b
commit 9a08ac2
Show file tree

Hide file tree

Showing 30 changed files with 246 additions and 17 deletions.
diff --git a/website/src/blog/2024-08-11-logging/2024-08-11-logging.md b/website/src/blog/2024-08-11-logging/2024-08-11-logging.md
@@ -0,0 +1,78 @@
+---
+path: "/blog/2024/08/11/logging"
+date: "2024-08-11"
+title: "Logging in Banana Cake Pop"
+description: "We just released logging in Banana Cake Pop. Checkout the blog post to learn more!"
+tags: ["bananacakepop", "graphql", "hotchocolate", "workshops", "cloud", "release", "open-telemetry", "logging"]
+featuredImage: "header.png"
+author: Pascal Senn
+authorUrl: https://github.com/pascalsenn
+authorImageUrl: https://avatars.githubusercontent.com/u/14233220?v=4
+---
+
+We’re thrilled to announce a new feature in Banana Cake Pop that will enhance your development and debugging experience—**Logging**! Now, you can seamlessly send logs to Banana Cake Pop and analyze them directly within the app, making it easier than ever to monitor and troubleshoot your APIs.
+
+# What’s New?
+
+## Service Logs
+
+![Api Logs](api-logs-1.png)
+
+![Api Logs - Expanded](api-logs-2.png)
+
+APIs now have a dedicated **Logs** tab. This new tab allows you to view all the logs associated with a specific API. Whether you're tracking requests, debugging issues, or monitoring performance, this feature gives you a comprehensive view of what's happening under the hood.
+
+## Trace Logs
+
+![Trace Logs](api-logs-3.png)
+
+We’ve also added the ability to inspect logs within individual traces. When you open a trace, you’ll now see all the logs corresponding to each trace. This granular level of detail is invaluable for pinpointing issues and analyze traces in detail.
+
+## Log Retention
+
+- **Shared Clusters:** Log retention in shared clusters is set to 1 day. This ensures that you can review recent logs.
+
+- **Dedicated Clusters:** For those using dedicated clusters, we offer **dynamic log retention times**. This means you can configure log retention according to your specific needs, offering greater flexibility and control over your logging data.
+
+# Getting Started with Logging
+
+To start using this new logging feature, ensure that you are using **Banana Cake Pop version 13.9.0 or 14.x.x-preview.8**. Below is a sample setup to get you started:
+
+```csharp
+builder.Services
+    .AddGraphQLServer()
+    .AddInstrumentation()
+    ... // your configuration here
+    .AddBananaCakePopServices(x =>
+    {
+        x.ApiId = ""; // <-- Replace with your API ID
+        x.ApiKey = ""; // <-- Replace with your API key
+        x.Stage = "dev";
+    });
+
+builder.Services
+    .AddLogging(x => x
+        .AddBananaCakePopExporter()
+        .AddOpenTelemetry(x =>
+        {
+            x.IncludeFormattedMessage = true;
+            x.IncludeScopes = true;
+        }));
+```
+
+You can find the full example over [in the example repository](https://link.chillicream.com/2024/08/11/logging-example) or check out the [documentation](https://link.chillicream.com/2024/08/11/logging-docs) for more details.
+
+We hope this new logging capability helps you gain deeper insights into your APIs and streamline your development workflow. As always, we’re here to help with any questions or feedback you might have.
+Don’t hesitate to reach out on <contact@chillicream.com> or on [slack.chillicream.com](https://link.chillicream.com/2024/08/11/slack)
+
+# 🛠️ Announcing Our Enterprise GraphQL Workshop
+
+In the fast-paced world of enterprise software development, mastering advanced architectural patterns is crucial for building robust and scalable applications.
+Our upcoming Enterprise GraphQL with DDD, CQRS, and Clean Architecture Workshop is an immersive one-day experience designed to elevate your skills.
+
+This workshop will guide you through the process of integrating GraphQL with DDD, CQRS, and Clean Architecture.
+You'll gain hands-on experience in constructing a sophisticated enterprise-level system, starting from the basics and moving towards complex implementations.
+
+Discover more about the workshop here: [DDD Workshop](https://link.chillicream.com/2024/08/11/ddd-workshop)
+
+Happy logging! 🚀
diff --git a/website/src/blog/2024-08-11-logging/api-logs-1.png b/website/src/blog/2024-08-11-logging/api-logs-1.png
diff --git a/website/src/blog/2024-08-11-logging/api-logs-2.png b/website/src/blog/2024-08-11-logging/api-logs-2.png
diff --git a/website/src/blog/2024-08-11-logging/api-logs-3.png b/website/src/blog/2024-08-11-logging/api-logs-3.png
diff --git a/website/src/blog/2024-08-11-logging/header.png b/website/src/blog/2024-08-11-logging/header.png
diff --git a/website/src/components/images/logging.tsx b/website/src/components/images/logging.tsx
@@ -0,0 +1,39 @@
+import { graphql, useStaticQuery } from "gatsby";
+import { GatsbyImage } from "gatsby-plugin-image";
+import React, { FC } from "react";
+import styled from "styled-components";
+
+import { GetLogging2024ImageQuery } from "@/graphql-types";
+
+export const LoggingInBananaCakePop: FC = () => {
+  const data = useStaticQuery<GetLogging2024ImageQuery>(graphql`
+    query getLogging2024Image {
+      file(
+        relativePath: { eq: "2024-08-11-logging/header.png" }
+        sourceInstanceName: { eq: "blog" }
+      ) {
+        childImageSharp {
+          gatsbyImageData(layout: CONSTRAINED, width: 1200, quality: 100)
+        }
+      }
+    }
+  `);
+
+  return (
+    <Container>
+      <GatsbyImage
+        image={data.file?.childImageSharp?.gatsbyImageData}
+        alt="Logging in Banana Cake Pop"
+      />
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  padding: 30px;
+
+  .gatsby-image-wrapper {
+    border-radius: var(--border-radius);
+    box-shadow: 0 9px 18px rgba(0, 0, 0, 0.25);
+  }
+`;
diff --git a/website/src/docs/bananacakepop/v2/apis/fusion.md b/website/src/docs/bananacakepop/v2/apis/fusion.md
@@ -261,7 +261,7 @@ dotnet barista fusion-configuration publish commit --api-key <<api-key>>
 ![Image](images/fusion-1.png)
 Banana Cake Pop provides a distributed telemetry solution for your Fusion Gateway. It allows you to monitor your gateway and all your subgraphs in one place. You can inspect the traces of your operations on the gateway and see how they are executed on the subgraphs.
 
-To enable telemetry for your gateway and subgraphs, all of them need to be configured to send telemetry data to Banana Cake Pop. Your subgraphs can be configured to send telemetry data by using the [BananaCakePop.Services](https://www.nuget.org/packages/BananaCakePop.Services/) package. You can find more information about how to configure your subgraphs in the [Open Telemetry](/docs/bananacakepop/v2/apis/open-telemetry) guide.
+To enable telemetry for your gateway and subgraphs, all of them need to be configured to send telemetry data to Banana Cake Pop. Your subgraphs can be configured to send telemetry data by using the [BananaCakePop.Services](https://www.nuget.org/packages/BananaCakePop.Services/) package. You can find more information about how to configure your subgraphs in the [Open Telemetry](/docs/bananacakepop/v2/open-telemetry/operation-monitoring) guide.
 
 To send telemetry data from the gateway you need to add the instrumentation and the exporter to your gateway.
 

diff --git a/website/src/docs/bananacakepop/v2/apis/overview.md b/website/src/docs/bananacakepop/v2/apis/overview.md
@@ -7,7 +7,7 @@ An API within the context of Banana Cake Pop, refers to an representation of you
 This representation is more than a mere conceptual framework — it serves as a practical tool that allows you to group your documents and share common settings like connection and authorization parameters among them.
 
 Additionally, an API forms the foundation for your client registry, schema registry setup and the telemetry. For more detailed information on these features, refer to the [Schema Registry](/docs/bananacakepop/v2/apis/schema-registry) guide
-the [Client Registry](/docs/bananacakepop/v2/apis/client-registry) and the [Telemetry](/docs/bananacakepop/v2/apis/open-telemetry) guide.
+the [Client Registry](/docs/bananacakepop/v2/apis/client-registry) and the [Telemetry](/docs/bananacakepop/v2/open-telemetry/operation-monitoring) guide.
 
 # API Types
 

diff --git a/website/src/docs/bananacakepop/v2/open-telemetry/images/logs-1.png b/website/src/docs/bananacakepop/v2/open-telemetry/images/logs-1.png
diff --git a/website/src/docs/bananacakepop/v2/open-telemetry/images/logs-2.png b/website/src/docs/bananacakepop/v2/open-telemetry/images/logs-2.png
diff --git a/website/src/docs/bananacakepop/v2/open-telemetry/images/logs-3.png b/website/src/docs/bananacakepop/v2/open-telemetry/images/logs-3.png
diff --git a/...anacakepop/v2/apis/images/telemetry-0.png → .../v2/open-telemetry/images/telemetry-0.png b/...anacakepop/v2/apis/images/telemetry-0.png → .../v2/open-telemetry/images/telemetry-0.png
diff --git a/...anacakepop/v2/apis/images/telemetry-1.png → .../v2/open-telemetry/images/telemetry-1.png b/...anacakepop/v2/apis/images/telemetry-1.png → .../v2/open-telemetry/images/telemetry-1.png
diff --git a/...nacakepop/v2/apis/images/telemetry-10.png → ...v2/open-telemetry/images/telemetry-10.png b/...nacakepop/v2/apis/images/telemetry-10.png → ...v2/open-telemetry/images/telemetry-10.png
diff --git a/...nacakepop/v2/apis/images/telemetry-11.png → ...v2/open-telemetry/images/telemetry-11.png b/...nacakepop/v2/apis/images/telemetry-11.png → ...v2/open-telemetry/images/telemetry-11.png
diff --git a/...nacakepop/v2/apis/images/telemetry-12.png → ...v2/open-telemetry/images/telemetry-12.png b/...nacakepop/v2/apis/images/telemetry-12.png → ...v2/open-telemetry/images/telemetry-12.png
diff --git a/...nacakepop/v2/apis/images/telemetry-13.png → ...v2/open-telemetry/images/telemetry-13.png b/...nacakepop/v2/apis/images/telemetry-13.png → ...v2/open-telemetry/images/telemetry-13.png
diff --git a/...anacakepop/v2/apis/images/telemetry-2.png → .../v2/open-telemetry/images/telemetry-2.png b/...anacakepop/v2/apis/images/telemetry-2.png → .../v2/open-telemetry/images/telemetry-2.png
diff --git a/...anacakepop/v2/apis/images/telemetry-3.png → .../v2/open-telemetry/images/telemetry-3.png b/...anacakepop/v2/apis/images/telemetry-3.png → .../v2/open-telemetry/images/telemetry-3.png
diff --git a/...anacakepop/v2/apis/images/telemetry-4.png → .../v2/open-telemetry/images/telemetry-4.png b/...anacakepop/v2/apis/images/telemetry-4.png → .../v2/open-telemetry/images/telemetry-4.png
diff --git a/...anacakepop/v2/apis/images/telemetry-5.png → .../v2/open-telemetry/images/telemetry-5.png b/...anacakepop/v2/apis/images/telemetry-5.png → .../v2/open-telemetry/images/telemetry-5.png
diff --git a/...anacakepop/v2/apis/images/telemetry-6.png → .../v2/open-telemetry/images/telemetry-6.png b/...anacakepop/v2/apis/images/telemetry-6.png → .../v2/open-telemetry/images/telemetry-6.png
diff --git a/...anacakepop/v2/apis/images/telemetry-7.png → .../v2/open-telemetry/images/telemetry-7.png b/...anacakepop/v2/apis/images/telemetry-7.png → .../v2/open-telemetry/images/telemetry-7.png
diff --git a/...anacakepop/v2/apis/images/telemetry-8.png → .../v2/open-telemetry/images/telemetry-8.png b/...anacakepop/v2/apis/images/telemetry-8.png → .../v2/open-telemetry/images/telemetry-8.png
diff --git a/...anacakepop/v2/apis/images/telemetry-9.png → .../v2/open-telemetry/images/telemetry-9.png b/...anacakepop/v2/apis/images/telemetry-9.png → .../v2/open-telemetry/images/telemetry-9.png
diff --git a/website/src/docs/bananacakepop/v2/open-telemetry/logging.md b/website/src/docs/bananacakepop/v2/open-telemetry/logging.md
@@ -0,0 +1,108 @@
+---
+title: "Logging"
+---
+
+Banana Cake Pop includes open telemetry logging, allowing seamless log collection and analysis directly within the app.
+This documentation provides guidance on setting up and utilizing logging features in Banana Cake Pop for enhanced monitoring, debugging, and performance analysis of your APIs.
+
+## API Logs
+
+![Api Logs](images/logs-1.png)
+Each API in Banana Cake Pop features a **Logs** tab, providing a centralized interface for viewing and managing logs associated with your API.
+This unified log view offers insights into your system’s activities, enabling you to monitor and troubleshoot in real-time.
+
+### Detailed Log Inspection
+
+![API Logs - Expanded](images/logs-2.png)
+
+Within the Logs tab, individual log entries can be expanded to reveal additional details such as timestamps, log levels, and message content.
+
+## Trace Logs
+
+![Trace Logs](images/logs-3.png)
+
+Logs can also be inspected within individual traces, providing detailed insights into the correlation between specific traces and their corresponding logs.
+
+## Log Retention
+
+Log retention in Banana Cake Pop is configured as follows:
+
+- **Shared Clusters:** Logs are retained for 1 day to allow for recent log review.
+- **Dedicated Clusters:** Dynamic log retention times can be configured to meet specific needs, offering flexibility in log management.
+
+## Connect your service
+
+All the logging is done on a per API basis.
+An api represents one of your deployments.
+To monitor you services you need to create an API in banana cake pop.
+The api needs to be from type "Api Service" or "Api Gateway".
+
+To install the Banana Cake Pop services, run the following commands in your project's root directory:
+
+```bash
+dotnet add package BananaCakePop.Services
+dotnet add package OpenTelemetry.Extensions.Hosting
+dotnet add package OpenTelemetry.Instrumentation.AspNetCore
+```
+
+After installing the package, you need to configure the services in your startup class.
+Below is a sample implementation in C#:
+
+```csharp
+public void ConfigureServices(IServiceCollection services)
+{
+    services
+        .AddGraphQLServer()
+        .AddQueryType<Query>()
+        .AddBananaCakePopServices(x =>
+        {
+            x.ApiKey = "<<your-api-key>>";
+            x.ApiId = "QXBpCmc5NGYwZTIzNDZhZjQ0NjBmYTljNDNhZDA2ZmRkZDA2Ng==";
+            x.Stage = "dev";
+        })
+        .AddInstrumentation(); 
+
+    services
+        .AddLogging(x => x
+            .AddBananaCakePopExporter()
+            .AddOpenTelemetry(options =>
+            {
+                options.IncludeFormattedMessage = true;
+                options.IncludeScopes = true;
+            }));
+}
+```
+
+> **Tip: Using Environment Variables**
+>
+> Alternatively, you can set the required values using environment variables. This method allows you to call `AddBananaCakePopServices` without explicitly passing parameters.
+>
+> - `BCP_API_KEY` maps to `ApiKey`
+> - `BCP_API_ID` maps to `ApiId`
+> - `BCP_STAGE` maps to `Stage`
+>
+> ```csharp
+> public void ConfigureServices(IServiceCollection services)
+> {
+>    services
+>        .AddGraphQLServer()
+>        .AddQueryType<Query>()
+>        .AddBananaCakePopServices()
+>        .AddInstrumentation(); // Enable the graphql telemetry
+>
+>    services
+>        .AddLogging(x => x
+>             .AddBananaCakePopExporter()
+>             .AddOpenTelemetry(options =>
+>             {
+>                 options.IncludeFormattedMessage = true;
+>                 options.IncludeScopes = true;
+>             }));
+> }
+> ```
+>
+> In this setup, the API key, ID, and stage are set through environment variables.
+
+## Full Example
+
+For a complete implementation example, visit the [example repository](https://link.chillicream.com/docs/logging-example).
diff --git a/...s/bananacakepop/v2/apis/open-telemetry.md → ...v2/open-telemetry/operation-monitoring.md b/...s/bananacakepop/v2/apis/open-telemetry.md → ...v2/open-telemetry/operation-monitoring.md
@@ -1,5 +1,5 @@
 ---
-title: "Open Telemetry"
+title: "Operation Monitoring"
 ---
 
 ![Image](images/telemetry-0.png)

diff --git a/website/src/docs/docs.json b/website/src/docs/docs.json
@@ -59,8 +59,18 @@
               {
                 "path": "operation-reporting",
                 "title": "Operation Reporting"
+              }
+            ]
+          },
+          {
+            "path": "open-telemetry",
+            "title": "Open Telemetry",
+            "items": [
+              {
+                "path": "operation-monitoring",
+                "title": "Operation Monitoring"
               },
-              { "path": "open-telemetry", "title": "Open Telemetry" }
+              { "path": "logging", "title": "Logging" }
             ]
           },
           {

diff --git a/website/src/docs/hotchocolate/v14/migrating/migrate-from-13-to-14.md b/website/src/docs/hotchocolate/v14/migrating/migrate-from-13-to-14.md
@@ -20,7 +20,7 @@ We have aligned all builder APIs to be more consistent and easier to use. Builde
 
 The interface `IQueryRequestBuilder` and its implementations were replaced with `OperationRequestBuilder` which now supports building standard GraphQL operation requests as well as variable batch requests.
 
-The `Build()` method returns now a `IOperationRequest` which is implemented by `OperatuionRequest` and `VariableBatchRequest`.
+The `Build()` method returns now a `IOperationRequest` which is implemented by `OperationRequest` and `VariableBatchRequest`.
 
 We have also simplified what the builder does and removed a lot of the convenience methods that allowed to add single variables to it. This has todo with the support of variable batching. Now, you have to provide the variable map directly.
 

diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx
@@ -4,9 +4,7 @@ import { Carousel } from "react-responsive-carousel";
 import styled from "styled-components";
 
 import { BananaCakePop } from "@/components/images/banana-cake-pop";
-import { BlogPostBananaCakePopApis } from "@/components/images/blog-post-banana-cake-pop-apis";
 import { BlogPostGraphQLFusion } from "@/components/images/blog-post-graphql-fusion";
-import { BlogPostHotChocolate13 } from "@/components/images/blog-post-hot-chocolate-13";
 import { NewsletterMay2024 } from "@/components/images/newsletter-may-2024";
 import { Layout } from "@/components/layout";
 import { Link } from "@/components/misc/link";
@@ -31,6 +29,7 @@ import { THEME_COLORS } from "@/shared-style";
 
 // Artwork
 import { FullstackWorkshop } from "@/components/images/fullstack-workshop";
+import { LoggingInBananaCakePop } from "@/components/images/logging";
 import { SrOnly } from "@/components/misc/sr-only";
 import ContactUsSvg from "@/images/artwork/contact-us.svg";
 import DashboardSvg from "@/images/artwork/dashboard.svg";
@@ -76,6 +75,11 @@ const IndexPage: FC = () => {
           showStatus={false}
           showThumbs={false}
         >
+          <Slide>
+            <Link to="/blog/2024/08/11/logging">
+              <LoggingInBananaCakePop />
+            </Link>
+          </Slide>
           <Slide>
             <Link to="/blog/2024/05/21/newsletter-may">
               <NewsletterMay2024 />
@@ -91,16 +95,6 @@ const IndexPage: FC = () => {
               <BlogPostGraphQLFusion />
             </Link>
           </Slide>
-          <Slide>
-            <Link to="/blog/2023/02/08/new-in-hot-chocolate-13">
-              <BlogPostHotChocolate13 />
-            </Link>
-          </Slide>
-          <Slide>
-            <Link to="/blog/2023/03/15/banana-cake-pop-graphql-apis">
-              <BlogPostBananaCakePopApis />
-            </Link>
-          </Slide>
           <Slide>
             <Link to="/products/bananacakepop">
               <BananaCakePop shadow />