set up sentry

.gitignore

@@ -42,3 +42,6 @@ next-env.d.ts
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+
+# Sentry Config File
+.sentryclirc

README.md

@@ -11,7 +11,7 @@
 - [ ] Labels page
   - [ ] content & styling
 - [ ] View content by tag/genre
-- [ ] Sentry
+- [x] Sentry
 - [ ] **Virtualized list** for micro posts
 - [ ] copy to clipboard icons
 - [ ] context: tracklist

next.config.js

@@ -1,6 +1,8 @@
 /** @type {import('next').NextConfig} */
 
 const { withContentlayer } = require('next-contentlayer')
+const { withSentryConfig } = require("@sentry/nextjs");
+
 
 const hostnames = [
   'i.scdn.co', // Spotify Album Art
@@ -12,7 +14,6 @@ const hostnames = [
   'd20tmfka7s58bt.cloudfront.net', // img-omg
   'spotifycdn.com',
   '*.spotifycdn.com'
-
 ]
 
 module.exports = withContentlayer({
@@ -40,3 +41,49 @@ module.exports = withContentlayer({
     return config;
   },
 })
+
+
+
+
+// Injected content via Sentry wizard below
+module.exports = withSentryConfig(
+  module.exports,
+  {
+    // For all available options, see:
+    // https://github.com/getsentry/sentry-webpack-plugin#options
+
+    // Suppresses source map uploading logs during build
+    silent: true,
+    org: "goosebumps-collective",
+    project: "goosebumps-collective",
+  },
+  {
+    // For all available options, see:
+    // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
+
+    // Upload a larger set of source maps for prettier stack traces (increases build time)
+    widenClientFileUpload: true,
+
+    // Transpiles SDK to be compatible with IE11 (increases bundle size)
+    transpileClientSDK: true,
+
+    // Route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers.
+    // This can increase your server load as well as your hosting bill.
+    // Note: Check that the configured route will not match with your Next.js middleware, otherwise reporting of client-
+    // side errors will fail.
+    tunnelRoute: "/monitoring",
+
+    // Hides source maps from generated client bundles
+    hideSourceMaps: true,
+
+    // Automatically tree-shake Sentry logger statements to reduce bundle size
+    disableLogger: true,
+
+    // Enables automatic instrumentation of Vercel Cron Monitors.
+    // See the following for more information:
+    // https://docs.sentry.io/product/crons/
+    // https://vercel.com/docs/cron-jobs
+    automaticVercelMonitors: true,
+  }
+);
+

package.json

@@ -18,6 +18,7 @@
     "@radix-ui/colors": "^3.0.0",
     "@radix-ui/react-scroll-area": "^1.0.2",
     "@radix-ui/react-tabs": "^1.0.4",
+    "@sentry/nextjs": "^7.105.0",
     "@vercel/og": "^0.6.2",
     "clsx": "^2.1.0",
     "contentlayer": "^0.3.2",

sentry.client.config.ts

@@ -0,0 +1,30 @@
+// This file configures the initialization of Sentry on the client.
+// The config you add here will be used whenever a users loads a page in their browser.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import * as Sentry from "@sentry/nextjs";
+
+Sentry.init({
+  dsn: "https://[email protected]/5439010",
+
+  // Adjust this value in production, or use tracesSampler for greater control
+  tracesSampleRate: 1,
+
+  // Setting this option to true will print useful information to the console while you're setting up Sentry.
+  debug: false,
+
+  replaysOnErrorSampleRate: 1.0,
+
+  // This sets the sample rate to be 10%. You may want this to be 100% while
+  // in development and sample at a lower rate in production
+  replaysSessionSampleRate: 0.1,
+
+  // You can remove this option if you're not planning to use the Sentry Session Replay feature:
+  integrations: [
+    Sentry.replayIntegration({
+      // Additional Replay configuration goes in here, for example:
+      maskAllText: true,
+      blockAllMedia: true,
+    }),
+  ],
+});

sentry.edge.config.ts

@@ -0,0 +1,16 @@
+// This file configures the initialization of Sentry for edge features (middleware, edge routes, and so on).
+// The config you add here will be used whenever one of the edge features is loaded.
+// Note that this config is unrelated to the Vercel Edge Runtime and is also required when running locally.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import * as Sentry from "@sentry/nextjs";
+
+Sentry.init({
+  dsn: "https://[email protected]/5439010",
+
+  // Adjust this value in production, or use tracesSampler for greater control
+  tracesSampleRate: 1,
+
+  // Setting this option to true will print useful information to the console while you're setting up Sentry.
+  debug: false,
+});

sentry.server.config.ts

@@ -0,0 +1,19 @@
+// This file configures the initialization of Sentry on the server.
+// The config you add here will be used whenever the server handles a request.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import * as Sentry from "@sentry/nextjs";
+
+Sentry.init({
+  dsn: "https://[email protected]/5439010",
+
+  // Adjust this value in production, or use tracesSampler for greater control
+  tracesSampleRate: 1,
+
+  // Setting this option to true will print useful information to the console while you're setting up Sentry.
+  debug: false,
+
+  // uncomment the line below to enable Spotlight (https://spotlightjs.com)
+  // spotlight: process.env.NODE_ENV === 'development',
+
+});

src/components/RSS.tsx

@@ -1,6 +1,7 @@
 import { useRouter } from 'next/router'
 import { useState } from 'react'
 import { FaSquareRss } from 'react-icons/fa6'
+import * as Sentry from '@sentry/nextjs'
 
 export const RSS = () => {
   const [isCopied, setIsCopied] = useState(false)
@@ -16,6 +17,7 @@ export const RSS = () => {
         setIsCopied(false)
       }, 3500)
     } catch (error) {
+      Sentry.captureException(error)
       console.error('Failed to copy to clipboard', error)
     }
   }

src/pages/_error.jsx

@@ -0,0 +1,17 @@
+import * as Sentry from "@sentry/nextjs";
+import Error from "next/error";
+
+const CustomErrorComponent = (props) => {
+  return <Error statusCode={props.statusCode} />;
+};
+
+CustomErrorComponent.getInitialProps = async (contextData) => {
+  // In case this is running in a serverless function, await this in order to give Sentry
+  // time to send the error before the lambda exits
+  await Sentry.captureUnderscoreErrorException(contextData);
+
+  // This will contain the status code of the response
+  return Error.getInitialProps(contextData);
+};
+
+export default CustomErrorComponent;

src/pages/api/album.ts

@@ -1,6 +1,7 @@
 import { AlbumApiResponse, GenericAndMaybeLegacyError, TrackAPIResponse } from '@/src/types'
 import { NextApiRequest, NextApiResponse } from 'next'
 import { getAlbumDetails } from '../../lib/spotify'
+import * as Sentry from '@sentry/nextjs'
 
 const { parse } = require('spotify-uri')
 
@@ -20,33 +21,39 @@ export default async (
     id = query?.id
   }
 
-  const response = await getAlbumDetails(id)
-  if (response.status > 400) {
-    return res.status(200).json({ error: 'Album Not Found' })
+  try {
+    const response = await getAlbumDetails(id)
+
+    if (response.status > 400) {
+      return res.status(response.status).json({ error: 'Album Not Found' })
+    }
+
+    const albumType = response.album_type
+    const albumImageUrl = response.images[0].url
+    const title = response.name
+    const artists = response.artists.map((_artist) => _artist.name).join(', ')
+    const albumUrl = response.external_urls.spotify
+
+    const number_of_tracks_in_album = response.tracks.items.length
+    const preview_url_track_number = randomNumberWithinRange(0, number_of_tracks_in_album - 1)
+    const previewUrl = response.tracks.items[preview_url_track_number].preview_url
+    const tracks: TrackAPIResponse[] = response.tracks.items.map(
+      (item): TrackAPIResponse => ({
+        artists: item.artists.map((_artist) => _artist.name).join(', '),
+        previewUrl: item.preview_url,
+        title: item.name,
+        trackUrl: item.external_urls.spotify,
+        albumImageUrl
+      })
+    )
+
+    return res
+      .status(200)
+      .json({ tracks, albumType, albumImageUrl, title, artists, albumUrl, previewUrl })
+  } catch (error) {
+    Sentry.captureException(error)
+    return res.status(500).json({ error: 'Internal Server Error' })
   }
-
-  const albumType = response.album_type
-  const albumImageUrl = response.images[0].url
-  const title = response.name
-  const artists = response.artists.map((_artist) => _artist.name).join(', ')
-  const albumUrl = response.external_urls.spotify
-
-  const number_of_tracks_in_album = response.tracks.items.length
-  const preview_url_track_number = randomNumberWithinRange(0, number_of_tracks_in_album - 1)
-  const previewUrl = response.tracks.items[preview_url_track_number].preview_url
-  const tracks: TrackAPIResponse[] = response.tracks.items.map(
-    (item): TrackAPIResponse => ({
-      artists: item.artists.map((_artist) => _artist.name).join(', '),
-      previewUrl: item.preview_url,
-      title: item.name,
-      trackUrl: item.external_urls.spotify,
-      albumImageUrl
-    })
-  )
-
-  return res
-    .status(200)
-    .json({ tracks, albumType, albumImageUrl, title, artists, albumUrl, previewUrl })
 }
 
 function randomNumberWithinRange(myMin, myMax) {

src/pages/api/dl.ts

@@ -1,5 +1,6 @@
 import { NextApiRequest, NextApiResponse } from 'next';
 import fetch from 'node-fetch';
+import * as Sentry from '@sentry/nextjs'
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
   // Get the URL of the file to download from the query parameters or request body
@@ -19,6 +20,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
     // Return the downloaded file as the response body
     response.body.pipe(res);
   } catch (error) {
+    Sentry.captureException(error)
     res.status(500).json({ error: 'Failed to download file' });
   }
 }

src/pages/api/playlist.ts

@@ -1,6 +1,7 @@
 import { GenericAndMaybeLegacyError, PlaylistApiResponse, TrackAPIResponse } from '@/src/types'
 import { NextApiRequest, NextApiResponse } from 'next'
 import { getPlaylistDetails } from '../../lib/spotify'
+import * as Sentry from '@sentry/nextjs'
 
 const { parse } = require('spotify-uri')
 
@@ -20,28 +21,34 @@ export default async (
     id = query?.id
   }
 
-  const response = await getPlaylistDetails(id)
-  if (response.status > 400) {
-    return res.status(200).json({ error: 'Playlist Not Found' })
-  }
+  try {
+
+    const response = await getPlaylistDetails(id)
+    if (response.status > 400) {
+      return res.status(response.status).json({ error: 'Playlist Not Found' })
+    }
 
-  const playlistUrl = response.external_urls.spotify
-  const coverImageUrl = response.images[0].url
-  const title = response.name
-  const { description } = response
-  const ownerName = response.owner.display_name
-  const tracks: TrackAPIResponse[] = response.tracks.items.map(
-    (item): TrackAPIResponse => ({
-      albumType: item.track.album.album_type,
-      albumImageUrl: item.track.album.images[0].url,
-      artists: item.track.artists.map((_artist) => _artist.name).join(', '),
-      previewUrl: item.track.preview_url,
-      title: item.track.name,
-      trackUrl: item.track.external_urls.spotify,
-    })
-  )
-
-  return res.status(200).json({ playlistUrl, coverImageUrl, title, description, ownerName, tracks })
+    const playlistUrl = response.external_urls.spotify
+    const coverImageUrl = response.images[0].url
+    const title = response.name
+    const { description } = response
+    const ownerName = response.owner.display_name
+    const tracks: TrackAPIResponse[] = response.tracks.items.map(
+      (item): TrackAPIResponse => ({
+        albumType: item.track.album.album_type,
+        albumImageUrl: item.track.album.images[0].url,
+        artists: item.track.artists.map((_artist) => _artist.name).join(', '),
+        previewUrl: item.track.preview_url,
+        title: item.track.name,
+        trackUrl: item.track.external_urls.spotify,
+      })
+    )
+
+    return res.status(200).json({ playlistUrl, coverImageUrl, title, description, ownerName, tracks })
+  } catch (error) {
+    Sentry.captureException(error)
+    return res.status(500).json({ error: 'Internal Server Error' })
+  }
 }
 
 function randomNumberWithinRange(myMin, myMax) {

src/pages/api/rss.ts

@@ -3,7 +3,7 @@ import { NextApiRequest, NextApiResponse } from 'next';
 import { allMixes } from '@/contentlayer/generated'
 import fetch from 'node-fetch';
 import { DEFAULT_IMAGE_URL } from '@/src/constants';
-
+import * as Sentry from '@sentry/nextjs'
 
 export default async (req: NextApiRequest, res: NextApiResponse) => {
 
@@ -20,12 +20,12 @@ export default async (req: NextApiRequest, res: NextApiResponse) => {
           <enclosure url="${mix.mp3Url}" type="audio/mpeg" length="${contentLength}"/>
           <pubDate>${new Date(mix.date).toUTCString()}</pubDate>
           ${mix.description ?
-        `<description>${encodeXML(mix.description)}. Get the tracklist and more a immersive experience over at ${url}</description>` : ''
+          `<description>${encodeXML(mix.description)}. Get the tracklist and more a immersive experience over at ${url}</description>` : ''
         }
           <itunes:image href="${mix.thumbnailUrl ?? DEFAULT_IMAGE_URL}"/>
           <itunes:subtitle>${mix.title}</itunes:subtitle>
           <itunes:summary>${encodeXML(mix.description)}</itunes:summary>
-          ${mix.genres ? `<itunes:keywords>${mix.genres.join(', ')}</itunes:keywords>`: ''}
+          ${mix.genres ? `<itunes:keywords>${mix.genres.join(', ')}</itunes:keywords>` : ''}
           <itunes:author>Guide Fari</itunes:author>
           <dc:creator>Guide Fari</dc:creator>
           <itunes:explicit>no</itunes:explicit>
@@ -60,7 +60,7 @@ export default async (req: NextApiRequest, res: NextApiResponse) => {
 
     return res.status(200).send(sitemap);
   } catch (e: unknown) {
-    console.log('e:', e)
+    Sentry.captureException(e)
     if (!(e instanceof Error)) {
       throw e;
     }
@@ -70,7 +70,7 @@ export default async (req: NextApiRequest, res: NextApiResponse) => {
 };
 
 const encodeXML = (str: string) =>
-str
+  str
     .replace(/&/g, '&amp;')
     .replace(/</g, '&lt;')
     .replace(/>/g, '&gt;')