feat(playground): Open Sentry in desktop browser in Expo

CHANGELOG.md

@@ -10,7 +10,7 @@
 
 ### Features
 
-- Introducing `@sentry/react-native/playground` ([#4916](https://github.com/getsentry/sentry-react-native/pull/4916))
+- Introducing `@sentry/react-native/playground` ([#4916](https://github.com/getsentry/sentry-react-native/pull/4916), [#4918](https://github.com/getsentry/sentry-react-native/pull/4918)))
 
   The new `withSentryPlayground` component allows developers to verify
   that the SDK is properly configured and reports errors as expected.

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 { logger } 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 {
+  // disable-next-line @typescript-eslint/no-floating-promises
+  fetch(`${getDevServer()?.url || '/'}${SENTRY_OPEN_URL_REQUEST_PATH}`, {
+    method: 'POST',
+    body: JSON.stringify({ url }),
+  }).catch(e => {
+    logger.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 {
+      // eslint-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) {
+      // eslint-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

@@ -14,6 +14,7 @@ import {
   View,
 } from 'react-native';
 
+import { openURLInBrowser } from '../metro/openUrlInBrowser';
 import { getDevServer } from '../integrations/debugsymbolicatorutils';
 import { isExpo, isExpoGo, isWeb } from '../utils/environment';
 import { bug as bugAnimation, hi as hiAnimation, thumbsup as thumbsupAnimation } from './animations';
@@ -82,7 +83,6 @@ export const SentryPlayground = ({
     }
   };
 
-  const showOpenSentryButton = !isExpo();
   const isNativeCrashDisabled = isWeb() || isExpoGo() || __DEV__;
 
   const animationContainerYPosition = React.useRef(new Animated.Value(0)).current;
@@ -169,15 +169,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={() => {
@@ -421,14 +419,3 @@ const lightStyles: typeof defaultDarkStyles = StyleSheet.create({
     backgroundColor: 'rgb(238, 235, 249)',
   },
 });
-
-function openURLInBrowser(url: string): void {
-  // This doesn't work for Expo project with Web enabled
-  // disable-next-line @typescript-eslint/no-floating-promises
-  fetch(`${getDevServer().url}open-url`, {
-    method: 'POST',
-    body: JSON.stringify({ url }),
-  }).catch(e => {
-    logger.error('Error opening URL:', e);
-  });
-}

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

@@ -5,6 +5,10 @@ import type { IncomingMessage, ServerResponse } from 'http';
 import type { InputConfigT, Middleware } from 'metro-config';
 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);
 
 /**
@@ -69,29 +73,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: unknown) => {
-    if (request.url?.startsWith(SENTRY_CONTEXT_REQUEST_PATH)) {
+    if (request.url?.startsWith(`/${SENTRY_CONTEXT_REQUEST_PATH}`)) {
       return stackFramesContextMiddleware(request, response);
+    } else if (request.url?.startsWith(`/${SENTRY_OPEN_URL_REQUEST_PATH}`)) {
+      return openURLMiddleware(request, response);
     }
     return middleware(request, response, next);
   };

samples/expo/app/(tabs)/index.tsx

@@ -17,6 +17,7 @@ export default function TabOneScreen() {
   const { currentlyRunning } = useUpdates();
   return (
     <View style={styles.container}>
+      {/* <Image source={require('../..//hi.gif')} style={{ width: 100, height: 100 }} /> */}
       <Sentry.TimeToInitialDisplay record />
       <Text>Welcome to Sentry Expo Sample App!</Text>
       <Text>Update ID: {currentlyRunning.updateId}</Text>