Skip to main content
Version: 2.2.0

Logger

Web logging has the complication of segregating logs that are run on the web server vs. on the browser. To standardize logging, we've created a simple custom library which wraps the Pino logger with specific configurations. One important function of our logger is to detect when the application is in production mode and prevent logging in the browser.

What is Pino, and why have we chosen it?

Pino is a Node.js logger that uses minimum resources for logging.

Using minimum resources for logging is very important. Log messages tend to get added over time and this can lead to a throttling effect on applications – such as reduced requests per second. Pino claims to be over 5x faster than alternatives.

See the Benchmarks for comparisons.

There are many logging libraries out there such as Winston and Bunyan. However, we chose Pino over them as it is very low overhead, and is has the ability to log on the browser, which is something Winston is not designed to do. It is highly preferrable for any web Typescript code to be isomorphic as we use Svelte Kit (the same code is expected to run on both the browser and the server/Node.js)


Installation

Web Base

By default, the Web Base already has the logger installed and should not require additional configuration for development.

Logger location
.
├── aoh
│ └── core
│ .
│ ├── logger
. . └── Logger.ts

This Logger.ts file simply imports the logger from @mssfoobar/logger/Logger and re-exports it as a Svelte store.

warning

Do not modify the code in these files unless you are absolutely sure of what you're doing.

Other NodeJS Contexts

If you want to use the logger in a separate project (not the Web Base), you can install it via:

npm install @mssfoobar/logger

You can now use the logger simply by importing it and using it in your typescript or Svelte files:

Example:

example.svelte
<script lang="ts">
import { logger as aohLogger, type AohLogger } from "@mssfoobar/logger/Logger";
logger.info("I'm a fancy logger!");
</script>

We also recommend attaching additional attributes to the logger to provide more context as to where the log is coming from:

example_with_more_context.svelte
<script lang="ts">
import { logger as aohLogger, type AohLogger } from "@mssfoobar/logger/Logger";

// Create a 'child' logger that also appends the pathname under "src" and assign it to `log`
const log = logger.child({ src: new URL(import.meta.url).pathname });
log.debug("This output of this logger will now also include the pathname of this file!");
</script>

Usage

The logger is really just wraps the Pino logger, whose API you can view here.

Using the logger in the web base

When using the logger (in the web-base), import the logger from the store and log away:

use_the_store.svelte
<script lang="ts">
import { logger } from "$lib/aoh/core/logger/Logger";

const log = logger.child({ src: new URL(import.meta.url).pathname });

log.debug("This output of this logger will not also include the pathname of this file!");
</script>

Note that due to a bug with Pino, when logging objects with the variadic arguments, you need to place your objects as the first argument, and put the string message later:

add_extra_objects.svelte
<script lang="ts">
import { logger } from "$lib/aoh/core/logger/Logger";

const log = logger.child({ src: new URL(import.meta.url).pathname });

let example_object = {
hello: "World",
};

let other_object = {
cards_in_a_deck: 52,
};

log.debug({ example_object, other_object }, "I just logged a bunch of objects...");
</script>

Logger configuration via NODE_ENV

The extra configuration apply over the Pino API is that the log levels are fixed, and set via the NODE_ENV. The logger is set to only run in the following 3 different log levels:

  • trace
  • info
  • silent

These should not be configured manually, the appropriate log level will be chosen based on whether the logger is running in the browser, or NodeJS, and based on the NODE_ENV

  • When your NODE_ENV is either "development" or "preview", the log level will be set to trace.
  • When your NODE_ENV is "staging", the log level will be set to info.
  • When your NODE_ENV is "production", the log level will be set to info on NodeJS and silent in the browser.
  • When your NODE_ENV is "silent", the log level will be forced to silent everywhere.