Content for running Spotlight with Sentry

getsentry · Nov 24, 2023 · dc69236 · dc69236
1 parent 30085bb
commit dc69236
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 7 deletions.
diff --git a/packages/website/astro.config.mjs b/packages/website/astro.config.mjs
@@ -94,6 +94,10 @@ export default defineConfig({
               label: 'Spotlight',
               link: '/setup/',
             },
+            {
+              label: 'with Sentry',
+              link: '/setup/sentry/',
+            },
             {
               label: 'for Astro',
               link: '/setup/astro/',

diff --git a/packages/website/src/content/docs/setup/astro.mdx b/packages/website/src/content/docs/setup/astro.mdx
@@ -52,7 +52,7 @@ See [Sentry's documentation](https://docs.sentry.io/platforms/javascript/guides/
 You final Sentry config should look something like this:
 
 ```js
-// ...
+// astro.config.mjs
 sentry({
     dsn: "DSN",
     sourceMapsUploadOptions: {

diff --git a/packages/website/src/content/docs/setup/index.mdx b/packages/website/src/content/docs/setup/index.mdx
@@ -60,23 +60,25 @@ If you are using additional runtimes, such as [Node.js](https://docs.sentry.io/p
 
 ```js
 Sentry.init({
-  // ...
   spotlight: true
 })
 ```
 
 :::
 
+<LinkCard title="Setup Spotlight with Sentry" description="Instructions for Node, Python, PHP & Ruby" href="/setup/sentry/" />
+
 ---
 
 ## Sidecar
 
-
-
 Spotlight's [architecture](/architecture/) require's a sidecar to be running alongside your service. This is to enable streaming data collection from your backend services into the Spotlight overlay.
 
 
-<LinkCard title="Node.js (No Framework)" href="/sidecar/npx/" />
+<CardGrid>
+  <LinkCard title="Sidecar" href="/sidecar/" />
+  <LinkCard title="Node.js (No Framework)" href="/sidecar/npx/" />
+</CardGrid>
 
 <CardGrid>
   <LinkCard title="Vite" href="/sidecar/vite/" />

diff --git a/packages/website/src/content/docs/setup/sentry.mdx b/packages/website/src/content/docs/setup/sentry.mdx
@@ -0,0 +1,72 @@
+---
+title: Setup Spotlight with Sentry's SDKs
+description: Use Spotlight with Sentry
+---
+
+Spotlight is built that you don't need Sentry to run it, it can contain any kind of integration. However, Sentry is the first integration we've built for Spotlight and it's a great way to get started.
+
+As mentioned on the previous page, if you want that you Sentry SDKs talk to the Sidecar, enable the `spotlight` setting:
+
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+
+<Tabs>
+  <TabItem label="JavaScript">
+  In the Browser you don't need to set `spotlight: true`, `Spotlight.init()` will automatically detect if Sentry is available and if so, hook into the SDK.
+  ```javascript 
+    Sentry.init({
+      dsn: 'DSN',
+    });
+    // In the frontend it's important that you init Spotlight after Sentry
+    Spotlight.init();
+  ```
+  </TabItem>
+  <TabItem label="Node">
+  ```javascript
+    Sentry.init({
+        dsn: 'DSN',
+        spotlight: true,
+    });
+  ```
+  </TabItem>
+  <TabItem label="Python">
+  ```python 
+    sentry_sdk.init(
+        dsn="DSN",
+        spotlight=True,
+    )
+  ```
+  </TabItem>
+  <TabItem label="PHP">
+  ```php 
+    Sentry\init([
+        'dsn' => 'DSN',
+        'spotlight' => true,
+    ]);
+  ```
+  </TabItem>
+  <TabItem label="Ruby">
+  ```ruby 
+    Sentry.init do |config|
+        config.dsn = 'DSN'
+        config.spotlight = true
+    end
+  ```
+  </TabItem>
+</Tabs>
+
+
+:::note
+
+It's recommended to use the `spotlight` setting only in development.
+Please add a check to make sure you only enable it in development.
+For example this:
+
+```javascript
+  Sentry.init({
+    dsn: 'DSN',
+    spotlight: process.env.NODE_ENV === 'development',
+  });
+```
+
+Depending on your setup & language this might be different.
+:::
diff --git a/packages/website/src/content/docs/sidecar/npx.mdx b/packages/website/src/content/docs/sidecar/npx.mdx
@@ -2,6 +2,10 @@
 title: Run Sidecar with NPX
 ---
 
+To run Sidecar independently with NPX, run the following command:
+
 ```sh
 npx @spotlightjs/sidecar
-```
+```
+
+This starts the server on port `8969`.
diff --git a/packages/website/src/content/docs/sidecar/vite.mdx b/packages/website/src/content/docs/sidecar/vite.mdx
@@ -2,6 +2,8 @@
 title: Run Sidecar with Vite
 ---
 
+We provide a Vite plugin that automatically starts & stops Sidecar for you when starting your Vite dev server.
+
 ```sh
 npm install @spotlightjs/sidecar --save-dev
 ```
@@ -14,5 +16,4 @@ import spotlightSidecar from '@spotlightjs/sidecar/vite-plugin';
 export default defineConfig({
   plugins: [spotlightSidecar()],
 })
-
 ```