DOCSEARCHbyAlgolia
Submit Docs

JS Logs Formatter Documentation

website·Indexed 30 days ago

https://js-logs-formatter-docs-v3.vercel.app/docs/introduction

A lightweight logging utility designed to format server logs for improved readability in tools like React Native and Node.js. Features the println function for customized log outputs with support for helper text and color formatting.

Tokens
1.3K
Snippets
6
Records
10
Agent score
74%

What's inside JS Logs Formatter

  1. Overview of JS Logs Formatter

    JS Logs Formatter is a lightweight logging utility designed to improve the readability of server logs. It provides structured log outputs, making it particularly useful for debugging in environments such as React Native, Node.js, Next.js server components, and Single Page Applications (SPAs).

  2. Customize log output with helper text and colors using println

    The println function from js-logs-formatter allows you to enhance console logs by adding a descriptive helper string and styling the output with colors. Every call to println automatically includes the function name and line number where the log was triggered.

    Available styling options include standard colors (e.g., green, red) and background colors (e.g., bgRed).

    import { println } from "js-logs-formatter";

// Example 1: Logging user data with a green label
println({
  helper: "User Data",
  data: user,
  color: "green",
});

// Example 2: Logging an error with a red label
try {
  loginUser();
} catch (error) {
  println({
    helper: "loginUser error",
    data: error.response.data.message,
    color: "red",
  });
}

// Example 3: Logging an error with a red background
try {
  loginUser();
} catch (error) {
  println({
    helper: "loginUser error",
    data: error.response.data.message,
    color: "bgRed",
  });
}

  4. Log formatted data using the println function

    The println function from js-logs-formatter allows you to log data to the console in a highly readable, formatted structure compared to standard console output. It accepts a configuration object where you can specify the data to be logged and whether to show the function origin.
    import { println } from "js-logs-formatter";

const user = {
  name: "Jane Doe",
  age: 28,
  active: false,
  email: "janedoe@example.com",
  phone: "+1234567890",
  address: {
    street: "123 Main St",
    city: "Anytown",
    state: "CA",
    zipCode: "12345",
  },
  preferences: {
    newsletter: true,
    notifications: {
      email: true,
      sms: false,
    },
  },
  createdAt: "2022-01-15T14:30:00Z",
  lastLogin: "2023-09-28T10:00:00Z",
  roles: ["user", "admin"],
  points: 1500,
};

println({
  data: user,
  showFunctionOrigin: false,
});

  5. Set up js-logs-formatter for local development

    To contribute to the js-logs-formatter project, follow these steps to set up the development environment locally: clone the repository, navigate into the project directory, and install the necessary dependencies.
    # Clone the repository
git clone https://github.com/Elue-dev/js-logs-formatter.git

# Navigate to the project directory
cd js-logs-formatter

# Install dependencies (using pnpm)
pnpm install

  6. Submit a Pull Request to js-logs-formatter

    After implementing changes and ensuring they adhere to coding standards and are covered by tests, follow these steps to submit a Pull Request (PR):

    1. Push your local branch to your forked repository.
    2. Navigate to the original repository on GitHub, go to the 'Pull Requests' tab, and select 'New Pull Request'.
    3. Select your branch and provide a clear description of the changes.
    4. Request reviews from maintainers for feedback and merging.
    git push origin your-branch-name

  7. Customize log output using the println function

    The println function accepts a configuration object to customize log outputs. Available properties include:

    • data: The content to be logged (any type, e.g., object, array, string). Required.
    • helper: A string describing the context of the log message to help identify the data.
    • color: Specifies the color of the logged data. Defaults to reset.
    • showFunctionOrigin: A boolean that determines if the function name and line number where println was called are displayed. Defaults to true.

  8. Configure log colors in the println function

    Use the color prop in the println function to change the appearance of log outputs. The following color options are supported:

    Foreground Colors:

    • Standard: reset, red, green, yellow, blue, magenta, cyan, white, black
    • Bright: brightRed, brightGreen, brightYellow, brightBlue, brightMagenta, brightCyan, brightWhite

    Background Colors:

    • Standard: bgRed, bgGreen, bgYellow, bgBlue, bgMagenta, bgCyan, bgWhite, bgBlack
    • Bright: bgBrightRed, bgBrightGreen, bgBrightYellow, bgBrightBlue, bgBrightMagenta, bgBrightCyan, bgBrightWhite

  9. Configure println options for log formatting

    The println function accepts a configuration object with the following properties:

    • helper (string): A descriptive label that appears before the data to identify the log's purpose.
    • data (any): The actual content or object to be printed to the console.
    • color (string): The color style for the log. Supported values include green, red, and background variants like bgRed.

  10. Configure println options

    The println function takes an options object to control the output. The data property is required to specify the object or value to log. The showFunctionOrigin property can be set to false to hide the origin of the function call in the console output.
    println({
  data: yourDataVariable,
  showFunctionOrigin: false,
});