Release 1.2.0

README.md

@@ -6,108 +6,39 @@ Debug FeathersJS API requests, find bottlenecks, read payloads and understand ho
 
 ![sample image](https://raw.githubusercontent.com/radenkovic/feathers-debugger/master/docs/sample.gif)
 
+## Features
 
-## Usage
-
-> This plugin is still in active development.
-
-
-1. Install chrome extension
-
-2. Add hook
-
-Note: this will be npm package. For now you can install it manually.
-
-Extension is pending Google review (on Google Store), until then you can download it from [releases](https://github.com/radenkovic/feathers-debugger/releases).
-
-
-
-Create hook that will write file `feathers-debugger` to public folder.
-
-```js
-// feathers-debugger.js
-const fs = require('fs');
-const path = require('path');
-
-const PUBLIC_PATH = 'public';
+- Waterfall chart
+- Track request duration
+- Find API bottlenecks
+- Visualize Queries
+- Inspect Query params and errors (coming soon!)
 
-// Remove file on every server start
-try {
-  const stats = fs.statSync(path.join(PUBLIC_PATH, '/feathers-debugger'));
-  if (stats['size'] > 2000000) {
-    // Delete file if it's too large
-    fs.unlinkSync(path.join(PUBLIC_PATH, '/feathers-debugger'));
-  }
-} catch (e) {
-  // NO_OP
-}
 
-// Stream to write file
-const writer = fs.createWriteStream(
-  path.join(PUBLIC_PATH, '/feathers-debugger'),
-  { flags: 'a' }
-);
-
-module.exports = () => (ctx) => {
-  if (!ctx._req_ts) {
-    ctx._req_ts = Date.now();
-  } else {
-    ctx._req_duration = Date.now() - ctx._req_ts;
-  }
-  const payload = {
-    id: ctx._req_id,
-    path: ctx.path,
-    type: ctx.type,
-    method: ctx.method,
-    provider: ctx.params ? ctx.params.provider : undefined,
-    ts: ctx._req_ts,
-    duration: ctx._req_duration,
-    end: Date.now(),
-  };
-  if (payload.duration) {
-    writer.write(JSON.stringify(payload) + '\n');
-  }
-};
-
-
-```
-
-3. Include that hook in `app.hooks.js`:
-
-```js
-// app.hooks
-const feathersDebugger = require('./feathers-debugger')
-
-module.exports = {
-  before: {
-    all: [
-      feathersDebugger(),
-    ],
-    // ....
-    finally: {
-      all: [
-        feathersDebugger()
-      ]
-    }
-```
-
-4. (optional) gitignore `public/feathers-debugger`
-
-5. Open devtools and click "Feathers" tab
-
-Happy debugging!
+## Usage
 
+1. Install chrome extension from [Chrome Web Store](https://chrome.google.com/webstore/detail/feathers-debugger/nmpoglofdnlpdkpdnjadngpjcocoffie)
 
+2. Add [Feathers Debugger Service](https://www.npmjs.com/package/feathers-debugger-service) and configure it as explained [here](https://github.com/radenkovic/feathers-debugger-service).
 
+3. Open Chrome devtools, and you will see Feathers tab on the right.
 
+4. Happy Debugging!
 
 
 ## Development
 
+Contributions are welcome!
+
 - git clone https://github.com/radenkovic/feathers-debugger
 - yarn
 - yarn dev
 - open [localhost:3000/devtools.html](http://localhost:3000/devtools.html)
 
-
+## Deployment
+- Bump version in package.json
+- Bump version in manifest.json
+- yarn build
+- Create github release
+- Upload to Chrome Store
 

package.json

@@ -1,25 +1,31 @@
 {
   "name": "feathers-debugger",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "FeathersJS Debugger Chrome Extension",
   "main": "src/index.html",
   "scripts": {
     "dev": "parcel src/devtools.html --out-dir build/output --cache-dir build/cache src/popup.html --port 3000",
     "build": "export NODE_ENV=production && parcel --cache-dir build/cache --no-source-maps build src/devtools.html src/popup.html"
   },
-  "keywords": ["feathers", "feathersjs", "feathers-debugger", "chrome", "extension"],
+  "keywords": [
+    "feathers",
+    "feathersjs",
+    "feathers-debugger",
+    "chrome",
+    "extension"
+  ],
   "author": "Dan Radenkovic",
   "license": "MIT",
   "repository": {
-    "type" : "git",
-    "url" : "https://github.com/radenkovic/feathers-debugger.git"
+    "type": "git",
+    "url": "https://github.com/radenkovic/feathers-debugger.git"
   },
   "bugs": {
-    "url" : "https://github.com/radenkovic/feathers-debugger/issues",
-    "email" : "dan@radenkovic.org"
+    "url": "https://github.com/radenkovic/feathers-debugger/issues",
+    "email": "dan@radenkovic.org"
   },
   "dependencies": {
-    "lodash": "^4.17.20",
+    "ms": "^2.1.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-tooltip": "^4.2.8",

src/components/Waterfall/NoData.jsx

@@ -29,14 +29,22 @@ export default function NoData({ error, port }) {
           </>
         )}
         <h1>{error ? 'Error' : 'No Data'}</h1>
-        {error && (
+        {error === 'Failed to fetch' && (
           <p>
             Feathers debugger <strong>not found</strong> on{' '}
             <a href={`http://localhost:${port}/feathers-debugger`}>
               http://localhost:{port}/feathers-debugger
             </a>
           </p>
         )}
+        {error === 'version-not-supported' && (
+          <p>
+            <strong>Feathers Debugger extension is outdated.</strong>
+            <br />
+            Please update Feathers debugger extension and feathers debugger
+            service.
+          </p>
+        )}
         <p>
           Make sure you installed Feathers Debugger hook in{' '}
           <code>app.hooks</code>.

src/components/Waterfall/Waterfall.jsx

@@ -1,11 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import styled, { css } from 'styled-components';
 import ReactTooltip from 'react-tooltip';
-import sortBy from 'lodash/fp/sortBy';
-import compose from 'lodash/fp/compose';
-import filter from 'lodash/fp/filter';
-import get from 'lodash/get';
-
+import packageJson from '../../../package.json';
 import WaterfallItem from './WaterfallItem';
 import NoData from './NoData';
 
@@ -162,43 +158,36 @@ export default function Waterfall() {
   );
   const [autoZoom, setAutozoom] = useState(true);
   const [tail, setTail] = useState(!!localStorage.getItem('tail') || false);
-  const [startTs, setStartTs] = useState(0);
 
   const toggleTail = val => {
     clearInterval(interval);
     if (val) setAutozoom(true);
     setTail(val);
   };
 
-  const fetchData = () =>
-    fetch(`http://localhost:${port}/feathers-debugger`)
-      .then(res => res.text())
+  const fetchData = () => {
+    const gt = Date.now() - timeframe * 1000 * 60; // timeframe from seconds to ms
+    return fetch(
+      `http://localhost:${port}/feathers-debugger?$sort[ts]=1&$limit=500&ts[$gt]=${gt}&$version=${packageJson.version}`
+    )
+      .then(res => res.json())
       .then(res => {
+        if (res.message) throw new Error(res.message);
         setFetchError(false);
-        const ARR = [];
-        res.split('\n').forEach(item => {
-          if (!item) return;
-          ARR.push(JSON.parse(item));
-        });
-        setItems(ARR);
+        setItems(res.data);
       })
-      .catch(() => {
-        setFetchError(true);
+      .catch(e => {
+        setFetchError(e.message);
       });
+  };
 
   useEffect(() => {
     fetchData();
   }, [timeframe]);
 
-  const data = compose(
-    sortBy('ts'),
-    filter(item => {
-      if (startTs >= item.ts) return false;
-      return item.ts > Date.now() - 1000 * 60 * timeframe;
-    })
-  )(items);
+  const data = items;
 
-  const start = get(data[0], 'ts', 0);
+  const start = data.length ? data[0].ts : 0;
 
   useEffect(() => {
     if (!items.length) return;
@@ -245,10 +234,12 @@ export default function Waterfall() {
   };
 
   // Filters
-
   const clear = () => () => {
-    if (!data.length) return null;
-    return setStartTs(data[data.length - 1].ts); // to last item
+    fetch(`http://localhost:${port}/feathers-debugger`, {
+      method: 'delete',
+    }).then(() => {
+      setItems([]);
+    });
   };
 
   const toggleCondensed = () => {

src/components/Waterfall/WaterfallItem.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import stc from 'string-to-color';
 import styled from 'styled-components';
+import ms from 'ms';
 
 const Root = styled.div`
   padding: 4px 0;
@@ -98,7 +99,7 @@ export default function WaterfallItem({
         <Method method={item.method}>{item.method}</Method>
         {item.path}
         <Duration style={{ color }}>{item.duration}ms</Duration>
-        {previousItem && <small>+{prevOffset}ms</small>}
+        {previousItem && <small>+{ms(prevOffset)}</small>}
       </Item>
     </Root>
   );

static/manifest.json

@@ -2,7 +2,7 @@
    "manifest_version":2,
    "name":"Feathers Debugger",
    "description":"Debug FeathersJS API requests, find bottlenecks, read payloads and understand how your API is queried.",
-   "version":"1.1",
+   "version":"1.2.0",
    "browser_action":{
       "default_icon":"logo.png",
       "default_popup": "popup.html"

yarn.lock

@@ -3996,7 +3996,7 @@ lodash.words@^4.2.0:
   resolved "https://registry.yarnpkg.com/lodash.words/-/lodash.words-4.2.0.tgz#5ecfeaf8ecf8acaa8e0c8386295f1993c9cf4036"
   integrity sha1-Xs/q+Oz4rKqODIOGKV8Zk8nPQDY=
 
-lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.4:
+lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.4:
   version "4.17.20"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
   integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
@@ -4178,7 +4178,7 @@ ms@2.1.1:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.1.tgz#30a5864eb3ebb0a66f2ebe6d727af06a09d86e0a"
   integrity sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==
 
-ms@^2.1.1:
+ms@^2.1.1, ms@^2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==