Possible to set up source maps for local development using "default" Expo metro bundler using npx expo start?

[goulashsoup]

The manual setup guide for Expo states:

During development, the source code is resolved using the Metro Server and source maps aren't used. This currently doesn't work on web.

We use sentry self-hosted.

So source maps are not possible during development when using npx expo start --clear?

Is there a workaround for this?

I know that I can use npx expo export -p web --dump-sourcemap && npx sentry-expo-upload-sourcemaps ./dist with npx serve dist, but I wanna use expo start --clear to test the same build for all devices.

---

Our setup using sentry/react-native@6.15.0 for expo@53.0.9:

app.config.ts:

import { ExpoConfig } from 'expo/config';

const config: ExpoConfig = {
    ...
    plugins: [
        [
            "@sentry/react-native/expo",
            {
                "url": process.env.EXPO_PUBLIC_SENTRY_URL,
                "project": "our-project",
                "organization": "our-org"
            }
        ],
        "expo-secure-store",
        "expo-router",
        "expo-localization"
    ]
};

export default config;

metro.config.js:

const { getSentryExpoConfig } = require('@sentry/react-native/metro');

const config = getSentryExpoConfig(__dirname);

module.exports = config;

lib/sentry.ts:

import {logger, consoleTransport, sentryTransport} from "react-native-logs";
import * as Sentry from '@sentry/react-native';
import { isRunningInExpoGo } from 'expo';

// Construct a new integration instance. This is needed to communicate between the integration and React
export const navigationIntegration = Sentry.reactNavigationIntegration({
    enableTimeToInitialDisplay: !isRunningInExpoGo(),
});

Sentry.init({
    dsn: `http://9e41cf5e34c12965124e068564e54b83@${process.env.EXPO_PUBLIC_SENTRY_HOST_PORT}/2`,
    debug: __DEV__,

    // Adds more context data to events (IP address, cookies, user, etc.)
    // For more information, visit: https://docs.sentry.io/platforms/react-native/data-management/data-collected/
    sendDefaultPii: true,
    tracesSampleRate: 1.0,
    replaysOnErrorSampleRate: 1.0,
    replaysSessionSampleRate: 1.0,
    profilesSampleRate: 1.0,
    integrations: [
        navigationIntegration,
        Sentry.mobileReplayIntegration(),
        Sentry.feedbackIntegration()
    ],
    enableNativeFramesTracking: !isRunningInExpoGo(), // Tracks slow and frozen frames in the application

    // uncomment the line below to enable Spotlight (https://spotlightjs.com)
    // spotlight: __DEV__,
});

app/_layout.tsx:

import { Slot, useNavigationContainerRef } from 'expo-router';
import { SessionProvider } from 'lib/session';
import 'lib/i18n';
import { navigationIntegration } from 'lib/sentry';
import { useEffect } from 'react';
import * as Sentry from '@sentry/react-native';

function RootLayout() {
  // Capture the NavigationContainer ref and register it with the integration.
  const ref = useNavigationContainerRef();

  useEffect(() => {
    if (ref?.current) {
      navigationIntegration.registerNavigationContainer(ref);
    }
  }, [ref]);

  return (
    <SessionProvider>
      <Slot />
    </SessionProvider>
  );
};

export default Sentry.wrap(RootLayout);

Used <Button title='Try!' onPress={ () => { Sentry.captureException(new Error("First error")); }}/>, error is catched, but Stack frame doesn't have Debug IDs according to Sentry.