Fix: Sidecar URL issues fixed across spotlight

.changeset/twenty-fireants-fix.md

@@ -0,0 +1,8 @@
+---
+'@spotlightjs/spotlight': minor
+'@spotlightjs/overlay': minor
+'@spotlightjs/sidecar': minor
+---
+
+- Sidecar url made generic to support all sidecar server routes.
+- No use of static sidecar url.

packages/overlay/src/App.tsx

@@ -136,10 +136,10 @@ export default function App({
   // See https://github.com/remix-run/react-router/issues/7634
   const navigate = useNavigate();
   const clearEvents = useCallback(async () => {
-    const { origin } = new URL(sidecarUrl);
-    const clearEventsUrl: string = `${origin}/clear`;
-
     try {
+      const { origin } = new URL(sidecarUrl);
+      const clearEventsUrl: string = `${origin}/clear`;
+
       await db.reset();
       await fetch(clearEventsUrl, {
         method: 'DELETE',

packages/overlay/src/components/OpenInEditor.tsx

@@ -1,12 +1,12 @@
 import type React from 'react';
 import { useCallback } from 'react';
+import sentryDataCache from '~/integrations/sentry/data/sentryDataCache';
 import { ReactComponent as PenIcon } from '../assets/pen.svg';
 
 export default function OpenInEditor({ file }: { file: string }) {
   const openInEditor = useCallback(
     (evt: React.MouseEvent) => {
-      // TODO: Make this URL dynamic based on sidecarUrl!
-      fetch('http://localhost:8969/open', {
+      fetch(`${sentryDataCache.getSidecarUrl()}/open`, {
         method: 'POST',
         body: file,
         credentials: 'omit',

packages/overlay/src/constants.ts

@@ -1,4 +1,4 @@
-export const DEFAULT_SIDECAR_URL = 'http://localhost:8969/stream';
+export const DEFAULT_SIDECAR_URL = 'http://localhost:8969';
 
 export const DEFAULT_EXPERIMENTS = {
   'sentry:focus-local-events': true,

packages/overlay/src/integrations/sentry/data/sentryDataCache.ts

@@ -34,7 +34,8 @@ class SentryDataCache {
 
   protected subscribers: Map<string, Subscription> = new Map();
 
-  protected contextLinesProvider: string = new URL(DEFAULT_SIDECAR_URL).origin + CONTEXT_LINES_ENDPOINT;
+  protected sidecarUrl: string = new URL(DEFAULT_SIDECAR_URL).origin;
+  protected contextLinesProvider: string = this.sidecarUrl + CONTEXT_LINES_ENDPOINT;
 
   constructor(
     initial: (SentryEvent & {
@@ -46,9 +47,14 @@ class SentryDataCache {
 
   setSidecarUrl(url: string) {
     const { origin } = new URL(url);
+    this.sidecarUrl = origin;
     this.contextLinesProvider = origin + CONTEXT_LINES_ENDPOINT;
   }
 
+  getSidecarUrl() {
+    return this.sidecarUrl;
+  }
+
   inferSdkFromEvent(event: SentryEvent) {
     const sdk: Sdk = {
       name: 'unknown',

packages/overlay/src/sidecar.ts

@@ -8,7 +8,9 @@ export function connectToSidecar(
   setOnline: React.Dispatch<React.SetStateAction<boolean>>,
 ): () => void {
   log('Connecting to sidecar at', sidecarUrl);
-  const source = new EventSource(sidecarUrl);
+  const { origin } = new URL(sidecarUrl);
+  const sidecarStreamUrl: string = `${origin}/stream`;
+  const source = new EventSource(sidecarStreamUrl);
 
   for (const [contentType, listener] of Object.entries(contentTypeListeners)) {
     source.addEventListener(contentType, listener);

packages/overlay/src/types.ts

@@ -24,7 +24,7 @@ export type SpotlightOverlayOptions = {
    * will use this URL instead of the default URL to connect to the sidecar
    * and to listen to incoming events.
    *
-   * @default "http://localhost:8969/stream"
+   * @default "http://localhost:8969"
    */
   sidecarUrl?: string;
 

packages/spotlight/src/vite-plugin.ts

@@ -42,7 +42,7 @@ const serverOptions = new Set(['importPath', 'integrationNames', 'port']);
 
 export function buildClientInit(options: SpotlightInitOptions) {
   const clientOptions = Object.fromEntries(
-    Object.entries(options).filter(([key, _value]) => !key.startsWith('_') && !serverOptions.has(key)),
+    Object.entries(options).filter(([key]) => !key.startsWith('_') && !serverOptions.has(key)),
   );
   let initOptions = JSON.stringify({
     ...clientOptions,
@@ -61,7 +61,7 @@ export function buildClientInit(options: SpotlightInitOptions) {
   ].join('\n');
 }
 
-async function sendErrorToSpotlight(err: ErrorPayload['err'], spotlightUrl: string = 'http://localhost:8969/stream') {
+async function sendErrorToSpotlight(err: ErrorPayload['err'], spotlightUrl: string = 'http://localhost:8969') {
   if (!err.errors) {
     console.log(err);
     return;
@@ -72,6 +72,8 @@ async function sendErrorToSpotlight(err: ErrorPayload['err'], spotlightUrl: stri
   const errorLineInContext = contextLines?.indexOf(errorLine);
   const event_id = randomBytes(16).toString('hex');
   const timestamp = new Date();
+  const { origin } = new URL(spotlightUrl);
+  const spotlightStreamUrl: string = `${origin}/stream`;
   const envelope = [
     { event_id, sent_at: timestamp.toISOString() },
     { type: 'event' },
@@ -117,7 +119,7 @@ async function sendErrorToSpotlight(err: ErrorPayload['err'], spotlightUrl: stri
   ]
     .map(p => JSON.stringify(p))
     .join('\n');
-  return await fetch(spotlightUrl, {
+  return await fetch(spotlightStreamUrl, {
     method: 'POST',
     body: envelope,
     headers: { 'Content-Type': 'application/x-sentry-envelope' },

packages/website/src/content/docs/reference/configuration.md

@@ -35,15 +35,15 @@ init({
 
 #### `sidecarUrl`
 
-**type:** `string` **default:** `"http://localhost:8969/stream"`
+**type:** `string` **default:** `"http://localhost:8969"`
 
-The Sidecar event-source stream endpoint URL.
+The Sidecar event-source endpoint URL.
 
 Set this option if you have the sidecar running on another URL than the default one.
 
 ```ts
 init({
-  sidecarUrl: 'http://localhost:8969/stream',
+  sidecarUrl: 'http://localhost:8969',
 });
 ```
 

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

@@ -21,7 +21,7 @@ Also in the Sentry SDKs the URL can be configured via the `spotlight` option, fo
 import sentry_sdk
 
 sentry_sdk.init(
-    spotlight="http://localhost:8969/stream",
+    spotlight="http://localhost:8969",
 )
 ```