added sentry as settings as per same #182 PR

edge-apps/countdown-timer/index.html

@@ -55,8 +55,8 @@
 	<script src="static/js/moment-timezone-with-data.min.js"></script>
 	<script src="static/js/offline-geocode-city-1.0.2.min.js"></script>
 	<script src="static/js/tz.min.js"></script>
+	<script src="https://browser.sentry-cdn.com/8.30.0/bundle.tracing.min.js" integrity="sha384-whi3vRW+DIBqY2lQQ6oghGXbbA0sL5NJxUL6CMC+LRJ0b4A64Qn7/6YhpeR0+3Nq" crossorigin="anonymous"></script>
 	<script src="static/js/main.js"></script>
-	<script src="https://js.sentry-cdn.com/67b32c39620467460c3e5d2b8352074a.min.js" crossorigin="anonymous"></script>
 </body>
 
 </html>

edge-apps/countdown-timer/screenly.yml

@@ -41,3 +41,9 @@ settings:
     title: target_timestamp
     optional: false
     help_text: Countdown timer value (Format YYYY-MM-DDTHH:MM:SS).
+  sentry_dsn:
+    type: secret
+    title: Sentry Client Key
+    optional: true
+    is_global: true
+    help_text: Sentry Client Key from Sentry SDK for error capturing.

edge-apps/countdown-timer/static/js/main.js

@@ -1,11 +1,21 @@
-/* global clm, moment, OfflineGeocodeCity, screenly, tzlookup */
+/* global clm, moment, OfflineGeocodeCity, screenly, tzlookup, Sentry */
 // eslint-disable-next-line no-unused-vars
 
 document.addEventListener('DOMContentLoaded', async () => {
   const { getNearestCity } = OfflineGeocodeCity
   const allTimezones = moment.tz.names()
 
-  async function initApp () {
+  const sentryDsn = screenly.settings.sentry_dsn
+  // Initiate Sentry.
+  if (sentryDsn) {
+    Sentry.init({
+      dsn: sentryDsn
+    })
+  } else {
+    console.warn('Sentry DSN is not defined. Sentry will not be initialized.')
+  }
+
+  async function initApp() {
     let clockTimer
     const { metadata, settings } = screenly
     const latitude = metadata.coordinates[0]
@@ -110,7 +120,7 @@ document.addEventListener('DOMContentLoaded', async () => {
     document.documentElement.style.setProperty('--theme-color-background', backgroundColor)
 
     // Function to determine the image format based on the initial bytes
-    function getImageFormat (buffer) {
+    function getImageFormat(buffer) {
       const arr = new Uint8Array(buffer).subarray(0, 4)
       let header = ''
       for (let i = 0; i < arr.length; i++) {
@@ -131,7 +141,7 @@ document.addEventListener('DOMContentLoaded', async () => {
       }
     }
 
-    function setLogoImage () {
+    function setLogoImage() {
       // Brand logo fetch from the setting as without the URL extension, and here we are fining and inserting right extension as per the received image header.
       const logoElement = document.getElementById('brandLogo')
       const defaultLogo = './static/img/Screenly.svg'