setup sentry, monitoring errors

buzzycloud · Nov 25, 2019 · f870a02 · f870a02
1 parent 37c93b6
commit f870a02
Show file tree

Hide file tree

Showing 8 changed files with 98 additions and 11 deletions.
diff --git a/buzzy.config.demo.js b/buzzy.config.demo.js
@@ -1,8 +1,9 @@
 module.exports = {
     env: {
-        HTML_TITLE: "Yumin's Notes",
+        HTML_TITLE: "Awesome JavaScript",
         API_PROD: "http://localhost:8080", // deploy next app and wp in the same vm instance
         API_DEV: "http://localhost:8080",
         GA_TRACKING_ID: "",
+        SENTRY_DSN: "",
     },
 };
diff --git a/next.config.js b/next.config.js
@@ -3,9 +3,12 @@ const withSass = require("@zeit/next-sass");
 const withCss = require("@zeit/next-css");
 const buzzy = require("./buzzy.config");
 
+const withSourceMaps = require("@zeit/next-source-maps")();
+
 const axios = require("axios");
 
 const enhance = compose(
+    withSourceMaps,
     withCss,
     withSass
 );

diff --git a/package.json b/package.json
@@ -14,7 +14,9 @@
     "private": false,
     "dependencies": {
         "@fortawesome/fontawesome-free": "^5.10.2",
+        "@sentry/browser": "^5.9.1",
         "@zeit/next-sass": "^1.0.1",
+        "@zeit/next-source-maps": "0.0.4-canary.1",
         "axios": "^0.19.0",
         "bulma": "^0.7.5",
         "express": "^4.17.1",

diff --git a/pages/_app.js b/pages/_app.js
@@ -1,9 +1,13 @@
 import React from "react";
 import App from "next/app";
+import * as Sentry from "@sentry/browser";
 import Router from "next/router";
+import styles from "src/assets/styles/global.scss";
 import { initGA, logPageView } from "src/utils/google";
 import Head from "next/head";
 
+Sentry.init({ dsn: process.env.SENTRY_DSN });
+
 import Layout from "src/components/common/Layout";
 
 import { PostContextProvider } from "src/contexts/PostContext";
@@ -19,12 +23,27 @@ export default class BuzzyBlogApp extends App {
         Router.router.events.on("routeChangeComplete", logPageView);
     }
 
+    componentDidCatch(error, errorInfo) {
+        Sentry.withScope((scope) => {
+            Object.keys(errorInfo).forEach((key) => {
+                scope.setExtra(key, errorInfo[key]);
+            });
+
+            Sentry.captureException(error);
+        });
+
+        super.componentDidCatch(error, errorInfo);
+    }
+
     render() {
         const { Component, pageProps } = this.props;
         return (
             <PostContextProvider>
                 <Head>
                     <title>{process.env.HTML_TITLE}</title>
+                    <style jsx global>
+                        {styles}
+                    </style>
                 </Head>
                 <Layout>
                     <Component {...pageProps} />

diff --git a/pages/_document.js b/pages/_document.js
@@ -1,5 +1,13 @@
 import Document, { Html, Head, Main, NextScript } from "next/document";
-import styles from "src/assets/styles/global.scss";
+import * as Sentry from "@sentry/browser";
+
+process.on("unhandledRejection", (err) => {
+    Sentry.captureException(err);
+});
+
+process.on("uncaughtException", (err) => {
+    Sentry.captureException(err);
+});
 
 class MyDocument extends Document {
     // static async getInitialProps(ctx) {
@@ -12,9 +20,6 @@ class MyDocument extends Document {
             <Html>
                 <Head>
                     <link type="shortcut icon" type="image/x-icon" href="/favicon.ico" />
-                    <style jsx global>
-                        {styles}
-                    </style>
                 </Head>
                 <body>
                     <Main />

diff --git a/src/assets/styles/global.scss b/src/assets/styles/global.scss
@@ -8,6 +8,10 @@ body,
     cursor: pointer;
 }
 
+.is-clickable:hover {
+    text-decoration: underline;
+}
+
 @media screen and (min-width: 769px) {
     .is-x-paddingless-desktop {
         padding-left: 0 !important;

diff --git a/src/components/posts/BaseContainer.jsx b/src/components/posts/BaseContainer.jsx
@@ -26,11 +26,7 @@ const BaseContainer = (props) => {
             {sortedPosts.map((post) => {
                 return (
                     <div className="tile is-child" key={post.id}>
-                        <div
-                            style={{ marginBottom: "0.5rem" }}
-                            className="title is-clickable is-flex"
-                            onClick={() => handlePostOnClick(post)}
-                        >
+                        <div className="title is-clickable is-flex" onClick={() => handlePostOnClick(post)}>
                             <h4 className="title is-4">{post.title.rendered}</h4>
                         </div>
                         <div className="tags has-addons is-marginless">

diff --git a/yarn.lock b/yarn.lock
@@ -1007,6 +1007,58 @@
   resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-5.10.2.tgz#27e02da1e34b50c9869179d364fb46627b521130"
   integrity sha512-9pw+Nsnunl9unstGEHQ+u41wBEQue6XPBsILXtJF/4fNN1L3avJcMF/gGF86rIjeTAgfLjTY9ndm68/X4f4idQ==
 
+"@sentry/browser@^5.9.1":
+  version "5.9.1"
+  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-5.9.1.tgz#b2ec27ead501a49f26807a9c0774f44f4292f236"
+  integrity sha512-7AOabwp9yAH9h6Xe6TfDwlLxHbUSWs+SPWHI7bPlht2yDSAqkXYGSzRr5X0XQJX9oBQdx2cEPMqHyJrbNaP/og==
+  dependencies:
+    "@sentry/core" "5.8.0"
+    "@sentry/types" "5.7.1"
+    "@sentry/utils" "5.8.0"
+    tslib "^1.9.3"
+
+"@sentry/core@5.8.0":
+  version "5.8.0"
+  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-5.8.0.tgz#bbfd2f4711491951a8e3a0e8fa8b172fdf7bff6f"
+  integrity sha512-aAh2KLidIXJVGrxmHSVq2eVKbu7tZiYn5ylW6yzJXFetS5z4MA+JYaSBaG2inVYDEEqqMIkb17TyWxxziUDieg==
+  dependencies:
+    "@sentry/hub" "5.8.0"
+    "@sentry/minimal" "5.8.0"
+    "@sentry/types" "5.7.1"
+    "@sentry/utils" "5.8.0"
+    tslib "^1.9.3"
+
+"@sentry/hub@5.8.0":
+  version "5.8.0"
+  resolved "https://registry.yarnpkg.com/@sentry/hub/-/hub-5.8.0.tgz#56aaeb7324cb66d90db838011cb0127f5558007f"
+  integrity sha512-VdApn1ZCNwH1wwQwoO6pu53PM/qgHG+DQege0hbByluImpLBhAj9w50nXnF/8KzV4UoMIVbzCb6jXzMRmqqp9A==
+  dependencies:
+    "@sentry/types" "5.7.1"
+    "@sentry/utils" "5.8.0"
+    tslib "^1.9.3"
+
+"@sentry/minimal@5.8.0":
+  version "5.8.0"
+  resolved "https://registry.yarnpkg.com/@sentry/minimal/-/minimal-5.8.0.tgz#b7ad5113504ab67f1ef2b0f465b7ba608e6b8dc5"
+  integrity sha512-MIlFOgd+JvAUrBBmq7vr9ovRH1HvckhnwzHdoUPpKRBN+rQgTyZy1o6+kA2fASCbrRqFCP+Zk7EHMACKg8DpIw==
+  dependencies:
+    "@sentry/hub" "5.8.0"
+    "@sentry/types" "5.7.1"
+    tslib "^1.9.3"
+
+"@sentry/types@5.7.1":
+  version "5.7.1"
+  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-5.7.1.tgz#4c4c1d4d891b6b8c2c3c7b367d306a8b1350f090"
+  integrity sha512-tbUnTYlSliXvnou5D4C8Zr+7/wJrHLbpYX1YkLXuIJRU0NSi81bHMroAuHWILcQKWhVjaV/HZzr7Y/hhWtbXVQ==
+
+"@sentry/utils@5.8.0":
+  version "5.8.0"
+  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-5.8.0.tgz#34683088159b9935f973b6e6cad1a1cc26bbddac"
+  integrity sha512-KDxUvBSYi0/dHMdunbxAxD3389pcQioLtcO6CI6zt/nJXeVFolix66cRraeQvqupdLhvOk/el649W4fCPayTHw==
+  dependencies:
+    "@sentry/types" "5.7.1"
+    tslib "^1.9.3"
+
 "@types/anymatch@*":
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/@types/anymatch/-/anymatch-1.3.1.tgz#336badc1beecb9dacc38bea2cf32adf627a8421a"
@@ -1255,6 +1307,11 @@
     "@zeit/next-css" "1.0.1"
     sass-loader "6.0.6"
 
+"@zeit/next-source-maps@0.0.4-canary.1":
+  version "0.0.4-canary.1"
+  resolved "https://registry.yarnpkg.com/@zeit/next-source-maps/-/next-source-maps-0.0.4-canary.1.tgz#5051ff8425e5f615da2d21dd08a99284fbb63d7d"
+  integrity sha512-SPQCLs7ToaqzQnqXqGSCoL7KTlnOAao+1F5hy7Hkuq85TjHsUC3eeLsmVrBIraIhXG/ARHmZ0JHOesPDtBfpzw==
+
 abbrev@1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
@@ -7830,7 +7887,7 @@ ts-pnp@^1.1.2:
   resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.1.4.tgz#ae27126960ebaefb874c6d7fa4729729ab200d90"
   integrity sha512-1J/vefLC+BWSo+qe8OnJQfWTYRS6ingxjwqmHMqaMxXMj7kFtKLgAaYW3JeX3mktjgUL+etlU8/B4VUAUI9QGw==
 
-tslib@^1.9.0:
+tslib@^1.9.0, tslib@^1.9.3:
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a"
   integrity sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==