feat(playground): Open Sentry in desktop browser

Author: krystofwoldrich

packages/core/src/js/metro/constants.ts

@@ -0,0 +1,3 @@
+export const SENTRY_MIDDLEWARE_PATH = '__sentry';
+export const SENTRY_CONTEXT_REQUEST_PATH = `${SENTRY_MIDDLEWARE_PATH}/context`;
+export const SENTRY_OPEN_URL_REQUEST_PATH = `${SENTRY_MIDDLEWARE_PATH}/open-url`;

packages/core/src/js/metro/getRawBody.ts

@@ -0,0 +1,17 @@
+import type { IncomingMessage } from 'http';
+
+/**
+ * Get the raw body of a request.
+ */
+export function getRawBody(request: IncomingMessage): Promise<string> {
+  return new Promise((resolve, reject) => {
+    let data = '';
+    request.on('data', chunk => {
+      data += chunk;
+    });
+    request.on('end', () => {
+      resolve(data);
+    });
+    request.on('error', reject);
+  });
+}

packages/core/src/js/metro/openUrlInBrowser.ts

@@ -0,0 +1,17 @@
+import { debug } from '@sentry/core';
+
+import { getDevServer } from '../integrations/debugsymbolicatorutils';
+import { SENTRY_OPEN_URL_REQUEST_PATH } from './constants';
+
+/**
+ * Send request to the Metro Development Server Middleware to open a URL in the system browser.
+ */
+export function openURLInBrowser(url: string): void {
+  // oxlint-disable-next-line typescript-eslint(no-floating-promises)
+  fetch(`${getDevServer()?.url || '/'}${SENTRY_OPEN_URL_REQUEST_PATH}`, {
+    method: 'POST',
+    body: JSON.stringify({ url }),
+  }).catch(e => {
+    debug.error('Error opening URL:', e);
+  });
+}

packages/core/src/js/metro/openUrlMiddleware.ts

@@ -0,0 +1,71 @@
+import type { IncomingMessage, ServerResponse } from 'http';
+
+import { getRawBody } from './getRawBody';
+
+/*
+ * Prefix for Sentry Metro logs to make them stand out to the user.
+ */
+const S = '\u001b[45;1m SENTRY \u001b[0m';
+
+let open: ((url: string) => Promise<void>) | undefined = undefined;
+
+/**
+ * Open a URL in the system browser.
+ *
+ * Inspired by https://github.com/react-native-community/cli/blob/a856ce027a6b25f9363a8689311cdd4416c0fc89/packages/cli-server-api/src/openURLMiddleware.ts#L17
+ */
+export async function openURLMiddleware(req: IncomingMessage, res: ServerResponse): Promise<void> {
+  if (!open) {
+    try {
+      // oxlint-disable-next-line import/no-extraneous-dependencies
+      open = require('open');
+    } catch (e) {
+      // noop
+    }
+  }
+
+  if (req.method === 'POST') {
+    const body = await getRawBody(req);
+    let url: string | undefined = undefined;
+
+    try {
+      const parsedBody = JSON.parse(body) as { url?: string };
+      url = parsedBody.url;
+    } catch (e) {
+      res.writeHead(400);
+      res.end('Invalid request body. Expected a JSON object with a url key.');
+      return;
+    }
+
+    try {
+      if (!url) {
+        res.writeHead(400);
+        res.end('Invalid request body. Expected a JSON object with a url key.');
+        return;
+      }
+
+      if (!open) {
+        throw new Error('The "open" module is not available.');
+      }
+
+      await open(url);
+    } catch (e) {
+      // oxlint-disable-next-line no-console
+      console.log(`${S} Open: ${url}`);
+
+      res.writeHead(500);
+
+      if (!open) {
+        res.end('Failed to open URL. The "open" module is not available.');
+      } else {
+        res.end('Failed to open URL.');
+      }
+      return;
+    }
+
+    // eslint-disable-next-line no-console
+    console.log(`${S} Opened URL: ${url}`);
+    res.writeHead(200);
+    res.end();
+  }
+}

packages/core/src/js/playground/modal.tsx

@@ -1,9 +1,8 @@
-import { debug } from '@sentry/core';
 import * as React from 'react';
 import { Animated, Image, Modal, Platform, Pressable, Text, useColorScheme, View } from 'react-native';
 
-import { getDevServer } from '../integrations/debugsymbolicatorutils';
-import { isExpo, isExpoGo, isWeb } from '../utils/environment';
+import { openURLInBrowser } from '../metro/openUrlInBrowser';
+import { isExpoGo, isWeb } from '../utils/environment';
 import { bug as bugAnimation, hi as hiAnimation, thumbsup as thumbsupAnimation } from './animations';
 import { nativeCrashExample, tryCatchExample, uncaughtErrorExample } from './examples';
 import { bug as bugImage, hi as hiImage, thumbsup as thumbsupImage } from './images';
@@ -71,7 +70,6 @@ export const SentryPlayground = ({
     }
   };
 
-  const showOpenSentryButton = !isExpo();
   const isNativeCrashDisabled = isWeb() || isExpoGo() || __DEV__;
 
   const animationContainerYPosition = React.useRef(new Animated.Value(0)).current;
@@ -158,15 +156,13 @@ export const SentryPlayground = ({
               justifyContent: 'space-evenly', // Space between buttons
             }}
           >
-            {showOpenSentryButton && (
-              <Button
-                secondary
-                title={'Open Sentry'}
-                onPress={() => {
-                  openURLInBrowser(issuesStreamUrl);
-                }}
-              />
-            )}
+            <Button
+              secondary
+              title={'Open Sentry'}
+              onPress={() => {
+                openURLInBrowser(issuesStreamUrl);
+              }}
+            />
             <Button
               title={'Go to my App'}
               onPress={() => {
@@ -269,19 +265,3 @@ const Button = ({
     </View>
   );
 };
-
-function openURLInBrowser(url: string): void {
-  const devServer = getDevServer();
-  if (devServer?.url) {
-    // This doesn't work for Expo project with Web enabled
-    // oxlint-disable-next-line typescript-eslint(no-floating-promises)
-    fetch(`${devServer.url}open-url`, {
-      method: 'POST',
-      body: JSON.stringify({ url }),
-    }).catch(e => {
-      debug.error('Error opening URL:', e);
-    });
-  } else {
-    debug.error('Dev server URL not available');
-  }
-}

packages/core/src/js/tools/metroMiddleware.ts

@@ -6,6 +6,10 @@ import { addContextToFrame, debug } from '@sentry/core';
 import { readFile } from 'fs';
 import { promisify } from 'util';
 
+import { SENTRY_CONTEXT_REQUEST_PATH, SENTRY_OPEN_URL_REQUEST_PATH } from '../metro/constants';
+import { getRawBody } from '../metro/getRawBody';
+import { openURLMiddleware } from '../metro/openUrlMiddleware';
+
 const readFileAsync = promisify(readFile);
 
 /**
@@ -71,29 +75,15 @@ function badRequest(response: ServerResponse, message: string): void {
   response.end(message);
 }
 
-function getRawBody(request: IncomingMessage): Promise<string> {
-  return new Promise((resolve, reject) => {
-    let data = '';
-    request.on('data', chunk => {
-      data += chunk;
-    });
-    request.on('end', () => {
-      resolve(data);
-    });
-    request.on('error', reject);
-  });
-}
-
-const SENTRY_MIDDLEWARE_PATH = '/__sentry';
-const SENTRY_CONTEXT_REQUEST_PATH = `${SENTRY_MIDDLEWARE_PATH}/context`;
-
 /**
  * Creates a middleware that adds source context to the Sentry formatted stack frames.
  */
 export const createSentryMetroMiddleware = (middleware: Middleware): Middleware => {
   return (request: IncomingMessage, response: ServerResponse, next: () => void) => {
-    if (request.url?.startsWith(SENTRY_CONTEXT_REQUEST_PATH)) {
+    if (request.url?.startsWith(`/${SENTRY_CONTEXT_REQUEST_PATH}`)) {
       return stackFramesContextMiddleware(request, response, next);
+    } else if (request.url?.startsWith(`/${SENTRY_OPEN_URL_REQUEST_PATH}`)) {
+      return openURLMiddleware(request, response);
     }
     return (middleware as (req: IncomingMessage, res: ServerResponse, next: () => void) => void)(
       request,