chore: improve sentry reporting

* Updates to latest version of Sentry 9.1.0
* Moves Sentry integration into sentry.js
* Ensures that we can capture failed resource loads
* Adds crossorigin for keymanweb.js so we can see failures

Relates-to: #534

_includes/2020/templates/Head.php

@@ -44,21 +44,31 @@ static function render($fields = []) {
   }
 ?>
   <title><?= $fields->title; ?></title>
-  <?php
-/* Our local CDN version is identical to this file:
   <script
-    src="https://browser.sentry-cdn.com/5.28.0/bundle.min.js"
-    integrity="sha384-1HcgUzJmxPL9dRnZD2wMIj5+xsJfHS+WR+pT2yJNEldbOr9ESTzgHMQOcsb2yyDl"
+    src="https://js.sentry-cdn.com/bba22972ad6b4c2ab03a056f549cc23d.min.js"
+    crossorigin="anonymous"
+  ></script>
+  <script
+    src="https://browser.sentry-cdn.com/9.1.0/bundle.tracing.min.js"
+    integrity="sha384-MCeGoX8VPkitB3OcF9YprViry6xHPhBleDzXdwCqUvHJdrf7g0DjOGvrhIzpsyKp"
+    crossorigin="anonymous"
+  ></script>
+  <script
+    src="https://browser.sentry-cdn.com/9.1.0/captureconsole.min.js"
+    integrity="sha384-gkHY/HxnL+vrTN/Dn6S9siimRwqogMXpX4AetFSsf6X2LMQFsuXQGvIw7h2qWCt+"
+    crossorigin="anonymous"
+  ></script>
+  <script
+    src="https://browser.sentry-cdn.com/9.1.0/httpclient.min.js"
+    integrity="sha384-ZsomH91NyAZy+YSYhJcpL3sSDFlkL310CJnpKNqL9KerB92RvfsH9tXRa2youKLM"
     crossorigin="anonymous"
-  ></script>*/
-  ?>
-  <script src="<?= Util::cdn('js/sentry.bundle.5.28.0.min.js'); ?>"></script>
+  ></script>
   <script>
-    Sentry.init({
-      dsn: "https://[email protected]/5983516",
-      environment: location.host.match(/\.localhost$/) ? 'development' : location.host.match(/(^|\.)keyman-staging\.com$/) ? 'staging' : 'production',
-    });
+    const sentryEnvironment = {
+      tier: '<?=KeymanHosts::Instance()->TierName()?>',
+    }
   </script>
+  <script src="<?= Util::cdn('js/sentry.js'); ?>"></script>
   <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" name="viewport">
   <link rel='shortcut icon' href="<?= $fields->favicon; ?>">
   <?php foreach($fields->css as $cssFile) { ?>

_includes/includes/ui/keyboard-details.php

@@ -469,7 +469,7 @@ protected static function WriteKeymanWebBox() {
           <div id='osk-host'></div>
           <div id='try-keymanweb-link'><?= $webtext ?></div>
         </div>
-        <script src='<?=$cdnUrlBase?>/keymanweb.js'></script>
+        <script crossorigin="anonymous" src='<?=$cdnUrlBase?>/keymanweb.js'></script>
         <script>
           (function() {
             keyman.init({attachType:'manual'}).then(

build.sh

@@ -2,7 +2,7 @@
 ## START STANDARD SITE BUILD SCRIPT INCLUDE
 readonly THIS_SCRIPT="$(readlink -f "${BASH_SOURCE[0]}")"
 readonly BOOTSTRAP="$(dirname "$THIS_SCRIPT")/resources/bootstrap.inc.sh"
-readonly BOOTSTRAP_VERSION=v0.17
+readonly BOOTSTRAP_VERSION=feat/tier-name  # TODO: v0.18
 [ -f "$BOOTSTRAP" ] && source "$BOOTSTRAP" || source <(curl -fs https://raw.githubusercontent.com/keymanapp/shared-sites/$BOOTSTRAP_VERSION/bootstrap.inc.sh)
 ## END STANDARD SITE BUILD SCRIPT INCLUDE
 

cdn/dev/js/sentry.js

@@ -0,0 +1,53 @@
+(function initializeSentry() {
+  if(!window.Sentry) {
+    // Sentry scripts may have been blocked by client browser;
+    // we won't be reporting errors to Sentry, but we don't
+    // want to throw other errors
+    return;
+  }
+
+  //
+  // Initialize Sentry for this site
+  //
+
+  Sentry.init({
+    dsn: "https://[email protected]/5983516",
+    integrations: [
+      Sentry.httpClientIntegration(),
+      Sentry.captureConsoleIntegration({
+        levels: ['error', 'warning']
+      })
+    ],
+    environment: sentryEnvironment.tier,
+  });
+
+  //
+  // Capture resource load errors
+  // per https://docs.sentry.io/platforms/javascript/troubleshooting/#capturing-resource-404s
+  //
+
+  window.addEventListener(
+    "error",
+    (event) => {
+      if (!event.target) return;
+
+      console.log('img fail');
+
+      if (event.target.tagName === "IMG") {
+        Sentry.captureException(
+          new Error(`Failed to load image: ${event.target.src}`),
+        );
+      } else if (event.target.tagName === "LINK" && event.target.rel === "stylesheet") {
+        Sentry.captureException(
+          new Error(`Failed to load external stylesheet: ${event.target.href}`),
+        );
+      } else if (event.target.tagName === "SCRIPT") {
+        Sentry.captureException(
+          new Error(`Failed to load external script: ${event.target.src}`),
+        );
+      }
+    },
+    true, // useCapture - necessary for resource loading errors
+  );
+  console.log(`Sentry initialization complete: tier=${sentryEnvironment.tier}`);
+})();