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()],
 })
-
 ```