Fixes #73

.changeset/short-lobsters-knock.md

@@ -0,0 +1,5 @@
+---
+'@spotlightjs/sidecar': patch
+---
+
+Only if envelope is sent validate known types

packages/sidecar/src/main.ts

@@ -152,7 +152,12 @@ function handleStreamRequest(req: IncomingMessage, res: ServerResponse, buffer:
           if (chunk !== null) body += chunk;
         });
         req.on('end', () => {
-          if (containsKnownEnvelopeType(body)) {
+          if (req.headers['content-type'] == 'application/x-sentry-envelope') {
+            if (containsKnownEnvelopeType(body)) {
+              buffer.put([`${req.headers['content-type']}`, body]);
+            }
+          } else {
+            // It's not an Sentry envelope, so we just put it in the buffer
             buffer.put([`${req.headers['content-type']}`, body]);
           }
           res.writeHead(204, {

packages/website/src/content/docs/architecture.mdx

@@ -1,6 +1,7 @@
 ---
 title: Architecture of Spotlight
 ---
+import { LinkCard } from '@astrojs/starlight/components';
 
 import Architecture from "../../../public/images/architecture.png"; 
 
@@ -13,5 +14,8 @@ And a Sidecar (Proxy) that streams incoming events to the UI.
 
 You can send any kind of events to the Sidecar, it forwards it to Spotlight and the integrations within Spotlight need to understand what to do with it.
 
+<LinkCard title="Sidecar" description="Understand what the sidecar does" href="/sidecar/" />
+
 Spotlight by default has a Sentry integration, if you are using a Sentry SDK and enable the Spotliht connection (only required on the Server), Spotlight is able
-to render Traces/Errors and more in your frontend.
+to render Traces/Errors and more in your frontend.
+

packages/website/src/content/docs/setup/astro.mdx

@@ -3,75 +3,62 @@ title: Using Spotlight with Astro
 description: A guide how to setup Spotlight for Astro
 ---
 
-## Install Sentry
+## Install Sentry & Spotlight
 
-To install Spotlight for Astro call:
+To install Sentry and Spotlight for Astro call:
 
 import { Tabs, TabItem } from '@astrojs/starlight/components';
 
 <Tabs>
   <TabItem label="npm">
   ```sh 
-  npx astro add @sentry/astro 
+  npx astro add @sentry/astro @spotlightjs/astro 
   ```
   </TabItem>
   <TabItem label="pnpm">
   ```sh 
-  pnpm astro add @sentry/astro
+  pnpm astro add @sentry/astro @spotlightjs/astro 
   ```
   </TabItem>
   <TabItem label="yarn">
   ```sh 
-  yarn astro add @sentry/astro
+  yarn astro add @sentry/astro @spotlightjs/astro 
   ```
   </TabItem>
 </Tabs>
 
-After that, Astro should add the Spotlight integration to your `astro.config.mjs` file and should look something like this.
+After that, Astro should add the Sentry & Spotlight integration to your `astro.config.mjs` file and should look something like this.
 
 ```js
-import { defineConfig } from 'astro/config';   
-
-import sentry from "@sentry/astro";
-                                                 
-// https://astro.build/config                  
-export default defineConfig({                  
-  integrations: [sentry()]                
-});
+ import { defineConfig } from 'astro/config';  
+                                               
+ import sentry from "@sentry/astro";           
+ import spotlightjs from "@spotlightjs/astro"; 
+                                               
+ // https://astro.build/config                 
+ export default defineConfig({                 
+   integrations: [sentry(), spotlightjs()]     
+ });
 ```
 
-## Install Spotlight
+:::note
 
-To install Spotlight for Astro call:
+The order of the integrations is important. Sentry should be the first integration in the array, followed by Spotlight.
 
-<Tabs>
-  <TabItem label="npm">
-  ```sh 
-  npx astro add @spotlightjs/astro 
-  ```
-  </TabItem>
-  <TabItem label="pnpm">
-  ```sh 
-  pnpm astro add @spotlightjs/astro
-  ```
-  </TabItem>
-  <TabItem label="yarn">
-  ```sh 
-  yarn astro add @spotlightjs/astro 
-  ```
-  </TabItem>
-</Tabs>
+:::
 
-After that, Astro should add the Spotlight integration to your `astro.config.mjs` file and should look something like this.
+To complete your setup, you need to add your Sentry DSN to the `astro.config.mjs` file.
+See [Sentry's documentation](https://docs.sentry.io/platforms/javascript/guides/astro/) for more information.
+You final Sentry config should look something like this:
 
 ```js
-import { defineConfig } from 'astro/config';   
-
-import sentry from "@sentry/astro";
-import spotlightjs from "@spotlightjs/astro";  
-                                                 
-// https://astro.build/config                  
-export default defineConfig({                  
-  integrations: [sentry(), spotlightjs()]                
-});
+// ...
+sentry({
+    dsn: "DSN",
+    sourceMapsUploadOptions: {
+      project: "PROJECT_NAME",
+      authToken: process.env.SENTRY_AUTH_TOKEN,
+    },
+  }),
+//...
 ```

packages/website/src/content/docs/sidecar/index.mdx

@@ -0,0 +1,22 @@
+---
+title: What is the Sidecar?
+description: A server forwarding events to Spotlight UI.
+---
+
+The Sidecar uses SSE (Server-Sent Events) to forward events to the Spotlight overlay. It is a standalone server that can be deployed on the same machine as the Spotlight overlay or on a different machine.
+
+It receives `POST` requests on `/stream` from the Sentry SDKs or any other source and forwards them to the Spotlight overlay via SSE.
+
+By default the Sidecar listens on port `8969` and the Spotlight overlay connects to it on `http://localhost:8969/stream`.
+
+The url can be configured via the `sidecar` config variable in the Spotlight overlay see [Configuration](/reference/configuration/#sidecar).
+
+Also in the Sentry SDKs the URL can be configured via the `spotlight` option, for example in the Python SDK:
+
+```python
+import sentry_sdk
+
+sentry_sdk.init(
+    spotlight="http://localhost:8969/stream",
+)
+```