Add Sentry browser SDK (error monitoring, tracing, session replay)

.env.example

@@ -1,4 +1,5 @@
 APIFY_TOKEN=apify_api_1234567890
 GOOGLE_TOKEN=your_google_maps_api_key_here
 SPOTIFY_CLIENT_ID=your_spotify_client_id_here
-SPOTIFY_CLIENT_SECRET=your_spotify_client_secret_here
+SPOTIFY_CLIENT_SECRET=your_spotify_client_secret_here
+SENTRY_DSN=https://your_key@o0.ingest.sentry.io/your_project_id

.github/workflows/deploy.yml

@@ -20,12 +20,14 @@ jobs:
                 GOOGLE_TOKEN: ${{ secrets.GOOGLE_TOKEN }}
                 SPOTIFY_CLIENT_ID: ${{ secrets.SPOTIFY_CLIENT_ID }}
                 SPOTIFY_CLIENT_SECRET: ${{ secrets.SPOTIFY_CLIENT_SECRET }}
+                SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
               run: |
                 sed -i "s/__APIFY_TOKEN__/${APIFY_TOKEN}/g" map.js 19hz/map.js
                 sed -i "s/__GOOGLE_TOKEN__/${GOOGLE_TOKEN}/g" map.js 19hz/map.js
                 sed -i "s/__GOOGLE_TOKEN__/${GOOGLE_TOKEN}/g" index.html 19hz/index.html
                 sed -i "s/__SPOTIFY_CLIENT_ID__/${SPOTIFY_CLIENT_ID}/g" 19hz/map.js
                 sed -i "s/__SPOTIFY_CLIENT_SECRET__/${SPOTIFY_CLIENT_SECRET}/g" 19hz/map.js
+                sed -i "s|__SENTRY_DSN__|${SENTRY_DSN}|g" index.html 19hz/index.html
             - uses: JamesIves/github-pages-deploy-action@v4
               with:
                   folder: .

.github/workflows/preview.yml

@@ -19,12 +19,14 @@ jobs:
                 GOOGLE_TOKEN: ${{ secrets.GOOGLE_TOKEN }}
                 SPOTIFY_CLIENT_ID: ${{ secrets.SPOTIFY_CLIENT_ID }}
                 SPOTIFY_CLIENT_SECRET: ${{ secrets.SPOTIFY_CLIENT_SECRET }}
+                SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
               run: |
                 sed -i "s/__APIFY_TOKEN__/${APIFY_TOKEN}/g" map.js 19hz/map.js
                 sed -i "s/__GOOGLE_TOKEN__/${GOOGLE_TOKEN}/g" map.js 19hz/map.js
                 sed -i "s/__GOOGLE_TOKEN__/${GOOGLE_TOKEN}/g" index.html 19hz/index.html
                 sed -i "s/__SPOTIFY_CLIENT_ID__/${SPOTIFY_CLIENT_ID}/g" 19hz/map.js
                 sed -i "s/__SPOTIFY_CLIENT_SECRET__/${SPOTIFY_CLIENT_SECRET}/g" 19hz/map.js
+                sed -i "s|__SENTRY_DSN__|${SENTRY_DSN}|g" index.html 19hz/index.html
             - uses: rossjrw/pr-preview-action@v1
               with:
                   source-dir: .

19hz/index.html

@@ -82,6 +82,24 @@
             </p>
         </details>
     </form>
+    <script src="https://browser.sentry-cdn.com/10.42.0/bundle.tracing.replay.min.js" crossorigin="anonymous"></script>
+    <script>
+        if (typeof Sentry !== 'undefined') Sentry.init({
+            dsn: "__SENTRY_DSN__",
+            environment: "production",
+            integrations: [
+                Sentry.browserTracingIntegration(),
+                Sentry.replayIntegration({
+                    maskAllText: false,
+                    blockAllMedia: false,
+                }),
+            ],
+            tracesSampleRate: 0.2,
+            tracePropagationTargets: ["funcheapsfmap.com"],
+            replaysSessionSampleRate: 0.1,
+            replaysOnErrorSampleRate: 1.0,
+        });
+    </script>
     <script async defer src="https://cdn.jsdelivr.net/npm/add-to-calendar-button@2"></script>
     <script src="map.js"></script>
     <script async

index.html

@@ -114,6 +114,24 @@ <h2 class="event-card-title"></h2>
     </p>
     </details>
   </form>
+  <script src="https://browser.sentry-cdn.com/10.42.0/bundle.tracing.replay.min.js" crossorigin="anonymous"></script>
+  <script>
+    if (typeof Sentry !== 'undefined') Sentry.init({
+      dsn: "__SENTRY_DSN__",
+      environment: "production",
+      integrations: [
+        Sentry.browserTracingIntegration(),
+        Sentry.replayIntegration({
+          maskAllText: false,
+          blockAllMedia: false,
+        }),
+      ],
+      tracesSampleRate: 0.2,
+      tracePropagationTargets: ["funcheapsfmap.com"],
+      replaysSessionSampleRate: 0.1,
+      replaysOnErrorSampleRate: 1.0,
+    });
+  </script>
   <script async defer src="https://cdn.jsdelivr.net/npm/add-to-calendar-button@2"></script>
   <script src="map.js"></script>
   <script async src="https://maps.googleapis.com/maps/api/js?v=3.exp&loading=async&key=__GOOGLE_TOKEN__&libraries=marker&callback=initialize"></script>