snitch_reporting 0.1.0 → 1.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 42659deb579e275f8560748493f95ebb4567d7aec7f4111698babf36dda930b8
-  data.tar.gz: fca0c396a544420d6e868971bbc1525349751db67b9f3cd699a77a5cb190b6b2
+  metadata.gz: 39e98ad05cdaa6ead3d81003f273cfdea222889ee63be8ef6503c31b29cfe055
+  data.tar.gz: 331b7c7e03b98ee862a21e41f33c05c97b25a12a45676ebb3a560f30c968b136
 SHA512:
-  metadata.gz: f6712d89f7b64fe724cf7dfc176e739160599bf381c7fd2e7abd44b650638283f8a0d779a60b12ec4d12d80fef038ada009095da8cc45935637ceb1efa5dcfd4
-  data.tar.gz: 54fe9f2331d2b424d0fd7f789648a423ed06c391731c972200ac5b15d4cd4635ffad067d48409d6501d25decb1b1f4dc2eb0be61c0669d33b375b28fb10bb01a
+  metadata.gz: 1cf2bb2295389d228b4718e9cb19bfa0699373ac65d3072f2bfe511557005e8128936269a6de657f959a3edd2001645574688e319a515c8eb1fb289c397f5cdd
+  data.tar.gz: 8d68383d8af3a2b93ed050b7fe77bcb5b3a32fcd7a33573b4cfaeddc13ee495b7bdebb8eb8609cb77fe0b04bd6a05a249cfefb0a3f8313c11b2fcd51376530ef

data/README.md

@@ -1,8 +1,9 @@
 # SnitchReporting
-Short description and motivation.
+Snitch Reporting adds middleware to your Rails app to automatically track errors.
+This is a self-hosted gem that plugs directly into your app.
 
 ## Usage
-How to use my plugin.
+Install the gem, run the migrations, add to your middleware, then mount the route to view. Let the gem find and track your bugs for you!
 
 ## Installation
 Add this line to your application's Gemfile:
@@ -21,8 +22,27 @@ Or install it yourself as:
 $ gem install snitch_reporting
 ```
 
+Add the migrations to your app with
+```bash
+rails g snitch_reporting:install
+rails db:migrate
+```
+
+Add the middleware to your app by including the following in your application.rb
+```ruby
+Rails.application.config.middleware.use SnitchReporting::Rack, ->(occurrence) {
+  # Use the `occurrence` and `occurrence.report` to retrieve the info and notify to your reception box of choice, whether it be Email, SMS, Slack, or some other API.
+}
+```
+
 ## Contributing
-Contribution directions go here.
+Lots of things to do, and would love some PRs! Feel free to pull the code down and submit a PR with some changes.
+A few things I'd like to do:
+
+[] Track/display how many unique users are affected by the error
+[] Visually graph history of the error
+[] Add commenting capabilities
+[] Track history of changes, whether they be marking as resolved, commenting, etc.
 
 ## License
 The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/app/assets/javascripts/snitch_reporting/snitch_report.js

@@ -0,0 +1,60 @@
+document.addEventListener("change", function(evt) {
+  if (evt.target && evt.target.hasAttribute("data-mark-resolution-url")) {
+    var report_url = evt.target.getAttribute("data-mark-resolution-url")
+    var data = JSON.stringify({
+      snitch_report: {
+        resolved: evt.target.checked
+      }
+    })
+
+    fetch(report_url, {
+      headers: {
+        "Accept": "application/json",
+        "Content-Type": "application/json",
+        "X-CSRF-Token": document.querySelector("meta[name='csrf-token']").content
+      },
+      method: "PATCH",
+      body: data
+    })
+  }
+})
+
+// Must include Jquery
+// Or rewrite to use pure JS
+// $(document).ready(function() {
+//
+//   function revealStacktrace() {
+//     $(".occurrence-details").addClass("hidden")
+//     $(window.location.hash).removeClass("hidden")
+//     $(".reveal-occurrence").removeClass("selected")
+//
+//     if (window.location.hash == "") {
+//       $(".occurrence-details").first().removeClass("hidden")
+//     } else {
+//       $(".reveal-occurrence[href='" + window.location.hash + "']").addClass("selected")
+//     }
+//   }
+//   revealStacktrace()
+//
+//   $(".reveal-occurrence").click(function() {
+//     // We want the hash/anchor to be updated before running the function
+//     setTimeout(revealStacktrace, 100)
+//   })
+//
+//   $(".open-compressed").click(function(evt) {
+//     evt.preventDefault()
+//     $("[data-wrapname=" + $(this).attr("data-target") + "]").toggleClass("open")
+//   })
+//
+//   $(".update-dropdown").change(function(evt) {
+//     var report_data = { bug_report: {} }
+//     report_data.bug_report[$(this).attr("data-name")] = $(this).val()
+//
+//     $.ajax({
+//       method: "PATCH",
+//       url: $(this).attr("data-url"),
+//       data: report_data,
+//       dataType: "json"
+//     })
+//   })
+// })

data/app/assets/stylesheets/snitch_reporting/_variables.scss

@@ -0,0 +1,5 @@
+$snitch-blue: #3D94F6;
+$border-grey: #DEDEDE;
+$background-grey: #F5F5F9;
+$text-color: #22222F;
+$danger: #E91212;

data/app/assets/stylesheets/snitch_reporting/components.scss

@@ -0,0 +1,120 @@
+todo {
+  animation: 1.5s todo-pulse infinite;
+}
+@keyframes todo-pulse {
+  0% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(1.01);
+    background: orange;
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
+.snitch-center {
+  text-align: center;
+}
+
+.scrollable {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+}
+
+.flex-row {
+  display: flex;
+  display: 100%;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.snitch-banner {
+  box-shadow: 2px 2px 4px $border-grey;
+  border-radius: 8px;
+  background: green;
+  padding: 15px;
+  color: white;
+  text-align: center;
+}
+
+.line-trace {
+  margin: 20px 0;
+  background: #E0DFDF;
+  padding: 10px;
+  overflow: scroll;
+
+  &.cap-height {
+    max-height: 300px;
+  }
+
+  .trace-details {
+    margin: 10px;
+
+    .trace-full {
+      color: grey;
+      font-size: 12px;
+    }
+  }
+
+  .current-line {
+    background: lighten($snitch-blue, 25%);
+  }
+}
+
+code {
+  overflow: scroll;
+  white-space: pre;
+}
+
+.snitch-resolution-switch {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  display: inline-block;
+  position: relative;
+  transition: background-color ease 0.3s;
+  cursor: pointer;
+  outline: none;
+  border: none;
+  background-color: #707070;
+  width: 120px;
+  height: 32px;
+  overflow: hidden;
+
+  &:before {
+    display: block;
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    z-index: 2;
+    transition: 0.4s;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
+    background: #fff;
+    width: 28px;
+    height: 28px;
+    color: #fff;
+    font: 10px/28px Helvetica;
+    font-weight: bold;
+    text-indent: -70px;
+    text-shadow: -1px -1px rgba(0,0,0,0.15);
+    text-transform: uppercase;
+    white-space: nowrap;
+    word-spacing: 52px;
+    content: "Resolved Unresolved";
+  }
+
+  &:checked {
+    background-color: #4CD964;
+  }
+
+  &:checked:before {
+    left: 90px;
+  }
+}

data/app/assets/stylesheets/snitch_reporting/containers.scss

@@ -0,0 +1,6 @@
+.snitch-section {
+  margin: 10px 0;
+  background: darken($background-grey, 1%);
+  padding: 10px;
+  overflow: hidden;
+}

data/app/assets/stylesheets/snitch_reporting/default.scss

@@ -0,0 +1,18 @@
+* { box-sizing: border-box; }
+
+.snitch-reporting {
+  position: relative;
+  margin: 0;
+  padding: 50px;
+  padding-top: 100px;
+  width: 100%;
+  height: 100%;
+  color: $text-color;
+  font-family: Helvetica;
+
+  h1, h2, h3, h4, h5 { color: darken($snitch-blue, 10%); }
+
+  .snitch-skinny-container {
+    margin: 0 40px;
+  }
+}

data/app/assets/stylesheets/snitch_reporting/forms.scss

@@ -0,0 +1,36 @@
+.snitch-reporting {
+  .snitch-btn {
+    display: inline-block;
+    position: relative;
+    box-sizing: border-box;
+    margin: 2px;
+    border: 1px solid $border-grey;
+    border-radius: 6px;
+    background: linear-gradient(white, $background-grey);
+    padding: 8px;
+    color: $text-color;
+    text-decoration: none;
+
+    &:hover {
+      background: linear-gradient($background-grey, $background-grey, white);
+    }
+
+    &.danger {
+      background: linear-gradient($danger, darken($danger, 15%));
+      color: white;
+
+      &:hover {
+        background: linear-gradient(darken($danger, 15%), $danger, $danger);
+      }
+    }
+
+    &.primary {
+      background: linear-gradient($snitch-blue, darken($snitch-blue, 15%));
+      color: white;
+
+      &:hover {
+        background: linear-gradient(darken($snitch-blue, 15%), $snitch-blue, $snitch-blue);
+      }
+    }
+  }
+}

data/app/assets/stylesheets/snitch_reporting/navigation.scss

@@ -0,0 +1,37 @@
+.snitch-reporting {
+  .snitch-nav {
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 0;
+    z-index: 1000;
+    background: $snitch-blue;
+    height: 50px;
+
+    .nav-tab,
+    a {
+      display: inline-block;
+      vertical-align: top;
+      margin: 0;
+      padding: 0 20px;
+      height: 100%;
+      color: white;
+      font-size: 18px;
+      font-weight: normal;
+      line-height: 50px;
+      text-decoration: none;
+      white-space: nowrap;
+
+      input {
+        border-radius: 0;
+        font-size: 18px;
+      }
+    }
+
+    a:hover {
+      background: lighten($snitch-blue, 10%);
+    }
+  }
+
+  .snitch-breadcrumbs {}
+}

data/app/assets/stylesheets/snitch_reporting/snitch_report.scss

@@ -0,0 +1 @@
+@import "*";

data/app/assets/stylesheets/snitch_reporting/tables.scss

@@ -0,0 +1,127 @@
+.snitch-reporting {
+  .snitch-table {
+    display: table;
+    border-spacing: 0 0;
+    background: white;
+    width: 100%;
+    max-width: 100%;
+    overflow: hidden;
+
+    &.fixed {
+      table-layout: fixed;
+    }
+
+    .snitch-thead {
+      display: table-header-group;
+    }
+
+    .snitch-tbody {
+      display: table-row-group;
+    }
+
+    .snitch-tr {
+      display: table-row;
+    }
+
+    .snitch-td,
+    .snitch-th {
+      display: table-cell;
+      border: 1px solid $border-grey;
+
+      max-width: 100%;
+      overflow: hidden;
+      text-align: left;
+
+      &.text-center {
+        text-align: center;
+      }
+    }
+
+    .link-cell {
+      color: $text-color;
+      text-decoration: none;
+
+      &:hover {
+        background: darken($background-grey, 5%);
+      }
+    }
+
+    &.bordered {
+      .snitch-tbody .snitch-tr:nth-child(odd) {
+        background: $background-grey;
+      }
+    }
+
+    &.padded {
+      .link-cell,
+      .snitch-td,
+      .snitch-th {
+        padding: 20px;
+      }
+    }
+  }
+
+  .snitch-errors {
+    .report-title-wrapper {
+      margin-bottom: 5px;
+
+      .report-title {
+        color: $snitch-blue;
+      }
+    }
+
+    .report-location {
+      display: inline-block;
+      color: orange;
+    }
+
+    .report-message {
+      padding-top: 5px;
+      color: grey;
+    }
+  }
+
+  .snitch-section {
+    &#summary {
+      .snitch-table {
+        .snitch-td:first-of-type {
+          background: $background-grey;
+          width: 100px;
+          color: #AAA;
+          font-size: 12px;
+          text-align: right;
+        }
+      }
+    }
+  }
+
+  .filters {
+    text-align: center;
+
+    .filter-table {
+      display: inline-block;
+      vertical-align: top;
+      width: 300px;
+
+      .link-cell,
+      .snitch-td,
+      .snitch-th {
+        padding: 10px;
+        width: 300px;
+      }
+
+      .snitch-th {
+        text-align: center;
+      }
+
+      .snitch-td {
+        font-size: 14px;
+
+        &.selected {
+          background: darken($background-grey, 10%);
+        }
+      }
+    }
+  }
+
+}