@sentry/wizard 3.25.1 → 3.26.0

package/dist/src/nextjs/nextjs-wizard.js

@@ -131,16 +131,20 @@ function runNextjsWizardWithTelemetry(options) {
                 case 5:
                     _c.sent();
                     return [4 /*yield*/, (0, telemetry_1.traceStep)('configure-sdk', function () { return __awaiter(_this, void 0, void 0, function () {
-                            var tunnelRoute;
+                            var tunnelRoute, reactComponentAnnotation;
                             return __generator(this, function (_a) {
                                 switch (_a.label) {
                                     case 0: return [4 /*yield*/, askShouldSetTunnelRoute()];
                                     case 1:
                                         tunnelRoute = _a.sent();
+                                        return [4 /*yield*/, askShouldEnableReactComponentAnnotation()];
+                                    case 2:
+                                        reactComponentAnnotation = _a.sent();
                                         return [4 /*yield*/, createOrMergeNextJsFiles(selectedProject, selfHosted, sentryUrl, {
                                                 tunnelRoute: tunnelRoute,
+                                                reactComponentAnnotation: reactComponentAnnotation,
                                             })];
-                                    case 2:
+                                    case 3:
                                         _a.sent();
                                         return [2 /*return*/];
                                 }
@@ -390,45 +394,69 @@ function createOrMergeNextJsFiles(selectedProject, selfHosted, sentryUrl, sdkCon
                     _i++;
                     return [3 /*break*/, 1];
                 case 4: return [4 /*yield*/, (0, telemetry_1.traceStep)('setup-instrumentation-hook', function () { return __awaiter(_this, void 0, void 0, function () {
-                        var srcInstrumentationTsExists, srcInstrumentationJsExists, instrumentationTsExists, instrumentationJsExists, instrumentationHookLocation, newInstrumentationFileName, srcFolderExists, instrumentationHookPath, successfullyCreated;
+                        var hasRootAppDirectory, hasRootPagesDirectory, hasSrcDirectory, instrumentationHookLocation, instrumentationTsExists, instrumentationJsExists, srcInstrumentationTsExists, srcInstrumentationJsExists, newInstrumentationFileName, newInstrumentationHookLocation, newInstrumentationHookPath, successfullyCreated;
                         return __generator(this, function (_a) {
                             switch (_a.label) {
                                 case 0:
-                                    srcInstrumentationTsExists = fs.existsSync(path.join(process.cwd(), 'src', 'instrumentation.ts'));
-                                    srcInstrumentationJsExists = fs.existsSync(path.join(process.cwd(), 'src', 'instrumentation.js'));
+                                    hasRootAppDirectory = hasDirectoryPathFromRoot('app');
+                                    hasRootPagesDirectory = hasDirectoryPathFromRoot('pages');
+                                    hasSrcDirectory = hasDirectoryPathFromRoot('src');
                                     instrumentationTsExists = fs.existsSync(path.join(process.cwd(), 'instrumentation.ts'));
                                     instrumentationJsExists = fs.existsSync(path.join(process.cwd(), 'instrumentation.js'));
-                                    if (srcInstrumentationTsExists || srcInstrumentationJsExists) {
-                                        instrumentationHookLocation = 'src';
-                                    }
-                                    else if (instrumentationTsExists || instrumentationJsExists) {
-                                        instrumentationHookLocation = 'root';
+                                    srcInstrumentationTsExists = fs.existsSync(path.join(process.cwd(), 'src', 'instrumentation.ts'));
+                                    srcInstrumentationJsExists = fs.existsSync(path.join(process.cwd(), 'src', 'instrumentation.js'));
+                                    // https://nextjs.org/docs/app/building-your-application/configuring/src-directory
+                                    // https://nextjs.org/docs/app/api-reference/file-conventions/instrumentation
+                                    // The logic for where Next.js picks up the instrumentation file is as follows:
+                                    // - If there is either an `app` folder or a `pages` folder in the root directory of your Next.js app, Next.js looks
+                                    // for an `instrumentation.ts` file in the root of the Next.js app.
+                                    // - Otherwise, if there is neither an `app` folder or a `pages` folder in the rood directory of your Next.js app,
+                                    // AND if there is an `src` folder, Next.js will look for the `instrumentation.ts` file in the `src` folder.
+                                    if (hasRootPagesDirectory || hasRootAppDirectory) {
+                                        if (instrumentationJsExists || instrumentationTsExists) {
+                                            instrumentationHookLocation = 'root';
+                                        }
+                                        else {
+                                            instrumentationHookLocation = 'does-not-exist';
+                                        }
                                     }
                                     else {
-                                        instrumentationHookLocation = 'does-not-exist';
+                                        if (srcInstrumentationTsExists || srcInstrumentationJsExists) {
+                                            instrumentationHookLocation = 'src';
+                                        }
+                                        else {
+                                            instrumentationHookLocation = 'does-not-exist';
+                                        }
                                     }
-                                    if (!(instrumentationHookLocation === 'does-not-exist')) return [3 /*break*/, 4];
                                     newInstrumentationFileName = "instrumentation.".concat(typeScriptDetected ? 'ts' : 'js');
-                                    srcFolderExists = fs.existsSync(path.join(process.cwd(), 'src'));
-                                    instrumentationHookPath = srcFolderExists
-                                        ? path.join(process.cwd(), 'src', newInstrumentationFileName)
-                                        : path.join(process.cwd(), newInstrumentationFileName);
-                                    return [4 /*yield*/, (0, clack_utils_1.createNewConfigFile)(instrumentationHookPath, (0, templates_1.getInstrumentationHookContent)(srcFolderExists ? 'src' : 'root'))];
+                                    if (!(instrumentationHookLocation === 'does-not-exist')) return [3 /*break*/, 4];
+                                    newInstrumentationHookLocation = void 0;
+                                    if (hasRootPagesDirectory || hasRootAppDirectory) {
+                                        newInstrumentationHookLocation = 'root';
+                                    }
+                                    else if (hasSrcDirectory) {
+                                        newInstrumentationHookLocation = 'src';
+                                    }
+                                    else {
+                                        newInstrumentationHookLocation = 'root';
+                                    }
+                                    newInstrumentationHookPath = newInstrumentationHookLocation === 'root'
+                                        ? path.join(process.cwd(), newInstrumentationFileName)
+                                        : path.join(process.cwd(), 'src', newInstrumentationFileName);
+                                    return [4 /*yield*/, (0, clack_utils_1.createNewConfigFile)(newInstrumentationHookPath, (0, templates_1.getInstrumentationHookContent)(newInstrumentationHookLocation))];
                                 case 1:
                                     successfullyCreated = _a.sent();
                                     if (!!successfullyCreated) return [3 /*break*/, 3];
-                                    return [4 /*yield*/, (0, clack_utils_1.showCopyPasteInstructions)(newInstrumentationFileName, (0, templates_1.getInstrumentationHookCopyPasteSnippet)(srcFolderExists ? 'src' : 'root'))];
+                                    return [4 /*yield*/, (0, clack_utils_1.showCopyPasteInstructions)(newInstrumentationFileName, (0, templates_1.getInstrumentationHookCopyPasteSnippet)(newInstrumentationHookLocation))];
                                 case 2:
                                     _a.sent();
                                     _a.label = 3;
                                 case 3: return [3 /*break*/, 6];
-                                case 4: return [4 /*yield*/, (0, clack_utils_1.showCopyPasteInstructions)(srcInstrumentationTsExists
+                                case 4: return [4 /*yield*/, (0, clack_utils_1.showCopyPasteInstructions)(srcInstrumentationTsExists || instrumentationTsExists
                                         ? 'instrumentation.ts'
-                                        : srcInstrumentationJsExists
+                                        : srcInstrumentationJsExists || instrumentationJsExists
                                             ? 'instrumentation.js'
-                                            : instrumentationTsExists
-                                                ? 'instrumentation.ts'
-                                                : 'instrumentation.js', (0, templates_1.getInstrumentationHookCopyPasteSnippet)(instrumentationHookLocation))];
+                                            : newInstrumentationFileName, (0, templates_1.getInstrumentationHookCopyPasteSnippet)(instrumentationHookLocation))];
                                 case 5:
                                     _a.sent();
                                     _a.label = 6;
@@ -439,7 +467,7 @@ function createOrMergeNextJsFiles(selectedProject, selfHosted, sentryUrl, sdkCon
                 case 5:
                     _a.sent();
                     return [4 /*yield*/, (0, telemetry_1.traceStep)('setup-next-config', function () { return __awaiter(_this, void 0, void 0, function () {
-                            var withSentryConfigOptionsTemplate, nextConfigJs, nextConfigMjs, nextConfigJsExists, nextConfigMjsExists, nextConfigJsContent, probablyIncludesSdk, shouldInject, injectAnyhow, nextConfigMjsContent, probablyIncludesSdk, shouldInject, injectAnyhow, mod, expressionToWrap, newCode, _a, shouldContinue;
+                            var withSentryConfigOptionsTemplate, nextConfigPossibleFilesMap, foundNextConfigFile, foundNextConfigFileType, foundNextConfigFileFilename, nextConfigCjsContent, probablyIncludesSdk, shouldInject, injectAnyhow, nextConfigMjsContent, probablyIncludesSdk, shouldInject, injectAnyhow, mod, expressionToWrap, newCode, _a, shouldContinue;
                             return __generator(this, function (_b) {
                                 switch (_b.label) {
                                     case 0:
@@ -449,28 +477,40 @@ function createOrMergeNextJsFiles(selectedProject, selfHosted, sentryUrl, sdkCon
                                             selfHosted: selfHosted,
                                             sentryUrl: sentryUrl,
                                             tunnelRoute: sdkConfigOptions.tunnelRoute,
+                                            reactComponentAnnotation: sdkConfigOptions.reactComponentAnnotation,
                                         });
-                                        nextConfigJs = 'next.config.js';
-                                        nextConfigMjs = 'next.config.mjs';
-                                        nextConfigJsExists = fs.existsSync(path.join(process.cwd(), nextConfigJs));
-                                        nextConfigMjsExists = fs.existsSync(path.join(process.cwd(), nextConfigMjs));
-                                        if (!(!nextConfigJsExists && !nextConfigMjsExists)) return [3 /*break*/, 2];
+                                        nextConfigPossibleFilesMap = {
+                                            js: 'next.config.js',
+                                            mjs: 'next.config.mjs',
+                                            cjs: 'next.config.cjs',
+                                            ts: 'next.config.ts',
+                                            mts: 'next.config.mts',
+                                            cts: 'next.config.cts',
+                                        };
+                                        foundNextConfigFile = Object.entries(nextConfigPossibleFilesMap).find(function (_a) {
+                                            var fileName = _a[1];
+                                            return fs.existsSync(path.join(process.cwd(), fileName));
+                                        });
+                                        if (!!foundNextConfigFile) return [3 /*break*/, 2];
                                         Sentry.setTag('next-config-strategy', 'create');
-                                        return [4 /*yield*/, fs.promises.writeFile(path.join(process.cwd(), nextConfigJs), (0, templates_1.getNextjsConfigCjsTemplate)(withSentryConfigOptionsTemplate), { encoding: 'utf8', flag: 'w' })];
+                                        return [4 /*yield*/, fs.promises.writeFile(
+                                            // We are creating a `next.config.js` file by default as it is supported by the most Next.js versions
+                                            path.join(process.cwd(), nextConfigPossibleFilesMap.js), (0, templates_1.getNextjsConfigCjsTemplate)(withSentryConfigOptionsTemplate), { encoding: 'utf8', flag: 'w' })];
                                     case 1:
                                         _b.sent();
                                         prompts_1.default.log.success("Created ".concat(chalk_1.default.cyan('next.config.js'), " with Sentry configuration."));
-                                        _b.label = 2;
+                                        return [2 /*return*/];
                                     case 2:
-                                        if (!nextConfigJsExists) return [3 /*break*/, 7];
+                                        foundNextConfigFileType = foundNextConfigFile[0], foundNextConfigFileFilename = foundNextConfigFile[1];
+                                        if (!(foundNextConfigFileType === 'js' || foundNextConfigFileType === 'cjs')) return [3 /*break*/, 7];
                                         Sentry.setTag('next-config-strategy', 'modify');
-                                        nextConfigJsContent = fs.readFileSync(path.join(process.cwd(), nextConfigJs), 'utf8');
-                                        probablyIncludesSdk = nextConfigJsContent.includes('@sentry/nextjs') &&
-                                            nextConfigJsContent.includes('withSentryConfig');
+                                        nextConfigCjsContent = fs.readFileSync(path.join(process.cwd(), foundNextConfigFileFilename), 'utf8');
+                                        probablyIncludesSdk = nextConfigCjsContent.includes('@sentry/nextjs') &&
+                                            nextConfigCjsContent.includes('withSentryConfig');
                                         shouldInject = true;
                                         if (!probablyIncludesSdk) return [3 /*break*/, 4];
                                         return [4 /*yield*/, (0, clack_utils_1.abortIfCancelled)(prompts_1.default.confirm({
-                                                message: "".concat(chalk_1.default.cyan(nextConfigJs), " already contains Sentry SDK configuration. Should the wizard modify it anyways?"),
+                                                message: "".concat(chalk_1.default.cyan(foundNextConfigFileFilename), " already contains Sentry SDK configuration. Should the wizard modify it anyways?"),
                                             }))];
                                     case 3:
                                         injectAnyhow = _b.sent();
@@ -478,23 +518,26 @@ function createOrMergeNextJsFiles(selectedProject, selfHosted, sentryUrl, sdkCon
                                         _b.label = 4;
                                     case 4:
                                         if (!shouldInject) return [3 /*break*/, 6];
-                                        return [4 /*yield*/, fs.promises.appendFile(path.join(process.cwd(), nextConfigJs), (0, templates_1.getNextjsConfigCjsAppendix)(withSentryConfigOptionsTemplate), 'utf8')];
+                                        return [4 /*yield*/, fs.promises.appendFile(path.join(process.cwd(), foundNextConfigFileFilename), (0, templates_1.getNextjsConfigCjsAppendix)(withSentryConfigOptionsTemplate), 'utf8')];
                                     case 5:
                                         _b.sent();
-                                        prompts_1.default.log.success("Added Sentry configuration to ".concat(chalk_1.default.cyan(nextConfigJs), ". ").concat(chalk_1.default.dim('(you probably want to clean this up a bit!)')));
+                                        prompts_1.default.log.success("Added Sentry configuration to ".concat(chalk_1.default.cyan(foundNextConfigFileFilename), ". ").concat(chalk_1.default.dim('(you probably want to clean this up a bit!)')));
                                         _b.label = 6;
                                     case 6:
                                         Sentry.setTag('next-config-mod-result', 'success');
                                         _b.label = 7;
                                     case 7:
-                                        if (!nextConfigMjsExists) return [3 /*break*/, 16];
-                                        nextConfigMjsContent = fs.readFileSync(path.join(process.cwd(), nextConfigMjs), 'utf8');
+                                        if (!(foundNextConfigFileType === 'mjs' ||
+                                            foundNextConfigFileType === 'mts' ||
+                                            foundNextConfigFileType === 'cts' ||
+                                            foundNextConfigFileType === 'ts')) return [3 /*break*/, 16];
+                                        nextConfigMjsContent = fs.readFileSync(path.join(process.cwd(), foundNextConfigFileFilename), 'utf8');
                                         probablyIncludesSdk = nextConfigMjsContent.includes('@sentry/nextjs') &&
                                             nextConfigMjsContent.includes('withSentryConfig');
                                         shouldInject = true;
                                         if (!probablyIncludesSdk) return [3 /*break*/, 9];
                                         return [4 /*yield*/, (0, clack_utils_1.abortIfCancelled)(prompts_1.default.confirm({
-                                                message: "".concat(chalk_1.default.cyan(nextConfigMjs), " already contains Sentry SDK configuration. Should the wizard modify it anyways?"),
+                                                message: "".concat(chalk_1.default.cyan(foundNextConfigFileFilename), " already contains Sentry SDK configuration. Should the wizard modify it anyways?"),
                                             }))];
                                     case 8:
                                         injectAnyhow = _b.sent();
@@ -513,25 +556,25 @@ function createOrMergeNextJsFiles(selectedProject, selfHosted, sentryUrl, sdkCon
                                         // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
                                         mod.exports.default = magicast_1.builders.raw("withSentryConfig(\n      ".concat(expressionToWrap, ",\n      ").concat(withSentryConfigOptionsTemplate, "\n)"));
                                         newCode = mod.generate().code;
-                                        return [4 /*yield*/, fs.promises.writeFile(path.join(process.cwd(), nextConfigMjs), newCode, {
+                                        return [4 /*yield*/, fs.promises.writeFile(path.join(process.cwd(), foundNextConfigFileFilename), newCode, {
                                                 encoding: 'utf8',
                                                 flag: 'w',
                                             })];
                                     case 10:
                                         _b.sent();
-                                        prompts_1.default.log.success("Added Sentry configuration to ".concat(chalk_1.default.cyan(nextConfigMjs), ". ").concat(chalk_1.default.dim('(you probably want to clean this up a bit!)')));
+                                        prompts_1.default.log.success("Added Sentry configuration to ".concat(chalk_1.default.cyan(foundNextConfigFileFilename), ". ").concat(chalk_1.default.dim('(you probably want to clean this up a bit!)')));
                                         Sentry.setTag('next-config-mod-result', 'success');
                                         _b.label = 11;
                                     case 11: return [3 /*break*/, 16];
                                     case 12:
                                         _a = _b.sent();
                                         Sentry.setTag('next-config-mod-result', 'fail');
-                                        prompts_1.default.log.warn(chalk_1.default.yellow("Something went wrong writing to ".concat(chalk_1.default.cyan(nextConfigMjs))));
-                                        prompts_1.default.log.info("Please put the following code snippet into ".concat(chalk_1.default.cyan(nextConfigMjs), ": ").concat(chalk_1.default.dim('You probably have to clean it up a bit.'), "\n"));
+                                        prompts_1.default.log.warn(chalk_1.default.yellow("Something went wrong writing to ".concat(chalk_1.default.cyan(foundNextConfigFileFilename), ".")));
+                                        prompts_1.default.log.info("Please put the following code snippet into ".concat(chalk_1.default.cyan(foundNextConfigFileFilename), ": ").concat(chalk_1.default.dim('You probably have to clean it up a bit.'), "\n"));
                                         // eslint-disable-next-line no-console
                                         console.log((0, templates_1.getNextjsConfigEsmCopyPasteSnippet)(withSentryConfigOptionsTemplate));
                                         return [4 /*yield*/, (0, clack_utils_1.abortIfCancelled)(prompts_1.default.confirm({
-                                                message: "Are you done putting the snippet above into ".concat(chalk_1.default.cyan(nextConfigMjs), "?"),
+                                                message: "Are you done putting the snippet above into ".concat(chalk_1.default.cyan(foundNextConfigFileFilename), "?"),
                                                 active: 'Yes',
                                                 inactive: 'No, get me out of here',
                                             }))];
@@ -554,43 +597,45 @@ function createOrMergeNextJsFiles(selectedProject, selfHosted, sentryUrl, sdkCon
         });
     });
 }
+function hasDirectoryPathFromRoot(dirnameOrDirs) {
+    var dirPath = Array.isArray(dirnameOrDirs)
+        ? path.join.apply(path, __spreadArray([process.cwd()], dirnameOrDirs, false)) : path.join(process.cwd(), dirnameOrDirs);
+    return fs.existsSync(dirPath) && fs.lstatSync(dirPath).isDirectory();
+}
 function createExamplePage(selfHosted, selectedProject, sentryUrl) {
     return __awaiter(this, void 0, void 0, function () {
-        var srcDir, maybePagesDirPath, maybeSrcPagesDirPath, maybeAppDirPath, maybeSrcAppDirPath, typeScriptDetected, pagesLocation, appLocation, examplePageContents, newPageFileName, newRouteFileName, examplePageContents;
+        var hasSrcDirectory, hasRootAppDirectory, hasRootPagesDirectory, hasSrcAppDirectory, hasSrcPagesDirectory, typeScriptDetected, appFolderLocation, pagesFolderLocation, newPagesFolderLocation, examplePageContents, newPageFileName, newRouteFileName, examplePageContents;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    srcDir = path.join(process.cwd(), 'src');
-                    maybePagesDirPath = path.join(process.cwd(), 'pages');
-                    maybeSrcPagesDirPath = path.join(srcDir, 'pages');
-                    maybeAppDirPath = path.join(process.cwd(), 'app');
-                    maybeSrcAppDirPath = path.join(srcDir, 'app');
+                    hasSrcDirectory = hasDirectoryPathFromRoot('src');
+                    hasRootAppDirectory = hasDirectoryPathFromRoot('app');
+                    hasRootPagesDirectory = hasDirectoryPathFromRoot('pages');
+                    hasSrcAppDirectory = hasDirectoryPathFromRoot(['src', 'app']);
+                    hasSrcPagesDirectory = hasDirectoryPathFromRoot(['src', 'pages']);
+                    Sentry.setTag('nextjs-app-dir', hasRootAppDirectory || hasSrcAppDirectory);
                     typeScriptDetected = (0, clack_utils_1.isUsingTypeScript)();
-                    pagesLocation = fs.existsSync(maybePagesDirPath) &&
-                        fs.lstatSync(maybePagesDirPath).isDirectory()
-                        ? ['pages']
-                        : fs.existsSync(maybeSrcPagesDirPath) &&
-                            fs.lstatSync(maybeSrcPagesDirPath).isDirectory()
-                            ? ['src', 'pages']
-                            : undefined;
-                    appLocation = fs.existsSync(maybeAppDirPath) &&
-                        fs.lstatSync(maybeAppDirPath).isDirectory()
+                    appFolderLocation = hasRootAppDirectory
                         ? ['app']
-                        : fs.existsSync(maybeSrcAppDirPath) &&
-                            fs.lstatSync(maybeSrcAppDirPath).isDirectory()
+                        : hasSrcAppDirectory
                             ? ['src', 'app']
                             : undefined;
-                    if (!pagesLocation && !appLocation) {
-                        pagesLocation =
-                            fs.existsSync(srcDir) && fs.lstatSync(srcDir).isDirectory()
-                                ? ['src', 'pages']
-                                : ['pages'];
-                        fs.mkdirSync(path.join.apply(path, __spreadArray([process.cwd()], pagesLocation, false)), {
+                    pagesFolderLocation = hasRootPagesDirectory
+                        ? ['pages']
+                        : hasSrcPagesDirectory
+                            ? ['src', 'pages']
+                            : undefined;
+                    // If the user has neither pages nor app directory we create a pages folder for them
+                    if (!appFolderLocation && !pagesFolderLocation) {
+                        newPagesFolderLocation = hasSrcDirectory
+                            ? ['src', 'pages']
+                            : ['pages'];
+                        fs.mkdirSync(path.join.apply(path, __spreadArray([process.cwd()], newPagesFolderLocation, false)), {
                             recursive: true,
                         });
+                        pagesFolderLocation = newPagesFolderLocation;
                     }
-                    Sentry.setTag('nextjs-app-dir', !!appLocation);
-                    if (!appLocation) return [3 /*break*/, 3];
+                    if (!appFolderLocation) return [3 /*break*/, 3];
                     examplePageContents = (0, templates_1.getSentryExamplePageContents)({
                         selfHosted: selfHosted,
                         orgSlug: selectedProject.organization.slug,
@@ -598,30 +643,31 @@ function createExamplePage(selfHosted, selectedProject, sentryUrl) {
                         sentryUrl: sentryUrl,
                         useClient: true,
                     });
-                    fs.mkdirSync(path.join.apply(path, __spreadArray(__spreadArray([process.cwd()], appLocation, false), ['sentry-example-page'], false)), {
+                    fs.mkdirSync(path.join.apply(path, __spreadArray(__spreadArray([process.cwd()], appFolderLocation, false), ['sentry-example-page'], false)), {
                         recursive: true,
                     });
                     newPageFileName = "page.".concat(typeScriptDetected ? 'tsx' : 'jsx');
-                    return [4 /*yield*/, fs.promises.writeFile(path.join.apply(path, __spreadArray(__spreadArray([process.cwd()], appLocation, false), ['sentry-example-page',
+                    return [4 /*yield*/, fs.promises.writeFile(path.join.apply(path, __spreadArray(__spreadArray([process.cwd()], appFolderLocation, false), ['sentry-example-page',
                             newPageFileName], false)), examplePageContents, { encoding: 'utf8', flag: 'w' })];
                 case 1:
                     _a.sent();
-                    prompts_1.default.log.success("Created ".concat(chalk_1.default.cyan(path.join.apply(path, __spreadArray(__spreadArray([], appLocation, false), ['sentry-example-page', newPageFileName], false))), "."));
-                    fs.mkdirSync(path.join.apply(path, __spreadArray(__spreadArray([process.cwd()], appLocation, false), ['api', 'sentry-example-api'], false)), {
+                    prompts_1.default.log.success("Created ".concat(chalk_1.default.cyan(path.join.apply(path, __spreadArray(__spreadArray([], appFolderLocation, false), ['sentry-example-page', newPageFileName], false))), "."));
+                    fs.mkdirSync(path.join.apply(path, __spreadArray(__spreadArray([process.cwd()], appFolderLocation, false), ['api',
+                        'sentry-example-api'], false)), {
                         recursive: true,
                     });
                     newRouteFileName = "route.".concat(typeScriptDetected ? 'ts' : 'js');
-                    return [4 /*yield*/, fs.promises.writeFile(path.join.apply(path, __spreadArray(__spreadArray([process.cwd()], appLocation, false), ['api',
+                    return [4 /*yield*/, fs.promises.writeFile(path.join.apply(path, __spreadArray(__spreadArray([process.cwd()], appFolderLocation, false), ['api',
                             'sentry-example-api',
                             newRouteFileName], false)), (0, templates_1.getSentryExampleAppDirApiRoute)(), { encoding: 'utf8', flag: 'w' })];
                 case 2:
                     _a.sent();
-                    prompts_1.default.log.success("Created ".concat(chalk_1.default.cyan(path.join.apply(path, __spreadArray(__spreadArray([], appLocation, false), ['api',
+                    prompts_1.default.log.success("Created ".concat(chalk_1.default.cyan(path.join.apply(path, __spreadArray(__spreadArray([], appFolderLocation, false), ['api',
                         'sentry-example-api',
                         newRouteFileName], false))), "."));
                     return [3 /*break*/, 6];
                 case 3:
-                    if (!pagesLocation) return [3 /*break*/, 6];
+                    if (!pagesFolderLocation) return [3 /*break*/, 6];
                     examplePageContents = (0, templates_1.getSentryExamplePageContents)({
                         selfHosted: selfHosted,
                         orgSlug: selectedProject.organization.slug,
@@ -629,18 +675,18 @@ function createExamplePage(selfHosted, selectedProject, sentryUrl) {
                         sentryUrl: sentryUrl,
                         useClient: false,
                     });
-                    return [4 /*yield*/, fs.promises.writeFile(path.join.apply(path, __spreadArray(__spreadArray([process.cwd()], pagesLocation, false), ['sentry-example-page.jsx'], false)), examplePageContents, { encoding: 'utf8', flag: 'w' })];
+                    return [4 /*yield*/, fs.promises.writeFile(path.join.apply(path, __spreadArray(__spreadArray([process.cwd()], pagesFolderLocation, false), ['sentry-example-page.jsx'], false)), examplePageContents, { encoding: 'utf8', flag: 'w' })];
                 case 4:
                     _a.sent();
-                    prompts_1.default.log.success("Created ".concat(chalk_1.default.cyan(path.join.apply(path, __spreadArray(__spreadArray([], pagesLocation, false), ['sentry-example-page.js'], false))), "."));
-                    fs.mkdirSync(path.join.apply(path, __spreadArray(__spreadArray([process.cwd()], pagesLocation, false), ['api'], false)), {
+                    prompts_1.default.log.success("Created ".concat(chalk_1.default.cyan(path.join.apply(path, __spreadArray(__spreadArray([], pagesFolderLocation, false), ['sentry-example-page.js'], false))), "."));
+                    fs.mkdirSync(path.join.apply(path, __spreadArray(__spreadArray([process.cwd()], pagesFolderLocation, false), ['api'], false)), {
                         recursive: true,
                     });
-                    return [4 /*yield*/, fs.promises.writeFile(path.join.apply(path, __spreadArray(__spreadArray([process.cwd()], pagesLocation, false), ['api',
-                            'sentry-example-api.js'], false)), (0, templates_1.getSentryExampleApiRoute)(), { encoding: 'utf8', flag: 'w' })];
+                    return [4 /*yield*/, fs.promises.writeFile(path.join.apply(path, __spreadArray(__spreadArray([process.cwd()], pagesFolderLocation, false), ['api',
+                            'sentry-example-api.js'], false)), (0, templates_1.getSentryExamplePagesDirApiRoute)(), { encoding: 'utf8', flag: 'w' })];
                 case 5:
                     _a.sent();
-                    prompts_1.default.log.success("Created ".concat(chalk_1.default.cyan(path.join.apply(path, __spreadArray(__spreadArray([], pagesLocation, false), ['api', 'sentry-example-api.js'], false))), "."));
+                    prompts_1.default.log.success("Created ".concat(chalk_1.default.cyan(path.join.apply(path, __spreadArray(__spreadArray([], pagesFolderLocation, false), ['api', 'sentry-example-api.js'], false))), "."));
                     _a.label = 6;
                 case 6: return [2 /*return*/];
             }
@@ -691,4 +737,40 @@ function askShouldSetTunnelRoute() {
         });
     });
 }
+function askShouldEnableReactComponentAnnotation() {
+    return __awaiter(this, void 0, void 0, function () {
+        var _this = this;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, (0, telemetry_1.traceStep)('ask-react-component-annotation-option', function () { return __awaiter(_this, void 0, void 0, function () {
+                        var shouldEnableReactComponentAnnotation;
+                        return __generator(this, function (_a) {
+                            switch (_a.label) {
+                                case 0: return [4 /*yield*/, (0, clack_utils_1.abortIfCancelled)(prompts_1.default.select({
+                                        message: 'Do you want to enable React component annotations to make breadcrumbs and session replays more readable?',
+                                        options: [
+                                            {
+                                                label: 'Yes',
+                                                value: true,
+                                                hint: 'Annotates React component names (increases bundle size)',
+                                            },
+                                            {
+                                                label: 'No',
+                                                value: false,
+                                                hint: 'Continue without React component annotations',
+                                            },
+                                        ],
+                                        initialValue: false,
+                                    }))];
+                                case 1:
+                                    shouldEnableReactComponentAnnotation = _a.sent();
+                                    return [2 /*return*/, shouldEnableReactComponentAnnotation];
+                            }
+                        });
+                    }); })];
+                case 1: return [2 /*return*/, _a.sent()];
+            }
+        });
+    });
+}
 //# sourceMappingURL=nextjs-wizard.js.map