Merge pull request #98 from chrisweb/preview

chrisweb · web-flow · commit 67d9ae84b110 · 2025-02-19T16:32:23.000+01:00
#98 (comment)
diff --git a/app/error.tsx b/app/error.tsx
@@ -19,7 +19,7 @@ export default function Error({
 
     return (
         <section className="core">
-            <h1 className="h1">
+            <h1 className="h3">
                 Sorry, something went wrong
                 &nbsp;
                 <span className="emoji">😞</span>
diff --git a/app/global-error.tsx b/app/global-error.tsx
@@ -22,7 +22,7 @@ export default function GlobalError({
             <body>
                 <main>
                     <section className="core">
-                        <h1 className="h1">
+                        <h1 className="h3">
                             Sorry, something went wrong
                             &nbsp;
                             <span className="emoji">😞</span>
diff --git a/app/global.css b/app/global.css
@@ -328,27 +328,27 @@ p {
     margin-block: 1.8em;
 }
 
-h1 {
+h1, .h1 {
     font-size: var(--main-fontSize-big1);
 }
 
-h2 {
+h2, .h2 {
     font-size: var(--main-fontSize-big2);
 }
 
-h3 {
+h3, .h3 {
     font-size: var(--main-fontSize-big3);
 }
 
-h4 {
+h4, .h4 {
     font-size: var(--main-fontSize-big4);
 }
 
-h5 {
+h5, .h5 {
     font-size: var(--main-fontSize-big5);
 }
 
-h6 {
+h6, .h6 {
     font-size: var(--main-fontSize-big6);
 }
 
diff --git a/app/web_development/posts/sentry-io/page.mdx b/app/web_development/posts/sentry-io/page.mdx
@@ -2,7 +2,7 @@
 title: Sentry.io
 keywords: ['Sentry.io', 'logging', 'debugging', 'SaaS', 'wizard']
 published: 2024-08-07T11:22:33.444Z
-modified: 2024-09-02T16:16:16.444Z
+modified: 2025-02-19T16:16:16.444Z
 permalink: https://chris.lu/web_development/posts/sentry-io
 section: Web development
 ---
@@ -206,28 +206,42 @@ To enable Sentry **reactComponentAnnotation** configuration option is usually a
 
 ### Issues with Sentry Component Annotations
 
-To make this feature happen Sentry needs to add a data attributes to components, this does usually not pose a problem except sometimes the Sentry Annotations on third party components will cause an error in those third party tools, like [react-three-fiber](https://github.com/pmndrs/react-three-fiber) which do NOT like those extra attributes at all
+For the **Sentry Component Annotation** feature to work, Sentry adds a `data-sentry` data attribute to the DOM of React components.
 
-This means that **React component annotations** are great unless you use a package like **React Three Fiber** or setup your project using **Vite**, then you need to disable the feature
+This does usually not pose a problem except with some packages that are incompatible. For example if you enable **Component Annotations** and use [@react-three/fiber](https://github.com/pmndrs/react-three-fiber) then you might see the following error ([Sentry Issue #530](https://github.com/getsentry/sentry-javascript-bundler-plugins/issues/530)) popping up in your terminal:
 
-#### React three fiber (R3F) issue
+> TypeError: Cannot read properties of undefined (reading 'sentry')
 
-For now if you use **React three fiber (R3F)** the only workaround is to turn the Sentry **React component annotations** option off, by setting the `reactComponentAnnotation` variable to false
+A similar [Issue #492](https://github.com/getsentry/sentry-javascript-bundler-plugins/issues/492) has impacted vite users
 
-It is only after I had opened an [Issue #13413](https://github.com/getsentry/sentry-javascript/issues/13413) in the **sentry-javascript** repository that I found the [Issue #530 (Cannot read properties of undefined (reading 'sentry') when using reactComponentAnnotation)](https://github.com/getsentry/sentry-javascript-bundler-plugins/issues/530) in the **sentry-javascript-bundler-plugins** repository, which has a comment by one of the Sentry SDK maintainers, they mentioned that they consider adding more options in the future to let you exclude components
+<span className="neonBlueHighlightedText">Option 1</span> (just a workaround): Is to disable the feature by setting the **reactComponentAnnotation** configuration option to **false**:
 
-However as of now those options are not available yet (we can NOT enable React component annotations and exclude React three fiber), meaning the only option left is to disable the reactComponentAnnotation feature (if you chose to continue using R3F)
+```js
+reactComponentAnnotation: {
+    enabled: false,
+},
+```
 
-> [!MORE]  
-> [Sentry "Issue #530" (open as of dec. 2024)](https://github.com/getsentry/sentry-javascript-bundler-plugins/issues/530)  
+<span className="neonBlueHighlightedText">Option 2</span> (only available in Sentry > 9):
 
-#### Vite issue
+The sentry-javascript-bundler-plugins [PR #617](https://github.com/getsentry/sentry-javascript-bundler-plugins/pull/617) has added a new **ignoredComponents** configuration option, that lets you tell Sentry which components should get ignored, meaning for those components Sentry will not try to add extra attributes to their DOM
 
-There is a similar issue when using Vite and the @sentry/vite-plugin as described in the [Issue #492](https://github.com/getsentry/sentry-javascript-bundler-plugins/issues/492) which (as of dec. 2024) is also still open
+```js
+reactComponentAnnotation: {
+    enabled: true,
+    ignoredComponents: ['MY_COMPONENT_WHICH_BREAKS'],
+},
+```
 
-Same as R3F, the only solution here is to NOT enable the annotations feature until the problem is fixed
+> [!WARN]
+> The first **sentry-javascript-bundler-plugins** version with support for the Sentry **ignoredComponents** is [version 2.23.0](https://github.com/getsentry/sentry-javascript-bundler-plugins/releases/tag/2.23.0). 
+>  
+> @Sentry/Next.js v8.45.0 still uses @sentry/bundler-plugin-core / @sentry/webpack-plugin v2.22.7
+>  
+> @Sentry/Next.js v9.0.1 has (@sentry/webpack-plugin) v3.1.2 as dependency, so this is the first version that has the new **ignoredComponents** feature merged
 
 > [!MORE]  
-> [Sentry "Issue #492" (open as of dec. 2024)](https://github.com/getsentry/sentry-javascript-bundler-plugins/issues/530)  
+> [Sentry bundler "Issue #530"](https://github.com/getsentry/sentry-javascript-bundler-plugins/issues/530)  
+> [Sentry bundler "PR #617"](https://github.com/getsentry/sentry-javascript-bundler-plugins/issues/530)  
 
 </article>
diff --git a/app/web_development/tutorials/next-js-static-first-mdx-starterkit/error-handling-and-logging/page.mdx b/app/web_development/tutorials/next-js-static-first-mdx-starterkit/error-handling-and-logging/page.mdx
@@ -3,7 +3,7 @@ title: Error handling and logging - Next.js 15 Tutorial
 description: Error handling and logging - Next.js 15 static first MDX starterkit | Web development tutorials | www.chris.lu
 keywords: ['error', 'handling', 'logging', 'Boundary', 'react', 'sentry.io', 'nextjs']
 published: 2024-12-31T23:00:00.000Z
-modified: 2024-12-31T23:00:00.000Z
+modified: 2025-02-19T23:00:00.000Z
 permalink: https://chris.lu/web_development/tutorials/next-js-static-first-mdx-starterkit/error-handling-and-logging
 section: Web development
 ---
@@ -202,11 +202,7 @@ Now, Sentry will install the latest Sentry SDK for Next.js.
 **Do you want to enable React component annotations to make breadcrumbs and session replays more readable?** Next Sentry is asking if we want to use the feature called [React component annotations](https://docs.sentry.io/platforms/javascript/guides/react/features/component-names/) which attempts to use component names in reports instead of more cryptic selectors, I think this is a nice feature, so I selected **Yes**, if you already use Sentry.io and don't want to change how bug reports work, then leave it on **No**, you can always turn it on/off via the configuration later if you want
 
 > [!WARN]  
-> I turned **React component annotations** on and then noticed that my [react-three-fiber](https://github.com/pmndrs/react-three-fiber) animation had stopped working, this is because **React component annotations** adds data attributes to components which React Three Fiber does not like, and which then creates bugs which print the following in your console:
-> 
-> > TypeError: Cannot read properties of undefined (reading 'sentry')
->  
-> So if you plan on using **React Three Fiber** then you should answer to this question with **NO**, to learn more about this problem and how to disable **React component annotations** manually in the configuration have a look at the [Sentry React Component Annotation(s) can be problematic](#sentry-react-component-annotations-can-be-problematic) chapter
+> be aware that some packages might have a problem with the extra attributes that Sentry adds to the DOM of a component, to make the Annotations feature work. If you want to learn more about this problem, then I recommend reading the ["Issues with Sentry Component Annotations" chapter of the "Sentry" post](/web_development/posts/sentry-io#issues-with-sentry-component-annotations)  
 
 **Do you want to create an example page** chose **YES** (we will later use it to test the Sentry setup, and then we will delete it)
 
@@ -328,13 +324,11 @@ Now is a good time to commit the updated `next.config.ts` (and other changes the
 
 ### Sentry React Component Annotation(s) can be problematic
 
-To enable Sentry **reactComponentAnnotation** configuration option is usually a good idea as it makes reports more readable by using component names instead of long selectors
-
-To make this feature happen Sentry needs to add a data attributes to components, this does usually not pose a problem except sometimes the Sentry Annotations on third party components will cause an error in those third party tools
+It is usually a good idea enable Sentry **reactComponentAnnotation** configuration option, as it makes reports more readable by using component names instead of long selectors
 
-I have a more detailed explanation about annotations and the problems that can occur in my [Sentry Post](/web_development/posts/sentry-io)
+To make the Annotation(s) feature work, Sentry needs to add a data attributes to components, this does usually not pose a problem except in some situations where the Sentry Annotations on a third party components will cause an error in those third party package.
 
-The solution to these problems is to disable the feature and wait for the Sentry team to fine tune the feature (which is quite young) and fix annotations bugs (I have linked to some tickets in my Sentry post, you may want to subscribe to them if you want to keep track of fixes)
+For those that run into problems after enabling the React Component Annotations feature, I have added a more detailed explanation as well as a workaround in the ["Issues with Sentry Component Annotations" chapter of the "Sentry" post](/web_development/posts/sentry-io#issues-with-sentry-component-annotations)  
 
 > [!MORE]  
 > [chris.lu "Sentry.io" post](/web_development/posts/sentry-io)  
diff --git a/components/neonRoad/Canvas.tsx b/components/neonRoad/Canvas.tsx
@@ -80,8 +80,8 @@ const NeonRoadCanvas: React.FC<IProps> = (props) => {
                 aria-label={props.altText}
                 role="img"
                 gl={rendererProps}
-            //frameloop="never"
-            //onCreated={onCanvasCreatedHandler}
+                //frameloop="never"
+                //onCreated={onCanvasCreatedHandler}
             >
                 <Suspense fallback={<Fallback />}>
                     <AdaptiveDpr pixelated />
@@ -134,4 +134,6 @@ const NeonRoadCanvas: React.FC<IProps> = (props) => {
     )
 }
 
+NeonRoadCanvas.displayName = 'NeonRoadCanvas'
+
 export default NeonRoadCanvas
diff --git a/next.config.ts b/next.config.ts
@@ -218,7 +218,6 @@ const nextConfig = (phase: string) => {
             formats: ['image/avif', 'image/webp'],
             deviceSizes: [240, 336, 480, 704, 1080, 1408, 1920, 2112, 3840],
         },
-        // TODO: is this needed for app directory
         // Configure pageExtensions to include md and mdx
         pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'mdx'],
         // disable linting during builds using "next lint"
@@ -314,6 +313,21 @@ const securityHeadersConfig = (phase: string) => {
             ${upgradeInsecure}
         `
 
+        // for production environment white-list vitals.vercel-insights
+        // based on: https://vercel.com/docs/speed-insights#content-security-policy
+        if (process.env.VERCEL_ENV === 'production') {
+            return `
+                ${defaultCSPDirectives}
+                font-src 'self';
+                style-src 'self' 'unsafe-inline';
+                script-src 'self' 'unsafe-inline' 'wasm-unsafe-eval';
+                connect-src 'self' https://vitals.vercel-insights.com ${reportingDomainWildcard};
+                img-src 'self' data:;
+                frame-src 'none';
+                ${reportCSPViolations}
+            `
+        }
+
         // when environment is preview enable unsafe-inline scripts for vercel preview feedback/comments feature
         // and whitelist vercel's domains based on:
         // https://vercel.com/docs/workflow-collaboration/comments/specialized-usage#using-a-content-security-policy
@@ -332,26 +346,11 @@ const securityHeadersConfig = (phase: string) => {
             `
         }
 
-        // for production environment white-list vitals.vercel-insights
-        // based on: https://vercel.com/docs/speed-insights#content-security-policy
-        if (process.env.VERCEL_ENV === 'production') {
-            return `
-                ${defaultCSPDirectives}
-                font-src 'self';
-                style-src 'self' 'unsafe-inline';
-                script-src 'self' 'unsafe-inline' 'wasm-unsafe-eval';
-                connect-src 'self' https://vitals.vercel-insights.com ${reportingDomainWildcard};
-                img-src 'self' data:;
-                frame-src 'none';
-                ${reportCSPViolations}
-            `
-        }
-
         // for dev environment enable unsafe-eval for hot-reload
         return `
             ${defaultCSPDirectives}
-            font-src 'self';
-            style-src 'self' 'unsafe-inline';
+            font-src 'self' https://fonts.gstatic.com;
+            style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
             script-src 'self' 'unsafe-inline' 'unsafe-eval' https://va.vercel-scripts.com;
             connect-src 'self';
             img-src 'self' data:;
@@ -430,6 +429,10 @@ export default withSentryConfig(
         // Automatically annotate React components to show their full name in breadcrumbs and session replay
         reactComponentAnnotation: {
             enabled: false,
+            // not sure what to do with this yet
+            // none of my attempts seem to work
+            // https://github.com/getsentry/sentry-javascript-bundler-plugins/issues/530
+            ignoredComponents: ['@react-three/fiber', '__r3f', 'r3f', 'PlaneGeometry', 'BufferGeometry', 'Canvas', 'ambientLight', 'DirectionalLight', 'AdaptiveDpr', 'EffectComposer', 'Bloom', 'OrthographicCamera', 'PerspectiveCamera', 'SoftShadows', 'mesh'],
         },
 
         // Route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers.
@@ -439,7 +442,12 @@ export default withSentryConfig(
         tunnelRoute: '/monitoring',
 
         // Hides source maps from generated client bundles
-        hideSourceMaps: true,
+        sourcemaps: {
+            //disable: false;
+            //assets: string | string[];
+            //ignore?: string | string[];
+            //deleteSourcemapsAfterUpload: boolean;
+        },
 
         // Automatically tree-shake Sentry logger statements to reduce bundle size
         disableLogger: true,
@@ -448,6 +456,6 @@ export default withSentryConfig(
         // See the following for more information:
         // https://docs.sentry.io/product/crons/
         // https://vercel.com/docs/cron-jobs
-        automaticVercelMonitors: true,
+        //automaticVercelMonitors: true,
     }
 )
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json

Original file line number	Diff line number	Diff line change
`@@ -328,27 +328,27 @@ p {`
`328`	`328`	`margin-block: 1.8em;`
`329`	`329`	`}`
`330`	`330`
`331`		`-h1 {`
	`331`	`+h1, .h1 {`
`332`	`332`	`font-size: var(--main-fontSize-big1);`
`333`	`333`	`}`
`334`	`334`
`335`		`-h2 {`
	`335`	`+h2, .h2 {`
`336`	`336`	`font-size: var(--main-fontSize-big2);`
`337`	`337`	`}`
`338`	`338`
`339`		`-h3 {`
	`339`	`+h3, .h3 {`
`340`	`340`	`font-size: var(--main-fontSize-big3);`
`341`	`341`	`}`
`342`	`342`
`343`		`-h4 {`
	`343`	`+h4, .h4 {`
`344`	`344`	`font-size: var(--main-fontSize-big4);`
`345`	`345`	`}`
`346`	`346`
`347`		`-h5 {`
	`347`	`+h5, .h5 {`
`348`	`348`	`font-size: var(--main-fontSize-big5);`
`349`	`349`	`}`
`350`	`350`
`351`		`-h6 {`
	`351`	`+h6, .h6 {`
`352`	`352`	`font-size: var(--main-fontSize-big6);`
`353`	`353`	`}`
`354`	`354`
Original file line number	Diff line number	Diff line change
`@@ -80,8 +80,8 @@ const NeonRoadCanvas: React.FC<IProps> = (props) => {`
`80`	`80`	`aria-label={props.altText}`
`81`	`81`	`role="img"`
`82`	`82`	`gl={rendererProps}`
`83`		`- //frameloop="never"`
`84`		`- //onCreated={onCanvasCreatedHandler}`
	`83`	`+ //frameloop="never"`
	`84`	`+ //onCreated={onCanvasCreatedHandler}`
`85`	`85`	`>`
`86`	`86`	`<Suspense fallback={<Fallback />}>`
`87`	`87`	`<AdaptiveDpr pixelated />`
`@@ -134,4 +134,6 @@ const NeonRoadCanvas: React.FC<IProps> = (props) => {`
`134`	`134`	`)`
`135`	`135`	`}`
`136`	`136`
	`137`	`+NeonRoadCanvas.displayName = 'NeonRoadCanvas'`
	`138`	`+`
`137`	`139`	`export default NeonRoadCanvas`