#Source maps on Expo web

19 messages · Page 1 of 1 (latest)

normal dawn
#

We are using the @sentry/react-native package version 6.5.0 and are unable to see source maps on the web instance of our app. Is it possible to have source maps using Expo web?

tulip cedarBOT
#

Hi @normal dawn. I'm happy to dig into this for you! I'll check my internal sources for answers to your question! :wave:

#

Yes, it's possible to have source maps working with Expo web. Based on the knowledge sources, there are a few approaches to get source maps working for your Expo web application.

The simplest approach is to use the built-in source map upload functionality:

  1. Make sure you have the Sentry Expo Plugin and Sentry Metro Plugin configured in your application:

    • Add the @sentry/react-native/expo config plugin to your Expo configuration (in app.json or app.config.js)
    • Update your Metro configuration to use getSentryExpoConfig

  2. Generate your web bundle with source maps:

    npx expo export --platform web --dump-sourcemap

  3. Upload the source maps using the Sentry CLI:

    SENTRY_PROJECT=your-project \
SENTRY_ORG=your-org \
npx sentry-expo-upload-sourcemaps dist

This approach has been confirmed to work for Expo web applications as mentioned in this GitHub issue.

If you're experiencing issues with source maps not being properly associated with your errors, it could be due to missing Debug IDs. The Sentry Metro plugin should add these Debug IDs to your bundles, which are necessary for source map resolution.

Make sure your Metro configuration is properly set up:

const { getSentryExpoConfig } = require('@sentry/react-native/metro');
const config = getSentryExpoConfig(__dirname);
module.exports = config;

If you're using bundle splitting, there was a known issue with Debug IDs not being properly sent for web applications with bundle splitting enabled, as mentioned in this GitHub issue.

#

For more detailed information on setting up source maps for Expo applications, you can refer to the Expo source maps documentation.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@normal dawn Our robots are still learning and improving, please let us know if this response was correct by reacting below.

normal dawn
#

@tulip cedar where would you place the commands in steps 2 and 3 in a dockerfile?

tulip cedarBOT
#

Let me check the knowledge base for you again. One moment! :books:

#

To include the source map generation and upload commands in a Dockerfile for your Expo web application with Sentry, you would typically place them in the build stage of your Docker image. Here's how you might structure these commands in a Dockerfile:

# Build stage
FROM node:18 AS build

WORKDIR /app

# Copy package files and install dependencies
COPY package.json package-lock.json ./
RUN npm ci

# Copy the rest of the application
COPY . .

# Set up environment variables for Sentry
# Note: For security, consider using build args or secrets management instead of hardcoding
ENV SENTRY_AUTH_TOKEN=your_auth_token
ENV SENTRY_ORG=your_org
ENV SENTRY_PROJECT=your_project

# Generate the web bundle with source maps
RUN npx expo export --platform web --dump-sourcemap

# Upload source maps to Sentry
RUN npx sentry-expo-upload-sourcemaps dist

# Additional build steps like creating a production build
# ...

# Production stage (if using multi-stage builds)
FROM nginx:alpine AS production
# Copy built assets from build stage
COPY --from=build /app/dist /usr/share/nginx/html
# ...

A few important considerations:

  1. For security reasons, avoid hardcoding the SENTRY_AUTH_TOKEN directly in the Dockerfile. Instead, use Docker build arguments or a secrets management solution:
ARG SENTRY_AUTH_TOKEN
ENV SENTRY_AUTH_TOKEN=$SENTRY_AUTH_TOKEN

Then you can pass the token during build:

docker build --build-arg SENTRY_AUTH_TOKEN=your_token .

  1. Make sure these commands run after all your application code is set up but before you create the final production build.

  2. If you're using a CI/CD pipeline, you might want to run these commands in your CI/CD process instead of in the Dockerfile, especially if you're using a multi-stage build where the build artifacts are copied to a minimal production image.

#

This approach ensures your source maps are generated and uploaded to Sentry during the build process, allowing for proper error symbolication in your Expo web application.

I hope this helps with your Dockerfile setup!

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@normal dawn Our robots are still learning and improving, please let us know if this response was correct by reacting below.

normal dawn
#

@tulip cedar even when explicitly setting the SENTRY_AUTH_TOKEN variable, the upload command fails with the following error:

"SENTRY_AUTH_TOKEN environment variable must be set."

What are we misssing? The env variable exists and we are able to get the configuration working on mobile. But it's failing for React Native Web. In our Docker file, we even tried being redundant and passing the variables directly in the command, but it's still trying to get it from the config and somehow not finding the token. Here's an excerpt of our dockerfile:

# Set Sentry Variables
ARG SENTRY_AUTH_TOKEN
ARG SENTRY_PROJECT_WEB

ENV SENTRY_AUTH_TOKEN=$SENTRY_AUTH_TOKEN
ENV SENTRY_PROJECT_WEB=$SENTRY_PROJECT_WEB

# Upload source maps to Sentry
RUN SENTRY_PROJECT="$SENTRY_PROJECT_WEB" SENTRY_AUTH_TOKEN="$SENTRY_AUTH_TOKEN" npx sentry-expo-upload-sourcemaps dist
tulip cedarBOT
#

Let me check the knowledge base for you again. One moment! :books:

#

Based on the information in the knowledge sources, there are a few potential issues that could be causing the "SENTRY_AUTH_TOKEN environment variable must be set" error despite you explicitly setting it:

  1. The script doesn't read .env files: According to a comment from a Sentry team member, the sentry-expo-upload-sourcemaps script currently doesn't read .env files:

    "the script currently doesn't read .env files, but it's a valid feature" GitHub Issue #3546

  2. Environment variable naming: The script might be looking specifically for SENTRY_AUTH_TOKEN and not recognizing it when passed differently. Make sure the variable name is exactly SENTRY_AUTH_TOKEN.

  3. Token format: Ensure your token is in the correct format. Modern Sentry auth tokens typically start with sntrys_.

  4. CLI binary architecture issues: There's a known issue with Docker builds where the Sentry CLI might pick up the incorrect architecture:

    "I cannot pinpoint the exact cause of the issue, but it's something to do with the node docker image being multi-arch, caching, lock files, and cli binary picking up incorrect arch" GitHub Issue #8511

    A suggested workaround is to force the installation of the CLI directly in the image:

    RUN npm install --silent
RUN npm add @sentry/cli

  5. Organization setting: The script might also be looking for the organization setting. Try adding SENTRY_ORG to your environment variables:

    ENV SENTRY_ORG=your-organization

Try modifying your Dockerfile to:

# Set Sentry Variables
ARG SENTRY_AUTH_TOKEN
ARG SENTRY_PROJECT_WEB
ARG SENTRY_ORG
#

ENV SENTRY_AUTH_TOKEN=$SENTRY_AUTH_TOKEN
ENV SENTRY_PROJECT_WEB=$SENTRY_PROJECT_WEB
ENV SENTRY_ORG=$SENTRY_ORG
ENV SENTRY_PROJECT=$SENTRY_PROJECT_WEB

Force install the CLI to ensure correct architecture

RUN npm add @sentry/cli

Upload source maps to Sentry

RUN npx sentry-expo-upload-sourcemaps dist


If this still doesn't work, you could try adding debug flags to get more information:

```dockerfile
ENV SENTRY_LOG_LEVEL="debug"
ENV SENTRY_CLI_EXTRA_ARGS="--force-foreground"

These environment variables will provide more detailed logs that might help identify the specific issue.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@normal dawn Our robots are still learning and improving, please let us know if this response was correct by reacting below.

normal dawn
#

@tulip cedar the main issue here is that, on web, the source code is minified. Whenever I click on the details of a source map, I see the warning "Missing source file with a matching Debug ID". On mobile I am able to see the full unminified stack trace, but on web there's no detail whatsoever. Whenever we try to manually upload the source maps, I get the error I mentioned regarding the auth token.

tulip cedarBOT
#

Let me check the knowledge base for you again. One moment! :books:

#

I understand your frustration with the "Missing source file with a matching Debug ID" issue on web while mobile source maps are working correctly. This is a known issue with Expo web source maps.

Based on the knowledge sources, here are the key issues and potential solutions:

Debug ID Mismatch Issue

The error "Missing source file with a matching Debug ID" indicates that while you have source maps uploaded, they don't have matching Debug IDs with the errors being reported. This is specifically mentioned in several GitHub issues:

  1. In issue #15622, a user experienced the same problem with SvelteKit & Cloudflare where the Debug ID in the stack frame didn't match any uploaded source files.

  2. In issue #3801, a user found that after uploading source maps for Expo web, the .js file had the debugId but the .js.map file did not, causing the same error you're seeing.

Auth Token Issue

Regarding the auth token error, a Sentry team member specifically mentioned in issue #3546 that:

"the script currently doesn't read .env files, but it's a valid feature"

This explains why your environment variable might not be recognized despite being set.

Potential Solutions

  1. Verify Debug ID injection in your bundles:
    Check if your JavaScript files contain code that looks like e._sentryDebugIds=e._sentryDebugIds||{}. This is necessary for source map matching as mentioned in the troubleshooting guide.
#

  1. Use the CLI verification tool:

    sentry-cli sourcemaps explain YOUR_EVENT_ID

    This will give you detailed information about what's wrong with your source maps setup.

  2. For the auth token issue, try:

    • Explicitly exporting the token in the shell before running the command
    • Using the Sentry CLI directly instead of the sentry-expo-upload-sourcemaps script
    • Installing the CLI globally: npm install -g @sentry/cli

  3. Check source map format:
    One user in issue #3801 noted that their source map had a property debugId instead of debug_id, which might be causing issues. Check your source map files to see if this is the case.

  4. Try manual upload with debug flags:

    SENTRY_CLI_EXTRA_ARGS="--force-foreground --log-level=debug" npx sentry-cli sourcemaps upload --org your-org --project your-project --release=your-release _expo/static/js/web/

If you continue to face issues, you might want to try the approach mentioned by a user who resolved a similar problem in issue #3546 by generating a new organization token instead of a user token and manually uploading the source maps after generating the dist folder.

Hope this helps resolve your source map issues!

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: