Error with ng build Angular v15.2.0

[ghost]

Is there an existing issue for this?

• [X] I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• [X] I have reviewed the documentation https://docs.sentry.io/
• [X] I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Self-hosted/on-premise

Which SDK are you using?

@sentry/angular

SDK Version

7.59.3

Framework Version

Angular v15.2.0, Node v16.13.1 (also tried with Node v18)

Link to Sentry event

No response

SDK Setup

const packageJson = require('../package.json');

let appVersion;

switch (environment.name) {
    case 'stage':
        appVersion = packageJson.stageVersion;
        break;
    case 'dev':
        appVersion = packageJson.devVersion;
        break;
    case 'prod':
        appVersion = packageJson.version;
        break;
}

try {
    Sentry.init({
        environment: environment.name,
        enabled: environment.sentry.enabled,
        dsn: environment.sentry.cdn,
        release: `${process.env.npm_package_name}@${appVersion}`,
        debug: environment.sentry.debug,
        integrations: [
            new Sentry.BrowserTracing({
                // Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled
                tracePropagationTargets: environment.sentry.tracePropagationTargets,
                routingInstrumentation: Sentry.routingInstrumentation,
                beforeNavigate: (context) => {
                    return {
                        ...context,
                        name: location.pathname.replace(UUID_REGEX, '/<hash>')
                    };
                },
            }),
            new Sentry.Replay(),
        ],
        // Performance Monitoring
        tracesSampleRate: environment.sentry.tracesSampleRate, // Capture 100% of the transactions, reduce in production!
        // Session Replay
        replaysSessionSampleRate: environment.sentry.replaysSessionSampleRate, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
        replaysOnErrorSampleRate: environment.sentry.replaysOnErrorSampleRate, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
    });

    const activeTransaction = Sentry.getActiveTransaction();
    bootstrapSpan = activeTransaction
        && activeTransaction.startChild({
            description: 'platform-browser-dynamic',
            op: 'ui.angular.bootstrap',
        });
} catch (err) {
    console.error(err);
}

env

export const environment = {
    name: 'dev',
    sentry: {
        enabled: false,
        cdn: 'url_to_cdn',
        debug: true,
        tracePropagationTargets: ['devUrl', 'devApiUrl'],
        tracesSampleRate: 1,
        replaysSessionSampleRate: 0.1,
        replaysOnErrorSampleRate: 1.0,
    }
};

Steps to Reproduce

I use custom-webpack with Angular with 3 environments. But currently I'm applying Dev env only angular.json

"architect": {
  "build": {
      "builder": "@angular-builders/custom-webpack:browser",
      "options": {
          "customWebpackConfig": {
              "mergeRules": {
                  "externals": "replace"
              },
              "replaceDuplicatePlugins": true
          }
      },
      "configurations": {
        "production": {
          "customWebpackConfig": {
            "path": "custom-webpack.config.prod.js"
          }
        },
        "stage": {
          "customWebpackConfig": {
            "path": "custom-webpack.config.stage.js"
          }
        },
        "dev": {
          "customWebpackConfig": {
            "path": "custom-webpack.config.dev.js"
          }
        }
      }         
  }
}

custom-webpack.config.dev.js

const { sentryWebpackPlugin } = require("@sentry/webpack-plugin");
const packageJson = require('./package.json');

module.exports = {
    devtool: "source-map", // Source map generation must be turned on
    plugins: [
        sentryWebpackPlugin({
            org: "myOrgName",
            project: "myProjectName",
            release: {
                name: `${process.env.npm_package_name}@${packageJson.devVersion}`
            },
            authToken: "myAuthToken",
        }),
    ],
};

When I run: npm start run build-dev with config in package.json "build-dev": "node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng build --configuration=dev" Sometimes it shows error An unhandled exception occurred: socket hang up with log detail:

Sometimes it shows error Client network socket disconnected before secure TLS connection was established with log detail:

Sometimes it builds successfully but it stuck at the last step after building success Build at: 2023-07-21T09:55:15.124Z - Hash: a86f2728c9b24f07 - Time: 57608ms

But when I tried with another plugin, it worked perfectly. Then I back to sentry plugins, it happened again

Expected Result

Build successfully without being stuck and errors

Actual Result

Images above

[Lms24]

Hi @nhan-truong255 thanks for writing in!

Which version of the @sentry/webpack-plugin are you using?

I'm not sure if this is related to whatever is causing this issue but is there a special reason why you're only using our plugin for dev builds and not for prod? Generally, our webpack plugin should primarily used for prod builds to upload source maps before you deploy your app to production/staging (or whatever environment you want to get source-mapped errors in Sentry)?

Furthermore, I'm wondering if this is related to https://github.com/getsentry/sentry-javascript-bundler-plugins/issues/345. This bug was tracked down to be caused by one of our dependencies (unplugin - https://github.com/unjs/unplugin/issues/323)

[ghost]

Hi @Lms24, I'm using @sentry/[email protected] (latest). I'm applying for the Dev environment first. If it's OK, I will move on to Prod. I think it's related to #345 that you mentioned. I'm facing the same issue.

[ghost]

If it helps you all

[Lms24]

Hi, I'm going to transfer this issue to our bundler plugins repo, as it's related to the webpack plugin. We're aware of it and we have a long term plan to move away from unplugin which is causing this issue. We'll still need to figure out if there's something we can contribute to unplugin to fix this in the meantime.

[github-actions[bot]]

This issue has gone three weeks without activity. In another week, I will close it.

But! If you comment or otherwise update it, I will reset the clock, and if you label it Status: Backlog or Status: In Progress, I will leave it alone ... forever!

---

"A weed is but an unloved flower." ― Ella Wheeler Wilcox 🥀

[github-actions[bot]]

This issue has gone three weeks without activity. In another week, I will close it.

But! If you comment or otherwise update it, I will reset the clock, and if you label it Status: Backlog or Status: In Progress, I will leave it alone ... forever!

---

"A weed is but an unloved flower." ― Ella Wheeler Wilcox 🥀