Sentry Next.js stack traces display original typescript code

[InnaAndreeva]

Problem Statement

Hello!
I am using a @sentry/nextjs package to submit build artifacts to Sentry.io. However Sentry displays javascript code because typescript code compiles into javascript. Such traces are quite hard to read for our team.
My tsconfig.json looks like

{
"extends": "./tsconfig",
  "compilerOptions": {
    "sourceMap": true,
    "inlineSources": true,
    "sourceRoot": "/"
  }
}

Where tsconfig is standard Next.js tsconfig.json file.
sentry.client.config.js and sentry.server.config.js files contain integrations property configured such way

import { RewriteFrames } from '@sentry/integrations';

const SENTRY_DSN = 'https://my-awesome-dsn';

Sentry.init({
    dsn: SENTRY_DSN,
    // Adjust this value in production, or use tracesSampler for greater control
    tracesSampleRate: 1.0,
    integrations: [
        new RewriteFrames({
            root: process.cwd(),
        }),
    ],

});

So root property contains the path to the root directory with typescript code.

I use @sentry/nextjs 7.14.2 and next 12.3.1

Could you tell, If it possible to load original typescript files into Sentry and render stack traces with TS code?

Solution Brainstorm

Maybe it is possible to override next.js _next/static/chunks/ directory content with root directory with source code

[lforst]

The Sentry Next.js SDK should automatically upload all the necessary artifacts to turn transpiled/minified code back into TS.

Can you try removing

"sourceMap": true,
"inlineSources": true,
"sourceRoot": "/"

from your tsconfig and also remove the RewriteFrames integration?

Also can you share your Next.js config? Thanks!

Please also see https://docs.sentry.io/platforms/javascript/guides/nextjs/sourcemaps/

[InnaAndreeva]

Thank you for your answer
I use such next.config.js

const { withSentryConfig } = require('@sentry/nextjs');
const withPlugins = require('next-compose-plugins');

const SentryWebpackPluginOptions = {
    silent: true,
    environment: process.env.NODE_ENV,
    errorHandler: (error, invokeErr, compilation) => {
        compilation.warnings.push(`Sentry CLI Plugin: ${error.message}`);
    },
};

const nextPlugins = [(config) => withSentryConfig(config, SentryWebpackPluginOptions)];

const nextConfig = {};

module.exports = withPlugins(nextPlugins, nextConfig);

I configure tsconfig.json and removed RewriteFrames but sourcemaps loads in Sentry with .js files

[lforst]

1. Can you share a link to the Sentry event that doesn't have a .ts stacktrace? Thanks!
2. Is this your entire nextjs config or did you remove plugins before sharing?
3. I believe next-compose-plugins currently doesn't work with withSentryConfig. Please wrap your config manually with withSentryConfig as a last step before exporting.

[InnaAndreeva]

Hello!
Sorry for a long answer
You are right, next-compose-plugins plugin breaks sending application source code to Sentry.
When I use such export as my source code in typescript renders in trace stack

module.exports = withPlugins(nextPlugins, withSentryConfig(nextConfig, SentryWebpackPluginOptions));