Sentry displays generated JavaScript code instead of original code

[vladinko0]

Sentry displays generated JavaScript code instead of original code.

Here is report in Sentry:

Here is my original code:

I set Sentry's Next.js through wizard with
npx @sentry/wizard -i nextjs.

Then I had to update next.config.js for the needs of the project. This is my next.config.js

const { withRNV } = require('@rnv/engine-rn-next');
const path = require('path');
const fs = require('fs');
const { withSentryConfig } = require('@sentry/nextjs');

const getPackageVersion = () => {
    const manifest = JSON.parse(fs.readFileSync(path.resolve(__dirname, './package.json'), 'utf8'));
    return manifest.version;
};

const config = {
    compress: false,
    webpack: (cfg, { isServer }) => {
        if (!isServer) cfg.resolve.alias['@sentry/node'] = '@sentry/browser';
        cfg.module.rules.push({
            test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
            use: {
                loader: 'url-loader',
                options: {
                    limit: 100000,
                    name: '[name].[ext]',
                },
            },
        });
        return cfg;
    },
    typescript: {
        ignoreBuildErrors: true,
    },
    publicRuntimeConfig: {
        deployEnv: process.env.DEPLOY_ENV || 'Development',
        customScripts: [],
    },

    images: {
        loader: 'akamai',
        path: '',
    },
    async headers() {
        return [
            {
                source: '/(.*)',
                headers: [
                    {
                        key: 'X-Application-Version',
                        value: getPackageVersion(),
                    },
                    {
                        key: 'access-control-allow-origin',
                        value: '*',
                    },
                ],
            },
        ];
    },
    experimental: {
        outputStandalone: true,
    },
};

module.exports = withSentryConfig(
    withRNV(config, {
        enableNextCss: false,
        enableOptimizedImages: true,
    })
);

I am using:

"next": "12.0.9",
"@sentry/nextjs": "7.20.0",

What can be root cause of wrong Sentry report? Appreciate any help.

[Fwang36]

Hey there,

During your build process, the code is being transpiled by your loader to commonJS. Are you uploading source maps? If they are configured properly, you will get your original source code in the stack trace.

[vladinko0]

As it is said in the documentation, source maps are uploaded automatically. I am not uploading them manually. And after building the app I can see that they are uploaded.

[Fwang36]

On your issues page, are you seeing the tab for Original and Minified like in this image?

[vladinko0]

Yes, I can see it:

[Fwang36]

Thanks for that. So most likely, to figure out what's going on with your source maps, I would recommend writing to [email protected] and creating a ticket, and reference this GitHub discussion. That'll let us take a look into your account and try to figure out what's happening.

In the meantime, you can take try using the sentry-cli and running sourcemaps explain. You can also try using a source map validator tool such as source-map-cli to make sure your source maps are resolving properly. Click on the minified version of your issue and input the line and column listed there in the stack trace and see if you can resolve it.

[vladinko0]

Thank you for response.
I want to mention, that I also tried different approach. By uploading manually source maps this way:

I used @zeit/next-source-maps lib (package.json => "@zeit/next-source-maps": "^0.0.4-canary.1")
for creating source maps.

next.config.js

const { withRNV } = require('@rnv/engine-rn-next');
const path = require('path');
const fs = require('fs');

const getPackageVersion = () => {
    const manifest = JSON.parse(fs.readFileSync(path.resolve(__dirname, './package.json'), 'utf8'));
    return manifest.version;
};

const config = {
    compress: false,
    webpack: (cfg, { isServer }) => {
        if (!isServer) cfg.resolve.alias['@sentry/node'] = '@sentry/browser';
        cfg.module.rules.push({
            test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
            use: {
                loader: 'url-loader',
                options: {
                    limit: 100000,
                    name: '[name].[ext]',
                },
            },
        });
        return cfg;
    },
    typescript: {
        ignoreBuildErrors: true,
    },
    publicRuntimeConfig: {
        deployEnv: process.env.DEPLOY_ENV || 'Development',
        customScripts: [],
    },

    images: {
        loader: 'akamai',
        path: '',
    },
    async headers() {
        return [
            {
                source: '/(.*)',
                headers: [
                    {
                        key: 'X-Application-Version',
                        value: getPackageVersion(),
                    },
                    {
                        key: 'access-control-allow-origin',
                        value: '*',
                    },
                ],
            },
        ];
    },
    experimental: {
        outputStandalone: true,
    },
};

module.exports = withSourceMaps(
    withRNV(config, {
        enableNextCss: false,
        enableOptimizedImages: true,
    })
);

Then after building the project source maps were sent to sentry with:

sentry-cli  --url $PROJECT_URL releases --org $PROJECT_ORG --project $PROJECT_NAME files $RELEASE_NAME \
    upload-sourcemaps $BUNDLE_PATH --dist $APP_VERSION 

But result is exactly the same. I don't see original code, but generated code.

[vladinko0]

FYI:
sentry-cli sourcemaps explain $EVENT
gives me:

✔ Event has a valid exception present
✔ Event has a valid stacktrace present
⚠ Exception is already source mapped and first resolved frame points to:

> [missing context line]

[OmkarK45]

I am getting the same issue, did you manage to solve it?

[vladinko0]

I think it is not issue of Sentry, but it is a problem of renative, which I am using.
flexn-io/renative#953