console-suppressor v1.1.1
console-suppressor
A console suppressor for your production apps that works across all major JavaScript and TypeScript frameworks. Easily suppress console.log, console.error, and other console statements based on environment or custom conditions.
Table of Contents
Installation
Install console-suppressor in your project via npm or yarn.
Using npm:
npm install console-suppressorUsing yarn:
yarn add console-suppressorUsage
Basic Usage
To suppress console.log, console.error, and other console statements in your app, import console-suppressor and call the suppress method with your desired options.
import consoleSuppressor from 'console-suppressor';
consoleSuppressor.suppress({
env: 'production' // Suppress logs only in production
});
console.log('This will not be shown in production');
console.error('This error will be suppressed in production');Suppress Logs Based on Custom Condition
You can suppress logs based on any condition by passing a condition function.
import consoleSuppressor from 'console-suppressor';
consoleSuppressor.suppress({
condition: () => true // Suppress logs regardless of environment
});
console.log('This log will always be suppressed');Methods
suppress
This method is the main function to suppress console logs. You can pass either an env string to suppress logs based on the environment or a condition function to suppress logs based on a custom condition.
Parameters:
options: An object containing eitherenvorcondition.env: A string representing the environment (e.g., 'production', 'development').condition: A function that returns a boolean. If true, logs will be suppressed.
Example: Suppress Logs in Production
consoleSuppressor.suppress({
env: 'production' // Suppress logs in production only
});
console.log('This will be suppressed in production');
console.error('This will also be suppressed in production');Example: Custom Condition for Suppression
consoleSuppressor.suppress({
condition: () => process.env.SUPPRESS_LOGS === 'true' // Suppress logs if environment variable is set
});
console.log('This log will be suppressed if SUPPRESS_LOGS is true');Framework-Specific Usage
React/Next.js
To suppress logs globally in a React or Next.js app, you should call consoleSuppressor.suppress in the root component (App.js or _app.tsx).
React Example:
import React, { useEffect } from 'react';
import consoleSuppressor from 'console-suppressor';
function App() {
useEffect(() => {
consoleSuppressor.suppress({
env: 'production' // Suppress logs in production
});
}, []);
return <div>My App</div>;
}
export default App;Next.js Example:
'use client';
import { useEffect } from 'react';
import consoleSuppressor from 'console-suppressor';
function ConsoleSuppressorComponent({
children
}: Readonly<{
children: React.ReactNode;
}>) {
useEffect(() => {
consoleSuppressor.suppress({
env: 'production' // Suppress logs in production
});
}, []);
return children;
}
export default ConsoleSuppressorComponent;import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={inter.className}>
<ConsoleSuppressorComponent>{children} </ConsoleSuppressorComponent>
</body>
</html>
);
}Note : Server Components will not be affected , it will work only on client side.
Angular
To apply the suppression globally in an Angular app, import and use consoleSuppressor in your AppComponent or in a service.
Angular Example:
import { Component } from '@angular/core';
import consoleSuppressor from 'console-suppressor';
import { environment } from '../environments/environment';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor() {
consoleSuppressor.suppress({
condition: () => environment.production // Suppress logs in production
});
}
}Vue.js
In Vue.js, you can suppress logs globally by using consoleSuppressor in the main.js file.
Vue.js Example:
import { createApp } from 'vue';
import App from './App.vue';
import consoleSuppressor from 'console-suppressor';
const app = createApp(App);
consoleSuppressor.suppress({
env: 'production' // Suppress logs in production
});
app.mount('#app');Remix
In Remix, suppress logs globally by adding consoleSuppressor in entry.client.tsx or entry.server.tsx.
Remix Example:
import { RemixBrowser } from '@remix-run/react';
import { hydrate } from 'react-dom';
import consoleSuppressor from 'console-suppressor';
consoleSuppressor.suppress({
env: 'production' // Suppress logs in production
});
hydrate(<RemixBrowser />, document);Vanilla JavaScript
You can also use console-suppressor in any vanilla JavaScript application.
Vanilla JavaScript Example:
import consoleSuppressor from 'console-suppressor';
consoleSuppressor.suppress({
env: 'production' // Suppress logs in production
});
console.log('This log will be suppressed in production');TypeScript Support
console-suppressor is written in TypeScript, and it provides full type support for your TypeScript projects.
TypeScript Example:
import consoleSuppressor from 'console-suppressor';
consoleSuppressor.suppress({
condition: () => process.env.NODE_ENV === 'production'
});
console.log('This log will be suppressed in production');Custom Environments
You can also define your own custom environment variables for log suppression by using the condition function. This gives flexibility across all frameworks.
Example:
consoleSuppressor.suppress({
condition: () => process.env.CUSTOM_ENV === 'production'
});Contributing
We welcome contributions! Feel free to open an issue or submit a pull request on our GitHub repository.