A runtime "linter" for your js application.
runtime-lint is a simple way to look for bad patterns in your applications at runtime. It is mostly tailored towards browser apps, but should work outside the browser as well. It can detect
- overfetching: See what parts of your json response actually ends up on the web page, and what is never used.
- queries in loops: Detects e.g. fetching for each row in a table.
- This is a best effort attempt, as, for instance, detecting whether two endpoints point to the same kind of resource, but with different ids can be difficult (i.e. /users/1, /users/2 are clearly asking for the same kind of resource, but for other cases it can be almost impossible to find).
- cache opportunities: for instance when lots of the same calls are being made continuously with the exact same response, it might indicate a refetch policy that is too aggressive, or that a cache (or better use of one) could reduce the amount of calls.
- More to come...
It is very simply to add to any project, just add this to the <head> of your html file
<script
crossOrigin="anonymous"
src="//unpkg.com/runtime-lint/dist/index.global.js"
/>You can also install it with your favorite package manager
npm install runtime-lintand then import it somewhere in your project
import "runtime-lint";Configuration is currently not supported, but the below describes the "linting" rules used.
The overFetching rules tries to detect when json responses from a fetch call has been under-utilized. This could suggest over fetching. At the moment, the rule reports underuse if less than half the top-level keys of a response has been used.
This is currently only supported for fetch-implementations. i.e. not XMLHttpRequest, and hence axios.
The queryInLoop rule tries to detect when similar urls are called in a loop, e.g. /user/1, /user/2, /user/3 and so on. This might suggest that a fetch-call is made in a loop, e.g. for each row in a table or similar. This is a best-effort approach, since detecting when two url's are "similar" enough can be difficult.
The duplicateResponses rules tries to detect when the same url has been called two times or more with the exact same response. This might suggest a bad caching solution or a refetch policy that is too aggressive.
- react-scan - The widget and much of the code setup is heavily inspired by react-scan.