ref(nextjs): Add warning about non-hidden sourcemaps (#5649)

This adds a warning during nextjs app build (both in prod and dev) letting folks know that by default (for now), the sourcemaps we create can be seen by browser devtools.

In conjunction with getsentry/sentry-wizard#188, getsentry/sentry-docs#5464, and vercel/next.js#40079, this is the first step in addressing the concerns raised in #4489. See #4489 (comment) for more details.

Notes:

- The function doing the warning includes both the current warning and one for use in v8 and beyond (currently commented out), telling people they no longer need to set `hideSourceMaps` to `true` (because by that point it will be the default).

- The formatting of the warning matches the formatting of other nextjs warnings. Because nextjs vendors `chalk` themselves, that meant we needed to add it as a dependency. Though the latest version of `chalk` is 5.x, here we're using 3.x because it's the last to be compatible with node 8. (See the PR for a screenshot.)

- There are `TODO`s reflecting the changes which need to be made in v8 (change the default to `true`, switch the warning message) and v9 or v10 (get rid of the second warning once it's had plenty of time to do its job).

packages/nextjs/package.json

@@ -28,6 +28,7 @@
     "@sentry/types": "7.11.1",
     "@sentry/utils": "7.11.1",
     "@sentry/webpack-plugin": "1.19.0",
+    "chalk": "3.0.0",
     "jscodeshift": "^0.13.1",
     "rollup": "2.78.0",
     "tslib": "^1.9.3"

packages/nextjs/src/config/webpack.ts

@@ -2,6 +2,7 @@
 import { getSentryRelease } from '@sentry/node';
 import { dropUndefinedKeys, escapeStringForRegex, logger } from '@sentry/utils';
 import { default as SentryWebpackPlugin } from '@sentry/webpack-plugin';
+import * as chalk from 'chalk';
 import * as fs from 'fs';
 import * as path from 'path';
 
@@ -138,9 +139,14 @@ export function constructWebpackConfigFunction(
       // TODO Handle possibility that user is using `SourceMapDevToolPlugin` (see
       // https://webpack.js.org/plugins/source-map-dev-tool-plugin/)
 
+      // TODO (v9 or v10, maybe): Remove this
+      handleSourcemapHidingOptionWarning(userSentryOptions, isServer);
+
       // Next doesn't let you change `devtool` in dev even if you want to, so don't bother trying - see
       // https://github.com/vercel/next.js/blob/master/errors/improper-devtool.md
       if (!isDev) {
+        // TODO (v8): Default `hideSourceMaps` to `true`
+
         // `hidden-source-map` produces the same sourcemaps as `source-map`, but doesn't include the `sourceMappingURL`
         // comment at the bottom. For folks who aren't publicly hosting their sourcemaps, this is helpful because then
         // the browser won't look for them and throw errors into the console when it can't find them. Because this is a
@@ -494,3 +500,51 @@ function shouldEnableWebpackPlugin(buildContext: BuildContext, userSentryOptions
   // We've passed all of the tests!
   return true;
 }
+
+/** Handle warning messages about `hideSourceMaps` option. Can be removed in v9 or v10 (or whenever we consider that
+ * enough people will have upgraded the SDK that the warning about the default in v8 - currently commented out - is
+ * overkill). */
+function handleSourcemapHidingOptionWarning(userSentryOptions: UserSentryOptions, isServer: boolean): void {
+  // This is nextjs's own logging formatting, vendored since it's not exported. See
+  // https://github.com/vercel/next.js/blob/c3ceeb03abb1b262032bd96457e224497d3bbcef/packages/next/build/output/log.ts#L3-L11
+  // and
+  // https://github.com/vercel/next.js/blob/de7aa2d6e486c40b8be95a1327639cbed75a8782/packages/next/lib/eslint/runLintCheck.ts#L321-L323.
+  const codeFormat = (str: string): string => chalk.bold.cyan(str);
+
+  const _warningPrefix_ = `${chalk.yellow('warn')}  -`;
+  const _sentryNextjs_ = codeFormat('@sentry/nextjs');
+  const _hideSourceMaps_ = codeFormat('hideSourceMaps');
+  const _true_ = codeFormat('true');
+  const _false_ = codeFormat('false');
+  const _sentry_ = codeFormat('sentry');
+  const _nextConfigJS_ = codeFormat('next.config.js');
+
+  if (isServer && userSentryOptions.hideSourceMaps === undefined) {
+    // eslint-disable-next-line no-console
+    console.warn(
+      `\n${_warningPrefix_} In order to be able to deminify errors, ${_sentryNextjs_} creates sourcemaps and uploads ` +
+        'them to the Sentry server. Depending on your deployment setup, this means your original code may be visible ' +
+        `in browser devtools in production. To prevent this, set ${_hideSourceMaps_} to ${_true_} in the ${_sentry_} ` +
+        `options in your ${_nextConfigJS_}. To disable this warning without changing sourcemap behavior, set ` +
+        `${_hideSourceMaps_} to ${_false_}. (In ${_sentryNextjs_} version 8.0.0 and beyond, this option will default ` +
+        `to ${_true_}.) See https://webpack.js.org/configuration/devtool/ and ` +
+        'https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/#use-hidden-source-map for more ' +
+        'information.\n',
+    );
+  }
+
+  // TODO (v8): Remove the check above in favor of the one below
+
+  //   const infoPrefix = `${chalk.cyan('info')}  -`;
+  //
+  //   if (isServer && userSentryOptions.hideSourceMaps === true) {
+  //     // eslint-disable-next-line no-console
+  //     console.log(
+  //       `\n${infoPrefix} Starting in ${_sentryNextjs_} version 8.0.0, ${_hideSourceMaps_} defaults to ${_true_}, and ` +
+  //         `thus can be removed from the ${_sentry_} options in ${_nextConfigJS_}. See ` +
+  //         'https://webpack.js.org/configuration/devtool/ and ' +
+  //         'https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/#use-hidden-source-map for more ' +
+  //         'information.\n',
+  //     );
+  //   }
+}