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

next-logs

v1.4.2

Published

lightning fast, local server and client side logger for NextJS, NodeJS and JS Applications and Servers

Downloads

40

Readme

next-logs

lightning fast, local server and client side logger for NextJS, NodeJS and JS Applications and Servers.

NPM JavaScript Style Guide

Install

npm install --save next-logs

Or

yarn add next-logs

Logs are written under /tmp/ in the project directory:

Logs Screenshot

Usage - Logging

1. Add API in /pages/api/logger/[log].js

// /pages/api/logger/[log].js
import NextLogs from "next-logs";

export default NextLogs();

2. Client Side

The client side API uses API routes hence it works in both: client and server side.

// /pages/*.js
import log from "next-logs/react";

export default Page() {
  useEffect(() => {
    log.info("Created our super logger!", {
      name: "next-logs"
    });
    log.debug("Created our super logger!", {
      name: "next-logs"
    });
    log.warn("Created our super logger!", {
      name: "next-logs"
    });
    log.error("Created our super logger!", {
      name: "next-logs"
    });
  },[]);

  return (
    <div />
  )
};

3. Server Side

Next logs ships with a server side API that makes logging more efficient.

// /pages/api/auth.js || /middleware.js
import logger from "next-logs/node";

async function handler(req, res) {
  const { method } = req;

  logger.info("Deleting user with attributes:", {
    id: '1'
  });

  logger.debug("Deleting user with attributes:", {
    id: '1'
  });

  logger.warn("Deleting user with attributes:", {
    id: '1'
  });

  logger.error("Deleting user with attributes:", {
    id: '1'
  });

  try {
    switch (method) {
      case 'DELETE':
        // delete user
        break;
      default:
        res.setHeader('Allow', ['DELETE']);
        res.status(405).end(`Method ${method} Not Allowed`);
    }
    // send result
    return res.status(200).json({});
  } catch (error) {
    return res.status(500).json(error);
  }
}

Monitoring & Debugging

You can view logs by type through your domain/api/logger/{type}. Type of logs include info, debug, warn and error. You can also build your own log viewers through the same API that returns log text. A next-logs logs dashboard is currently in development.

Logs directory/location

By default, logs are saved in the /tmp directory. Because Vercel and most systems allow saving files under /tmp directory; hence prevents conflicts that may lead to failures.

This configuration can be edited using the LOGGER_DIR environment variable:

logs will be saved in the ./logs directory
LOGGER_DIR=logs

When self-hosting a NextJS project, it is advised to change the logs location from the default 'tmp' for better control of logs.

NextJS Middleware

While using nextJS middleware in API routes, make sure that your middleware does not block requests at /api/logger/ routes. This may lead to errors and malfunctioning while using next-logs.

logger (server) and log (client) API

| Methods | Explanation | | ------------------ | :---------------------------------------------------------------------------------------------------: | | info | logs the information your program is working as expected. | | debug | used to find the reason in case your program is not working as expected or an exception has occurred. | | warn | situations that are unexpected, but the code can continue the work | | error | Error/failure logs |

License

MIT © BossBele