fix local config for next app and removed withProfiler (#598)

* cleaned up files and fixed local config * manually added se tag to api calls needed for demo * added sourcemap config option for next * uncommented out sentry script * fix sentry config values * updated react-loader-spinner for debugging purposes * reverted dep updates due to side effects * removed sentry withProfiler to troubleshoot error * added next dsn env variables to sentry init * removed unused variables * more sentry init cleanup * added query params to cart/checkout and ran prettier * fixed downstrema query params * accidentally deleted router from checout page --------- Co-authored-by: Aidan Landen <[email protected]>
sentry-demos · Oct 22, 2024 · 4b4d2c4 · 4b4d2c4
1 parent e811668
commit 4b4d2c4
Show file tree

Hide file tree

Showing 23 changed files with 86 additions and 312 deletions.
diff --git a/deploy.sh b/deploy.sh
@@ -142,7 +142,12 @@ for proj in $projects; do # bash only
     # Point to local backend http://host:port instead of cloud endpoints for all _built_ BE projects
     # If no backend projects specified in CLI args, keep using cloud (production or staging) BE endpoints.
     for be_proj in $be_projects; do
-      backend_var=$(var_name.sh %s_APP_%s_BACKEND $proj $be_proj)
+      if  [ "$proj" == "next" ]; then
+        # Next env variables need to start with NEXT_PUBLIC_*
+        backend_var=$(var_name.sh NEXT_PUBLIC_%s_BACKEND $be_proj)
+      else 
+        backend_var=$(var_name.sh %s_APP_%s_BACKEND $proj $be_proj)
+      fi
       . get_proj_var.sh "%s_LOCAL_PORT" $be_proj # sets $local_port
       echo "" >> .env # in case no newline
       backend_local="http://localhost:$local_port"
@@ -166,7 +171,7 @@ for proj in $projects; do # bash only
   ./build.sh
 
   if [[ "$fe_projects" = *"$proj "* ]]; then # project is frontend
-    if [[ "$proj" == "react" ]]; then
+    if [[ "$proj" == "react" || "$proj" == "next" ]]; then
       upload_sourcemaps="false" # using webpack plugin
     else
       upload_sourcemaps="true"

diff --git a/next/config-overrides.js b/next/config-overrides.js
@@ -14,7 +14,7 @@ module.exports = function override(config, env) {
       authToken: process.env.SENTRY_AUTH_TOKEN,
       include: '.',
       org: 'team-se',
-      project: 'aidan-react-local',
+      project: 'aidan-nextjs',
       ignoreFile: '.sentrycliignore',
       ignore: ['webpack.config.js'],
       configFile: 'sentry.properties',

diff --git a/next/config-overrides.js.template b/next/config-overrides.js.template
@@ -14,7 +14,7 @@ module.exports = function override(config, env) {
       authToken: process.env.SENTRY_AUTH_TOKEN,
       include: '.',
       org: '${SENTRY_ORG}',
-      project: '${REACT_SENTRY_PROJECT}',
+      project: '${NEXT_SENTRY_PROJECT}',
       ignoreFile: '.sentrycliignore',
       ignore: ['webpack.config.js'],
       configFile: 'sentry.properties',

diff --git a/next/next.config.mjs b/next/next.config.mjs
@@ -8,8 +8,8 @@ export default withSentryConfig(nextConfig, {
   // For all available options, see:
   // https://github.com/getsentry/sentry-webpack-plugin#options
 
-  org: 'aidans-test-org',
-  project: 'javascript-nextjs',
+  org: 'demo',
+  project: 'nextjs',
 
   // Only print logs for uploading source maps in CI
   silent: !process.env.CI,

diff --git a/next/public/StoreProvider.jsx b/next/public/StoreProvider.jsx
diff --git a/next/sentry.client.config.js b/next/sentry.client.config.js
@@ -4,14 +4,26 @@
 
 import * as Sentry from '@sentry/nextjs';
 
+const tracingOrigins = [
+  'localhost',
+  'empowerplant.io',
+  'run.app',
+  'appspot.com',
+  /^\//,
+];
+
 Sentry.init({
-  dsn: 'https://b9943feb5e210fbd4de6a8871d9f1db4@o4508021432844288.ingest.us.sentry.io/4508135114014720',
+  dsn: process.env.NEXT_PUBLIC_DSN,
 
   // Add optional integrations for additional features
-  integrations: [Sentry.replayIntegration()],
+  integrations: [
+    Sentry.replayIntegration(),
+    Sentry.browserTracingIntegration(),
+  ],
 
   // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
   tracesSampleRate: 1,
+  tracePropagationTargets: tracingOrigins,
 
   // Define how likely Replay events are sampled.
   // This sets the sample rate to be 10%. You may want this to be 100% while
@@ -20,6 +32,7 @@ Sentry.init({
 
   // Define how likely Replay events are sampled when an error occurs.
   replaysOnErrorSampleRate: 1.0,
+  profilesSampleRate: 1.0,
 
   // Setting this option to true will print useful information to the console while you're setting up Sentry.
   debug: false,

diff --git a/next/sentry.edge.config.js b/next/sentry.edge.config.js
@@ -6,7 +6,7 @@
 import * as Sentry from '@sentry/nextjs';
 
 Sentry.init({
-  dsn: 'https://b9943feb5e210fbd4de6a8871d9f1db4@o4508021432844288.ingest.us.sentry.io/4508135114014720',
+  dsn: process.env.NEXT_PUBLIC_DSN,
 
   // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
   tracesSampleRate: 1,

diff --git a/next/sentry.server.config.js b/next/sentry.server.config.js
@@ -5,7 +5,7 @@
 import * as Sentry from '@sentry/nextjs';
 
 Sentry.init({
-  dsn: 'https://b9943feb5e210fbd4de6a8871d9f1db4@o4508021432844288.ingest.us.sentry.io/4508135114014720',
+  dsn: process.env.NEXT_PUBLIC_DSN,
 
   // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
   tracesSampleRate: 1,

diff --git a/next/src/components/ButtonLink.jsx b/next/src/components/ButtonLink.jsx
@@ -1,13 +1,10 @@
 import Link from 'next/link';
 
 function Button({ to, children, params }) {
-  console.log(params);
   const hrefLink = {
     pathname: to,
     query: params,
   };
-  console.log(to);
-  console.log(children);
   return (
     <Link href={hrefLink} className="btn">
       {children}

diff --git a/next/src/components/Nav.jsx b/next/src/components/Nav.jsx
@@ -1,13 +1,13 @@
 import Link from 'next/link';
-import * as Sentry from '@sentry/react';
+import { useRouter } from 'next/router';
 import Image from 'next/image';
-
 import { connect } from 'react-redux';
 import { resetCart, addProduct, setProducts } from '../actions';
 
 import EPlogo from '../../public/empowerplant-logo.svg';
 
-function Nav({ cart, frontendSlowdown }) {
+function Nav({ cart }) {
+  const { query } = useRouter();
   return (
     <>
       <nav id="top-nav" className="show-mobile">
@@ -20,10 +20,13 @@ function Nav({ cart, frontendSlowdown }) {
             <Link href="/about" className="sentry-unmask">
               About
             </Link>
-            <Link href="/products" className="sentry-unmask">
+            <Link
+              href={{ pathname: '/products', query }}
+              className="sentry-unmask"
+            >
               Products
             </Link>
-            <Link href="/cart" className="sentry-unmask">
+            <Link href={{ pathname: '/cart', query }} className="sentry-unmask">
               Cart
               {cart.items.length > 0 ? (
                 <span>
@@ -51,12 +54,12 @@ function Nav({ cart, frontendSlowdown }) {
               About
             </Link>
             <Link
-              href={frontendSlowdown ? '/products-fes' : '/products'}
+              href={{ pathname: '/products', query }}
               className="sentry-unmask"
             >
               Products
             </Link>
-            <Link href="/cart">
+            <Link href={{ pathname: '/cart', query }}>
               <span className="sentry-unmask">Cart</span>
               {cart.items.length > 0 ? (
                 <span>
@@ -83,5 +86,5 @@ const mapStateToProps = (state, ownProps) => {
 };
 
 export default connect(mapStateToProps, { resetCart, addProduct, setProducts })(
-  Sentry.withProfiler(Nav, { name: 'Nav' })
+  Nav
 );
diff --git a/next/src/components/ProductCard.jsx b/next/src/components/ProductCard.jsx
@@ -7,7 +7,6 @@ function ProductCard(props) {
   const router = useRouter();
   const { query } = router;
   const product = props.product;
-  console.log(product);
   const itemLink = '/product';
   const stars = props.stars;
 
@@ -53,5 +52,5 @@ const mapStateToProps = (state, ownProps) => {
 };
 
 export default connect(mapStateToProps, { setProducts, addProduct, setFlag })(
-  Sentry.withProfiler(ProductCard, { name: 'ProductCard' })
+  ProductCard
 );
diff --git a/next/src/pages/_app.js b/next/src/pages/_app.js
@@ -10,18 +10,19 @@ import '../styles/cart.css';
 import '../styles/checkout.css';
 import '../styles/complete.css';
 import '../styles/product.css';
+import '../styles/employee.css';
 
 import 'react-loader-spinner/dist/loader/css/react-spinner-loader.css';
 import * as Sentry from '@sentry/nextjs';
 
 import { crasher } from '../utils/errors';
+
 import {
   determineBackendType,
   determineBackendUrl,
 } from '../utils/backendrouter';
 
 import { Provider } from 'react-redux';
-//import store from './utils/store';
 import { createStore, applyMiddleware, compose } from 'redux';
 import logger from 'redux-logger';
 import rootReducer from '../reducers';
@@ -30,43 +31,15 @@ import ScrollToTop from '../components/ScrollToTop';
 import Footer from '../components/Footer';
 import Nav from '../components/Nav';
 
-const tracingOrigins = [
-  'localhost',
-  'empowerplant.io',
-  'run.app',
-  'appspot.com',
-  /^\//,
-];
-
-let ENVIRONMENT;
-// if (window.location.hostname === 'localhost') {
-//   ENVIRONMENT = 'test';
-// } else {
-//   // App Engine
-//   ENVIRONMENT = 'production';
-// }
-
 let BACKEND_URL;
-let FRONTEND_SLOWDOWN;
-let RAGECLICK;
-const DSN = process.env.NEXT_PUBLIC_DSN;
 const RELEASE = process.env.NEXT_PUBLIC_RELEASE;
 
-console.log('ENVIRONMENT', ENVIRONMENT);
 console.log('RELEASE', RELEASE);
 
 function initSentry(environment) {
   Sentry.init({
-    dsn: DSN,
     release: RELEASE,
     environment: environment,
-    tracesSampleRate: 1.0,
-    tracePropagationTargets: tracingOrigins,
-    profilesSampleRate: 1.0,
-    replaysSessionSampleRate: 1.0,
-    debug: true,
-    defaultIntegrations: false,
-    integrations: [],
     beforeSend(event, hint) {
       // Parse from tags because src/index.js already set it there. Once there are React route changes, it is no longer in the URL bar
       let se;
@@ -125,7 +98,6 @@ class MyApp extends App {
 
   static async getInitialProps(appContext) {
     // Call the parent class's getInitialProps to get pageProps
-    console.log('in get initial props');
 
     const appProps = await App.getInitialProps(appContext);
     // Get hostname from the request headers (only available server-side)
@@ -150,10 +122,9 @@ class MyApp extends App {
   }
 
   componentDidMount() {
-    console.log('componentDidMount called');
     const { query } = this.props.pageProps;
-    const backendType = determineBackendType('');
-    BACKEND_URL = determineBackendUrl(backendType, ENVIRONMENT);
+    const backendType = determineBackendType(query.backend);
+    BACKEND_URL = determineBackendUrl(backendType);
     console.log(`> backendType: ${backendType} | backendUrl: ${BACKEND_URL}`);
 
     // These also get passed via request headers (see window.fetch below)
@@ -185,17 +156,12 @@ class MyApp extends App {
 
     if (query.frontendSlowdown === 'true') {
       console.log('> frontend-only slowdown: true');
-      FRONTEND_SLOWDOWN = true;
       currentScope.setTag('frontendSlowdown', true);
     } else {
       console.log('> frontend + backend slowdown');
       currentScope.setTag('frontendSlowdown', false);
     }
 
-    if (query.rageclick === 'true') {
-      RAGECLICK = true;
-    }
-
     if (query.userFeedback) {
       sessionStorage.setItem('userFeedback', query.userFeedback);
     } else {
@@ -246,6 +212,7 @@ class MyApp extends App {
     currentScope.setUser({ email: email });
 
     // TODO: Figure out why this is forcing a rerender on initial "Browse products" button click
+    // TODO: Currently adding SE tags only to indiviudal network calls for demo
     // // Automatically append `se`, `customerType` and `userEmail` query params to all requests
     // // (except for requests to Sentry)
     // const nativeFetch = window.fetch;
@@ -285,69 +252,6 @@ class MyApp extends App {
       </Provider>
     );
   }
-
-  // render() {
-  //   return (
-  //     <Provider store={store}>
-  //       <BrowserRouter history={history}>
-  //         <ScrollToTop />
-  //         <Nav frontendSlowdown={FRONTEND_SLOWDOWN} />
-  //         <div id="body-container">
-  //           <SentryRoutes>
-  //             <Route
-  //               path="/"
-  //               element={
-  //                 <Home
-  //                   backend={BACKEND_URL}
-  //                   frontendSlowdown={FRONTEND_SLOWDOWN}
-  //                 />
-  //               }
-  //             ></Route>
-  //             <Route
-  //               path="/about"
-  //               element={<About backend={BACKEND_URL} history={history} />}
-  //             ></Route>
-  //             <Route path="/cart" element={<Cart />} />
-  //             <Route
-  //               path="/checkout"
-  //               element={
-  //                 <Checkout
-  //                   backend={BACKEND_URL}
-  //                   rageclick={RAGECLICK}
-  //                   history={history}
-  //                 />
-  //               }
-  //             ></Route>
-  //             <Route path="/complete" element={<Complete />} />
-  //             <Route path="/error" element={<CompleteError />} />
-  //             <Route path="/employee/:id" element={<Employee />}></Route>
-  //             <Route path="/product/:id" element={<Product />}></Route>
-  //             <Route
-  //               path="/products"
-  //               element={<Products backend={BACKEND_URL} />}
-  //             ></Route>
-  //             <Route
-  //               path="/products-fes" // fes = frontend slowdown (only frontend)
-  //               element={
-  //                 <Products backend={BACKEND_URL} frontendSlowdown={true} />
-  //               }
-  //             ></Route>
-  //             <Route
-  //               path="/nplusone"
-  //               element={<Nplusone backend={BACKEND_URL} />}
-  //             />
-  //             <Route
-  //               path="/products-join"
-  //               element={<ProductsJoin backend={BACKEND_URL} />}
-  //             ></Route>
-  //             <Route path="*" element={<NotFound />} />
-  //           </SentryRoutes>
-  //         </div>
-  //         <Footer />
-  //       </BrowserRouter>
-  //     </Provider>
-  //   );
-  // }
 }
 
 export default MyApp;
diff --git a/next/src/pages/api/sentry-example-api.js b/next/src/pages/api/sentry-example-api.js