fix(react): Add missing Sentry import to react guide

Author: andreiborza

apps/changelog/scripts/analyze-build.js

@@ -0,0 +1,91 @@
+const {nodeFileTrace} = require('@vercel/nft');
+const path = require('path');
+const fs = require('fs');
+
+function formatBytes(bytes, decimals = 2) {
+  if (bytes === 0) return '0 Bytes';
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+}
+
+async function analyzeBuild() {
+  try {
+    const tracePath = path.join(
+      process.cwd(),
+      'node_modules/next/dist/server/next-server.js'
+    );
+
+    /*
+    collectBuildTraces({
+          dir,
+          config,
+          distDir,
+          edgeRuntimeRoutes: collectRoutesUsingEdgeRuntime(pageInfos),
+          staticPages: [...staticPages],
+          nextBuildSpan,
+          hasSsrAmpPages,
+          buildTraceContext,
+          outputFileTracingRoot,
+          isTurbopack: true,
+        }
+    */
+
+    const fileSizes = new Map();
+    let totalSize = 0;
+
+    const results = await nodeFileTrace([tracePath], {
+      base: process.cwd(),
+      processCwd: process.cwd(),
+      ignore: [
+        'node_modules/next/dist/pages/**/*',
+        'node_modules/next/dist/server/image-optimizer.js',
+        'node_modules/next/dist/compiled/@ampproject/toolbox-optimizer/**/*',
+        'node_modules/next/dist/compiled/webpack/(bundle4|bundle5).js',
+        'node_modules/react/**/*.development.js',
+        'node_modules/react-dom/**/*.development.js',
+        'node_modules/use-subscription/**/*.development.js',
+        'node_modules/sharp/**/*',
+      ],
+    });
+
+    for (const file of results.fileList) {
+      const stats = fs.statSync(file);
+      const fileSize = stats.size;
+      fileSizes.set(file, fileSize);
+      totalSize += fileSize;
+    }
+
+    const reportPath = path.join(process.cwd(), 'build-analysis.json');
+    fs.writeFileSync(
+      reportPath,
+      JSON.stringify(
+        {
+          files: Array.from(results.fileList),
+          reasons: Object.fromEntries(
+            Array.from(results.reasons.entries()).map(([file, reason]) => [file, reason])
+          ),
+          sizes: Object.fromEntries(fileSizes),
+          summary: {
+            totalFiles: results.fileList.size,
+            totalSize: {
+              bytes: totalSize,
+              formatted: formatBytes(totalSize),
+            },
+          },
+        },
+        null,
+        2
+      )
+    );
+    console.log(`Report written to ${reportPath}`);
+    console.log('Total size:', formatBytes(totalSize));
+  } catch (error) {
+    console.error('Error analyzing build:', error);
+    process.exit(1);
+  }
+}
+
+analyzeBuild();

docs/platforms/javascript/guides/react/index.mdx

@@ -48,11 +48,11 @@ import * as Sentry from "@sentry/react";
 
 Sentry.init({
   dsn: "___PUBLIC_DSN___",
-  
+
   // Adds request headers and IP for users, for more info visit:
   // https://docs.sentry.io/platforms/javascript/guides/react/configuration/options/#sendDefaultPii
   sendDefaultPii: true,
-  
+
   integrations: [
     // ___PRODUCT_OPTION_START___ performance
     // If you're using react router, use the integration for your react router version instead.
@@ -113,6 +113,7 @@ Integrate Sentry with these hooks and customize error handling:
 
 ```javascript
 import { createRoot } from "react-dom/client";
+import * as Sentry from '@sentry/react';
 
 const container = document.getElementById(“app”);
 const root = createRoot(container, {

platform-includes/capture-error/javascript.react.mdx

@@ -52,6 +52,7 @@ Starting with React 19, the `createRoot` and `hydrateRoot` methods from `react-d
 
 ```javascript
 import { createRoot } from "react-dom/client";
+import * as Sentry from '@sentry/react';
 
 const container = document.getElementById(“app”);
 const root = createRoot(container, {