Is there a way to customize Angular logs by adding a timestamp and classname?
For example:
$log.info('this log entry came from FooBar');
"9:37:18 pm, FooBar: this log entry came from FooBar"
I've come across various examples online that are either unclear or involve additional complexities like requirejs. I did find some working examples using Angular decorators, but I'm curious if there is a simpler solution available.
05-16-2015: the code mentioned above has been transformed into a GitHub repository known as angular-logger. The displayed code is now considered outdated.
If you wish, you can bypass decorators and manipulate Angular's $log using simple JavaScript methods:
app.run(['$log', function($log) {
$log.getInstance = function(context) {
return {
log : enhanceLogging($log.log, context),
info : enhanceLogging($log.info, context),
warn : enhanceLogging($log.warn, context),
debug : enhanceLogging($log.debug, context),
error : enhanceLogging($log.error, context)
};
};
function enhanceLogging(loggingFunc, context) {
return function() {
var modifiedArguments = [].slice.call(arguments);
modifiedArguments[0] = [moment().format("dddd h:mm:ss a") + '::[' + context + ']> '] + modifiedArguments[0];
loggingFunc.apply(null, modifiedArguments);
};
}
}]);
Usage:
var logger = $log.getInstance('Awesome');
logger.info("This is awesome!");
Output:
Monday 9:37:18 pm::[Awesome]> This is awesome!
Moment.js was utilized for timestamp formatting in this example. The Angular application's configuration is set up using the module run block.
To achieve a more refined and customizable approach, here is the same log enhancer implemented as a configurable provider:
angular.module('app').provider('logEnhancer', function() {
this.loggingPattern = '%s - %s: ';
this.$get = function() {
var loggingPattern = this.loggingPattern;
return {
enhanceAngularLog : function($log) {
$log.getInstance = function(context) {
return {
log : enhanceLogging($log.log, context, loggingPattern),
info : enhanceLogging($log.info, context, loggingPattern),
warn : enhanceLogging($log.warn, context, loggingPattern),
debug : enhanceLogging($log.debug, context, loggingPattern),
error : enhanceLogging($log.error, context, loggingPattern)
};
};
function enhanceLogging(loggingFunc, context, loggingPattern) {
return function() {
var modifiedArguments = [].slice.call(arguments);
modifiedArguments[0] = [ sprintf(loggingPattern, moment().format("dddd h:mm:ss a"), context) ] + modifiedArguments[0];
loggingFunc.apply(null, modifiedArguments);
};
}
}
};
};
});
To utilize and customize it:
var app = angular.module('app', []);
app.config(['logEnhancerProvider', function(logEnhancerProvider) {
logEnhancerProvider.loggingPattern = '%s::[%s]> ';
}]);
app.run(['$log', 'logEnhancer', function($log, logEnhancer) {
logEnhancer.enhanceAngularLog($log);
}]);
Implementing a Skype button in my project using AngularJS has been challenging. Here is the code I am currently working with: HTML: <script type="text/javascript" src="http://www.skypeassets.com/i/scom/js/skype-uri.js"></script> <skype-ui ...
Hello friends, I am currently working on adding a print button to my website. I am testing it in Chrome and would like the page to be printed directly without showing any dialog boxes. However, I am facing some difficulties with this process. If anyone has ...
For my website, I have decided to store all of my images on IPFS, which are pinned successfully. This has helped reduce traffic and keep costs within the free tier offered by my hosting provider. However, at times the IPFS url may not load fast enough dep ...
What is the best way to create a custom HTML element that functions as a link without relying on inline Javascript? For instance: <x-button href="...">...</x-button> Can I develop an element like <x-button> that can accept an attribute ...
Utilizing jsPDF and vue js, I successfully implemented a feature to export PDFs. However, I encountered an issue with Arabic characters not displaying properly. Can anyone provide assistance in resolving this problem? ...
Trying to implement a conditional max value on a field using jQuery validation, but encountering issues. Even though I've utilized the depends function, it seems like the validate function is not functioning as expected. The code block appears correc ...
I have a service with the following methods: getLastStatus(id): Observable<string> { let url_detail = this.apiurl + `/${id}`; return this.http.get<any>(url_detail, this.httpOptions).pipe( map(data => { ...
I am currently developing a web scraper that gathers data about various shirts from a specific website. I have successfully set up all the necessary NPM packages in Node.js to scrape the information and save it to a CSV file. However, I have encountered ...
I am currently working on implementing a CRUD functionality in my app for the admin console. My tech stack includes MongoDB, Spring, Bootstrap, and Angular. The interface consists of a list of radio buttons on the left side containing names of collections ...
Is there a way to programmatically navigate using Reach Router in React? I have noticed that when updating the URL, the route does not render. Even though the URL changes, the original component remains displayed according to the React developer tools. Ho ...
I am attempting to showcase a .json file as a treemap by using npm run dev. I thought I had everything set up correctly but it appears that an issue is arising. Below is my App.vue code: <template> <div id="app"> <title> { ...
I've been racking my brain over this issue for quite some time now, and I'm starting to wonder if it's even achievable. Any assistance on this matter would be greatly appreciated! The npm dilemma I have an npm package that serves as a coll ...
My Chrome extension inserts an iframe from foo.com into bar.com, creating a situation where bar.com now includes a foo.com iframe. However, I have observed that this iframe encounters difficulties when attempting to write to localStorage if the user has ...
My local machine is running an SQL Server instance, but I'm encountering an error when trying to connect a database from TypeORM. The error message reads: originalError: ConnectionError: Failed to connect to localhost:1433 - Could not connect (seque ...
I would like to display the total points for each user in this scenario (cc1, cc2 etc). Here is the HTML code: <tr ng-repeat="month in months"> <td>{{$index+1}}</td> <td>{{month[0].cc_name}} ...
I'm working on a project with a table nested inside a div, and it has some unique styling: #data { overflow-x:hidden; overflow-y:visible; height:500px; } Currently, as the table fills up with data, a vertical scroll bar appears. But I wa ...
Hi there, I'm experiencing some issues with my calculator. The buttons seem to be working fine and lining up correctly, but for some reason, nothing is showing up on the monitor or getting calculated when I press the buttons. Here's the code that ...
I am looking to implement a function that checks checkboxes row by row based on specific conditions. The first condition requires an alert popup if three checkboxes are selected in the same row consecutively ("You can't select continuous three hou ...
My goal is to create a feature that allows users to pick a date using DateTimePickerModal. I want to display a clickable message that says "Select date" before any date is chosen, and then replace it with the selected date. While I am not certain if there ...
I've recently started working with node.js and I'm attempting to remove an object from a JSON file when making a DELETE request. Despite my efforts, the object isn't being deleted as expected. Here is the code I have written: const express = ...