dmarr
dmarr
PostsComments
NNuxt
Created by splunky on 12/8/2024 in #❓・help
vuetify icons not working
The vuetify discord might know
8 replies
NNuxt
Created by dmarr on 11/29/2024 in #❓・help
Sharing types across a custom devtool module and client
@kapa.ai I also don't see the terminal output in the devtools
9 replies
NNuxt
Created by dmarr on 11/20/2024 in #❓・help
How do I add a custom log reporter to nuxt?
much simpler using winston 
import winston from 'winston';
import {OpenTelemetryTransportV3} from '@opentelemetry/winston-transport';

const logger = winston.createLogger({
  level: 'info',
  format: winston.format.json(),
  defaultMeta: { service: 'test-service' },
  transports: [
    new OpenTelemetryTransportV3(),
  ],
});

logger.info('this is a log record body');
import winston from 'winston';
import {OpenTelemetryTransportV3} from '@opentelemetry/winston-transport';

const logger = winston.createLogger({
  level: 'info',
  format: winston.format.json(),
  defaultMeta: { service: 'test-service' },
  transports: [
    new OpenTelemetryTransportV3(),
  ],
});

logger.info('this is a log record body');
19 replies
NNuxt
Created by dmarr on 11/20/2024 in #❓・help
How do I add a custom log reporter to nuxt?
Turns out, otel doesn't ingest stdout. There are many types of exporters using their sdk, one being console. It doesn't actually go to the collector, however. I was finally able to figure out how to log to the collector using their official sdk. If anyone is curious.. 
import logsAPI from '@opentelemetry/api-logs';
import { OTLPLogExporter } from '@opentelemetry/exporter-logs-otlp-grpc';
import {
  LoggerProvider,
  SimpleLogRecordProcessor,
  ConsoleLogRecordExporter,
  // BatchLogRecordProcessor,
} from '@opentelemetry/sdk-logs';

// To start a logger, you first need to initialize the Logger provider.
const loggerProvider = new LoggerProvider({
  resource: {
    attributes: {
      'service.name': 'test-service',
    }
  }
});
// Add a processor to export log record
loggerProvider.addLogRecordProcessor(
  new SimpleLogRecordProcessor(new ConsoleLogRecordExporter())
);

const loggerExporter = new OTLPLogExporter();
loggerProvider.addLogRecordProcessor(
  new SimpleLogRecordProcessor(loggerExporter)
);

//  To create a log record, you first need to get a Logger instance
const logger = loggerProvider.getLogger('default');

// You can also use global singleton
// logsAPI.logs.setGlobalLoggerProvider(loggerProvider);

// emit a log record
logger.emit({
  severityNumber: logsAPI.SeverityNumber.INFO,
  severityText: 'INFO',
  body: 'this is a log record body',
  attributes: { 'log.type': 'LogRecord' },
});
import logsAPI from '@opentelemetry/api-logs';
import { OTLPLogExporter } from '@opentelemetry/exporter-logs-otlp-grpc';
import {
  LoggerProvider,
  SimpleLogRecordProcessor,
  ConsoleLogRecordExporter,
  // BatchLogRecordProcessor,
} from '@opentelemetry/sdk-logs';

// To start a logger, you first need to initialize the Logger provider.
const loggerProvider = new LoggerProvider({
  resource: {
    attributes: {
      'service.name': 'test-service',
    }
  }
});
// Add a processor to export log record
loggerProvider.addLogRecordProcessor(
  new SimpleLogRecordProcessor(new ConsoleLogRecordExporter())
);

const loggerExporter = new OTLPLogExporter();
loggerProvider.addLogRecordProcessor(
  new SimpleLogRecordProcessor(loggerExporter)
);

//  To create a log record, you first need to get a Logger instance
const logger = loggerProvider.getLogger('default');

// You can also use global singleton
// logsAPI.logs.setGlobalLoggerProvider(loggerProvider);

// emit a log record
logger.emit({
  severityNumber: logsAPI.SeverityNumber.INFO,
  severityText: 'INFO',
  body: 'this is a log record body',
  attributes: { 'log.type': 'LogRecord' },
});
19 replies
NNuxt
Created by dmarr on 11/20/2024 in #❓・help
How do I add a custom log reporter to nuxt?
Right?
19 replies
NNuxt
Created by dmarr on 11/20/2024 in #❓・help
How do I add a custom log reporter to nuxt?
otel can ingest stdout which is where console/consola writes to, and logging objects should be all that’s needed
19 replies
NNuxt
Created by dmarr on 11/20/2024 in #❓・help
How do I add a custom log reporter to nuxt?
I will be digging into this more
19 replies
NNuxt
Created by dmarr on 11/20/2024 in #❓・help
How do I add a custom log reporter to nuxt?
More information: - what is structured log format https://opentelemetry.io/docs/specs/otel/logs/data-model/#log-and-event-record-definition - really nice page with short explanation what are benefits of log4js-node https://betterstack.com/community/guides/logging/best-nodejs-logging-libraries/ (#3)
19 replies
NNuxt
Created by dmarr on 11/20/2024 in #❓・help
How do I add a custom log reporter to nuxt?
Hello everyone, I researched your current issue with logs and OpenTelemetry, and here is my summary: you should migrate from using console logging (via console.xxx) to a framework that supports structured formats. Initially, I considered Winston, but I am leaning toward log4js-node since it has appender configurations similar to log4java. What does this mean? You can have human-readable logs displayed in the console (as you prefer) while simultaneously configuring OpenTelemetry to export logs in a JSON-structured format. This will ensure proper export to Datadog, including all required attributes such as spans, etc.
19 replies
NNuxt
Created by dmarr on 11/20/2024 in #❓・help
How do I add a custom log reporter to nuxt?
I’m getting resistance from my devops team about using consola. They think it’s not viable for outputting structured logs.
19 replies
NNuxt
Created by dmarr on 11/20/2024 in #❓・help
How do I add a custom log reporter to nuxt?
next steps might be to package this all up in a module. Add options, and maybe a reporter formatted for OTEL output. (https://opentelemetry.io/docs/specs/otel/logs/data-model/#log-and-event-record-definition)
19 replies
NNuxt
Created by dmarr on 11/20/2024 in #❓・help
How do I add a custom log reporter to nuxt?
cc @danielroe
19 replies
NNuxt
Created by dmarr on 11/20/2024 in #❓・help
How do I add a custom log reporter to nuxt?
This has the benefit of using normal consola when running the dev server and structured JSON when using a prod build.
19 replies
NNuxt
Created by dmarr on 11/20/2024 in #❓・help
How do I add a custom log reporter to nuxt?
I was able to accomplish this in a few steps. 1. Create a shared util in ~/shared/utils/logging.ts. 2. Create a plugin that exposes the logger to be used in app land. 3. Create a server util to use the logger directly in nitro land. shared util: 
import { createConsola } from 'consola';

export const createLogger = () => {
  const logger = createConsola({ fancy: true, level: 5, formatOptions: { colors: true, date: true } });
  if (!import.meta.dev) {
    logger.setReporters([
      {
        log({ type, tag, args, date }) {
          const newLogObj = {
            level: type,
            tag,
            args,
            date,
          };
          console.log(newLogObj)
        },
      },
    ]);
  }
  return logger;
};
import { createConsola } from 'consola';

export const createLogger = () => {
  const logger = createConsola({ fancy: true, level: 5, formatOptions: { colors: true, date: true } });
  if (!import.meta.dev) {
    logger.setReporters([
      {
        log({ type, tag, args, date }) {
          const newLogObj = {
            level: type,
            tag,
            args,
            date,
          };
          console.log(newLogObj)
        },
      },
    ]);
  }
  return logger;
};
plugin: 
import { createLogger } from "~/shared/utils/logging";

export default defineNuxtPlugin(nuxtApp => {
  const logger = createLogger();
  nuxtApp.provide('logger', logger);

  const customFetch = $fetch.create({
    onRequest: ({ request }) => {
      logger.info(import.meta.server ? "server" : "client", "fetch request", request);
    },
  })
  nuxtApp.provide('cfetch', customFetch);
})
import { createLogger } from "~/shared/utils/logging";

export default defineNuxtPlugin(nuxtApp => {
  const logger = createLogger();
  nuxtApp.provide('logger', logger);

  const customFetch = $fetch.create({
    onRequest: ({ request }) => {
      logger.info(import.meta.server ? "server" : "client", "fetch request", request);
    },
  })
  nuxtApp.provide('cfetch', customFetch);
})
server/utils/logger.ts 
import { createLogger } from '~/shared/utils/logging';

export const logger = createLogger();
import { createLogger } from '~/shared/utils/logging';

export const logger = createLogger();
(ssr usage) server/plugins/logger.ts 
export default defineNitroPlugin(nitroApp => {
  nitroApp.hooks.hook('beforeResponse', (event) => {
    const headers = getHeaders(event);
    logger.log("on before response", event.path, { headers });
  });
  nitroApp.hooks.hook('afterResponse', (event) => {
    const headers = getHeaders(event);
    logger.info("on after response", event.path, { headers });
  });
  nitroApp.hooks.hook('request', (event) => {
    logger.info("on request", event.path);
  });
})
export default defineNitroPlugin(nitroApp => {
  nitroApp.hooks.hook('beforeResponse', (event) => {
    const headers = getHeaders(event);
    logger.log("on before response", event.path, { headers });
  });
  nitroApp.hooks.hook('afterResponse', (event) => {
    const headers = getHeaders(event);
    logger.info("on after response", event.path, { headers });
  });
  nitroApp.hooks.hook('request', (event) => {
    logger.info("on request", event.path);
  });
})
19 replies
NNuxt
Created by kb on 11/11/2024 in #❓・help
useAsyncData/useFetch > Function > Pinia Action - Best practices?
pinia colada?
7 replies
NNuxt
Created by Mightsrain on 10/30/2024 in #❓・help
Possible to update API path in static build without rebuild.
If you use empty strings in your runtimeConfig, then when you run the prod build it will read env.
13 replies