npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@waba/js-console-error-interceptor

v1.0.10

Published

The AI-Driven Console Error Interceptor is a powerful JavaScript library designed to enhance developer productivity by providing real-time solutions to JavaScript errors directly in the browser console. When an error occurs in the console, this library au

Downloads

20

Readme

⚠️ JS Console Error Interceptor

📝 Description

The AI-Driven Console Error Interceptor is a powerful JavaScript library designed to enhance developer productivity by providing real-time solutions to JavaScript errors directly in the browser console. When an error occurs in the console, this library automatically intercepts the error message and sends it to OpenAI's API for analysis. The library then retrieves an AI-generated solution and displays it beneath the original error message in the console, offering instant guidance to developers on how to resolve the issue.

This library is still in beta and hasn't been thoroughly tested with all Js frameworks/libraries. If you would like to contribute, writing tests, documentation, handling scenarios, please don't hesitate to raise PRs.

EF587FAD-DDD3-42AE-8F29-B3008B4F533B_1_201_a

Getting Started

😐 Prerequisites

  • node >= 18
  • BYO OpenAI API key

Installing

npm i @waba/js-console-error-interceptor

🎬 Executing

Import and execute the library as shown below in a file that is the starting point of the application.

Examples:
  • index.js/App.js/index.html in React
  • main.ts in Angular
  • main.js/index.html in Vite, etc

Import

import { overrideConsoleError } from "@waba/js-console-error-interceptor";

Usage

overrideConsoleError(apiKey);

main.jsx - Vite

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App.jsx";
import "./index.css";
import { overrideConsoleError } from "@waba/js-console-error-interceptor";

overrideConsoleError(apiKey);

createRoot(document.getElementById("root")).render(
  <StrictMode>
    <App />
  </StrictMode>
);

index.html - Vite

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React</title>
    <script type="module">
      import { overrideConsoleError } from "@waba/js-console-error-interceptor";
      const apiKey = "YOUR_API_KEY"
      overrideConsoleError(apiKey);
    </script>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

😮‍💨 Common issues

  1. This utility only identifies errors on the console logged by "console.error()". If you want to see the error messages in the console (and allow the custom console.error override to work), you'll need to disable the framework's (Vite, React, etc) error overlay during development as shown below
// vite.config.js
export default {
  server: {
    hmr: {
      overlay: false, // Disable Vite's error overlay
    },
  },
};

🤓 Version History

  • 1.0.0
    • Initial Release
  • 1.0.3
    • Added console styling + QoL improvements