From ddb36d252adabb8c1c259a1a55703c39d6f3213e Mon Sep 17 00:00:00 2001 From: Daniel Griesser Date: Fri, 24 Nov 2023 12:49:17 +0100 Subject: [PATCH] Fixes #73 --- .changeset/short-lobsters-knock.md | 5 ++ packages/sidecar/src/main.ts | 7 +- .../website/src/content/docs/architecture.mdx | 6 +- .../website/src/content/docs/setup/astro.mdx | 73 ++++++++----------- .../src/content/docs/sidecar/index.mdx | 22 ++++++ 5 files changed, 68 insertions(+), 45 deletions(-) create mode 100644 .changeset/short-lobsters-knock.md create mode 100644 packages/website/src/content/docs/sidecar/index.mdx diff --git a/.changeset/short-lobsters-knock.md b/.changeset/short-lobsters-knock.md new file mode 100644 index 00000000..cdaf4c72 --- /dev/null +++ b/.changeset/short-lobsters-knock.md @@ -0,0 +1,5 @@ +--- +'@spotlightjs/sidecar': patch +--- + +Only if envelope is sent validate known types diff --git a/packages/sidecar/src/main.ts b/packages/sidecar/src/main.ts index 4b92edfb..9fa9e1e8 100644 --- a/packages/sidecar/src/main.ts +++ b/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, { diff --git a/packages/website/src/content/docs/architecture.mdx b/packages/website/src/content/docs/architecture.mdx index 7b7fe059..1d49c513 100644 --- a/packages/website/src/content/docs/architecture.mdx +++ b/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. + + 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. \ No newline at end of file +to render Traces/Errors and more in your frontend. + diff --git a/packages/website/src/content/docs/setup/astro.mdx b/packages/website/src/content/docs/setup/astro.mdx index 4a3329ed..bbb0e8c7 100644 --- a/packages/website/src/content/docs/setup/astro.mdx +++ b/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'; ```sh - npx astro add @sentry/astro + npx astro add @sentry/astro @spotlightjs/astro ``` ```sh - pnpm astro add @sentry/astro + pnpm astro add @sentry/astro @spotlightjs/astro ``` ```sh - yarn astro add @sentry/astro + yarn astro add @sentry/astro @spotlightjs/astro ``` -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. - - - ```sh - npx astro add @spotlightjs/astro - ``` - - - ```sh - pnpm astro add @spotlightjs/astro - ``` - - - ```sh - yarn astro add @spotlightjs/astro - ``` - - +::: -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, + }, + }), +//... ``` \ No newline at end of file diff --git a/packages/website/src/content/docs/sidecar/index.mdx b/packages/website/src/content/docs/sidecar/index.mdx new file mode 100644 index 00000000..87794a42 --- /dev/null +++ b/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", +) +``` \ No newline at end of file