Merge pull request #22 from dangeredwolf/sentry

Add Sentry support

.env.example

@@ -5,3 +5,7 @@ MOSAIC_DOMAIN_LIST = "mosaic.fxtwitter.com"
 API_HOST = "api.fxtwitter.com"
 HOST_URL = "https://fxtwitter.com"
 REDIRECT_URL = "https://github.com/dangeredwolf/FixTweet"
+SENTRY_DSN = "https://aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa@aaaaaa.ingest.sentry.io/69"
+SENTRY_AUTH_TOKEN = "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
+SENTRY_ORG = "dangeredwolf"
+SENTRY_PROJECT = "fixtweet"

README.md

@@ -151,7 +151,7 @@ They all run the exact same worker and have no difference to end users... you ca
 
 However, we do consider `fxtwitter.com` to be the primary domain these days, and the public API is only on `api.fxtwitter.com`.
 
-`pxtwitter.com` was our original domain for the project, bought the day before we launched FixTweet (then known as pxTwtiter). I was trying to find something memorable and `px` kinda sounds like "pix" or can mean "pixels" which is fitting as a service that can embed images, videos, etc. Not long after, I bought `twittpr.com` because it's easier to do sed replacement with on Discord (`s/e/p`), and because it had a `p` in it, it was sorta related to pxTwitter. They have always functioned identically.
+`pxtwitter.com` was our original domain for the project, bought the day before we launched FixTweet (then known as pxTwitter). I was trying to find something memorable and `px` kinda sounds like "pix" or can mean "pixels" which is fitting as a service that can embed images, videos, etc. Not long after, I bought `twittpr.com` because it's easier to do sed replacement with on Discord (`s/e/p`), and because it had a `p` in it, it was sorta related to pxTwitter. They have always functioned identically.
 
 A couple weeks later, I acquired the `fxtwitter.com` domain from RobinUniverse and alongside this rebranded the project as FixTweet and shifted `fxtwitter.com` to be the primary domain instead of `pxtwitter.com`. Like the addition of `twittpr.com` this domain works identically to the others. I wouldn't go as far as to say `pxtwitter.com` is deprecated, but it certainly is the less preferred domain of the 3.
 

package.json

@@ -17,6 +17,7 @@
   "devDependencies": {
     "@cloudflare/workers-types": "^3.14.1",
     "@microsoft/eslint-formatter-sarif": "^3.0.0",
+    "@sentry/webpack-plugin": "^1.19.0",
     "@types/service-worker-mock": "^2.0.1",
     "@typescript-eslint/eslint-plugin": "^5.32.0",
     "@typescript-eslint/parser": "^5.32.0",
@@ -35,6 +36,7 @@
     "wrangler": "^2.0.24"
   },
   "dependencies": {
-    "itty-router": "^2.6.1"
+    "itty-router": "^2.6.1",
+    "toucan-js": "^2.6.1"
   }
 }

src/constants.ts

@@ -8,6 +8,7 @@ export const Constants = {
   API_HOST: API_HOST,
   HOST_URL: HOST_URL,
   REDIRECT_URL: REDIRECT_URL,
+  RELEASE_NAME: RELEASE_NAME,
   API_DOCS_URL: `https://github.com/dangeredwolf/FixTweet/wiki/Status-API`,
   TWITTER_ROOT: 'https://twitter.com',
   TWITTER_API_ROOT: 'https://api.twitter.com',

src/env.d.ts

@@ -6,4 +6,5 @@ declare const REDIRECT_URL: string;
 declare const MOSAIC_DOMAIN_LIST: string;
 declare const API_HOST: string;
 
-declare const EXCEPTION_DISCORD_WEBHOOK: string;
+declare const SENTRY_DSN: string;
+declare const RELEASE_NAME: string;

src/server.ts

@@ -1,3 +1,5 @@
+import Toucan from 'toucan-js';
+
 import { Router } from 'itty-router';
 import { Constants } from './constants';
 import { handleStatus } from './status';
@@ -214,34 +216,44 @@ const cacheWrapper = async (event: FetchEvent): Promise<Response> => {
   }
 };
 
+const sentryWrapper = async (event: FetchEvent): Promise<void> => {
+  let sentry: null | Toucan = null;
+
+  if (typeof SENTRY_DSN !== 'undefined') {
+    sentry = new Toucan({
+      dsn: SENTRY_DSN,
+      context: event, // Includes 'waitUntil', which is essential for Sentry logs to be delivered. Also includes 'request' -- no need to set it separately.
+      allowedHeaders: /(.*)/,
+      allowedSearchParams: /(.*)/,
+      release: RELEASE_NAME,
+      rewriteFrames: {
+        root: '/'
+      },
+      event
+    });
+  }
+
+  event.respondWith((async (): Promise<Response> => {
+    try {
+      return await cacheWrapper(event)
+    } catch(err: unknown) {
+      sentry && sentry.captureException(err);
+
+      return new Response(Strings.ERROR_HTML, {
+        headers: {
+          ...Constants.RESPONSE_HEADERS,
+          'content-type': 'text/html',
+          'cache-control': 'max-age=1' 
+        },
+        status: 500
+      });
+    }
+  })())
+}
+
 /*
   Event to receive web requests on Cloudflare Worker
 */
 addEventListener('fetch', (event: FetchEvent) => {
-  try {
-    event.respondWith(cacheWrapper(event));
-  } catch (e: unknown) {
-    const error = e as Error;
-    if (typeof EXCEPTION_DISCORD_WEBHOOK !== 'undefined') {
-      try {
-        fetch(EXCEPTION_DISCORD_WEBHOOK, {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-            'User-Agent': `${Constants.BRANDING_NAME}`
-          },
-          body: JSON.stringify({
-            embeds: [
-              {
-                title: `Exception in ${Constants.BRANDING_NAME}`,
-                description: `${error} - occurred while processing ${event.request.url}`,
-              }
-            ]
-          })
-        });
-      } catch (e) {
-        console.log('Failed to send caught exception to Discord', e);
-      }
-    }
-  }
+  sentryWrapper(event);
 });

src/status.ts

@@ -235,7 +235,7 @@ ${choice.label}  (${choice.percentage}%)
      Telegram does not use this. */
   headers.push(
     `<link rel="alternate" href="${Constants.HOST_URL}/owoembed?text=${encodeURIComponent(
-      authorText.substr(0, 200)
+      authorText.substring(0, 200)
     )}&status=${encodeURIComponent(status)}&author=${encodeURIComponent(
       tweet.author?.screen_name || ''
     )}" type="application/json+oembed" title="${tweet.author.name}">`

src/strings.ts

@@ -34,6 +34,34 @@ export const Strings = {
 ███   by @dangeredwolf, et al.
 -->
 <head>{headers}</head>`,
+  ERROR_HTML: `<!DOCTYPE html>
+  <html lang="en">
+    <head>
+      <meta charset="utf-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      <title>:(</title>
+      <style>
+        body {
+          font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
+          padding: 0 20px;
+        }
+        h1 {
+          font-size: 4em;
+          font-weight: 900;
+          margin-bottom: 0;
+        }
+        p {
+          font-size:10px;
+          opacity:0.3
+        }
+      </style>
+    </head>
+    <body>
+      <h1>Owie :(</h1>
+      <h2>You hit a snag that broke ${BRANDING_NAME}. It's not your fault though&mdash;This is usually caused by a Twitter outage or a new bug.</h2>
+      <p>${RELEASE_NAME}</p>
+    </body>
+  </html>`.replace(/( {2}|\n)/g, ''),
   DEFAULT_AUTHOR_TEXT: 'Twitter',
 
   QUOTE_TEXT: `═ ↘️ Quoting {name} (@{screen_name}) ═════`,

webpack.config.js

@@ -1,12 +1,68 @@
 const path = require('path');
 const webpack = require('webpack');
+const SentryWebpackPlugin = require('@sentry/webpack-plugin');
+
+const gitCommit = require('child_process')
+				.execSync('git rev-parse --short HEAD')
+				.toString()
+				.trim();
+const gitBranch = require('child_process')
+        .execSync('git rev-parse --abbrev-ref HEAD')
+        .toString()
+        .trim();
+
+const releaseName = `fixtweet-${gitBranch}-${gitCommit}-${new Date().toISOString().substring(0,19)}`
 
 require('dotenv').config();
 
+let plugins = [
+  new webpack.DefinePlugin({
+    BRANDING_NAME: `'${process.env.BRANDING_NAME}'`
+  }),
+  new webpack.DefinePlugin({
+    BRANDING_NAME_DISCORD: `'${process.env.BRANDING_NAME_DISCORD}'`
+  }),
+  new webpack.DefinePlugin({
+    DIRECT_MEDIA_DOMAINS: `'${process.env.DIRECT_MEDIA_DOMAINS}'`
+  }),
+  new webpack.DefinePlugin({
+    HOST_URL: `'${process.env.HOST_URL}'`
+  }),
+  new webpack.DefinePlugin({
+    REDIRECT_URL: `'${process.env.REDIRECT_URL}'`
+  }),
+  new webpack.DefinePlugin({
+    MOSAIC_DOMAIN_LIST: `'${process.env.MOSAIC_DOMAIN_LIST}'`
+  }),
+  new webpack.DefinePlugin({
+    API_HOST: `'${process.env.API_HOST}'`
+  }),
+  new webpack.DefinePlugin({
+    SENTRY_DSN: `'${process.env.SENTRY_DSN}'`
+  }),
+  new webpack.DefinePlugin({
+    RELEASE_NAME: `'${releaseName}'`
+  })
+]
+
+if (process.env.SENTRY_AUTH_TOKEN) {
+  plugins.push(
+    new SentryWebpackPlugin({
+      release: releaseName,
+      include: './dist',
+      urlPrefix: '~/',
+      ignore: ['node_modules', 'webpack.config.js'],
+      authToken: process.env.SENTRY_AUTH_TOKEN,
+    })
+  )
+}
+
 module.exports = {
   entry: {
     worker: './src/server.ts'
   },
+  target: 'webworker',
+  devtool: 'source-map',
   output: {
     filename: '[name].js',
     path: path.join(__dirname, 'dist')
@@ -16,29 +72,7 @@ module.exports = {
     extensions: ['.ts', '.tsx', '.js'],
     fallback: { util: false }
   },
-  plugins: [
-    new webpack.DefinePlugin({
-      BRANDING_NAME: `'${process.env.BRANDING_NAME}'`
-    }),
-    new webpack.DefinePlugin({
-      BRANDING_NAME_DISCORD: `'${process.env.BRANDING_NAME_DISCORD}'`
-    }),
-    new webpack.DefinePlugin({
-      DIRECT_MEDIA_DOMAINS: `'${process.env.DIRECT_MEDIA_DOMAINS}'`
-    }),
-    new webpack.DefinePlugin({
-      HOST_URL: `'${process.env.HOST_URL}'`
-    }),
-    new webpack.DefinePlugin({
-      REDIRECT_URL: `'${process.env.REDIRECT_URL}'`
-    }),
-    new webpack.DefinePlugin({
-      MOSAIC_DOMAIN_LIST: `'${process.env.MOSAIC_DOMAIN_LIST}'`
-    }),
-    new webpack.DefinePlugin({
-      API_HOST: `'${process.env.API_HOST}'`
-    })
-  ],
+  plugins: plugins,
   optimization: {
     mangleExports: 'size'
   },