Add Logs to the JavaScript SDK #15526
Assignees
Labels
Comments
AbhiPrasad
added a commit
that referenced
this issue
Feb 28, 2025
ref #15526 Based on the work in #15442, we add definitions for the logs protocol and envelope to the JavaScript SDKs. Relay data category: https://github.com/getsentry/relay/blob/e36886a98c89af645e5c0d2109657deafa25d902/relay-server/src/envelope.rs#L182 Relay log protocol: https://github.com/getsentry/relay/blob/ad04adf6d6756c4e36328c8217bea0ee01f289ec/relay-event-schema/src/protocol/ourlog.rs#L12
|
After chatting with the team, we decided to go for an approach that does not add a new method to the client. This saves on bundle size, but does add some complexity around how internals and managed and exposed. You can see both attempts here:
Pros and cons:
|
This was referenced Mar 18, 2025
AbhiPrasad
added a commit
that referenced
this issue
Mar 21, 2025
ref #15526 Continuing off the work from #15717, this PR adds the logging public API to the Browser SDK. It also adds a basic flushing strategy to the SDK that is timeout based. This is done to help save bundle size. The main file added was `log.ts`. This has three areas to look at: 1. The logger methods for `trace`, `debug`, `info`, `warn`, `error`, `fatal` (the log severity levels) as well as an internal capture log helper all these methods call. 2. `addFlushingListeners` which adds listeners to flush the logs buffer on client flush and document visibility hidden. 3. a flush timeout that flushes logs after X seconds, which gets restarted when new logs are captured. I also removed any logs logic from the `BrowserClient`, which should ensure this stays as bundle size efficient as possible. Usage: ```js import * as Sentry from "@sentry/browser"; Sentry.init({ dsn: "your-dsn-here", _experiments: { enableLogs: true // This is required to use the logging features } }); // Trace level (lowest severity) Sentry.logger.trace("This is a trace message", { userId: 123 }); // Debug level Sentry.logger.debug("This is a debug message", { component: "UserProfile" }); // Info level Sentry.logger.info("User logged in successfully", { userId: 123 }); // Warning level Sentry.logger.warn("API response was slow", { responseTime: 2500 }); // Error level Sentry.logger.error("Failed to load user data", { userId: 123, errorCode: 404 }); // Critical level Sentry.logger.critical("Database connection failed", { dbHost: "primary-db" }); // Fatal level (highest severity) Sentry.logger.fatal("Application is shutting down unexpectedly", { memory: "exhausted" }); ```
AbhiPrasad
added a commit
that referenced
this issue
Mar 24, 2025
ref #15526 Continuing off the work from #15763, this PR adds the logging public API to the Node SDK. It also adds a basic weight-based flushing strategy to the SDK that is in the server-runtime client. The main file added was `log.ts`. In that file I've added logger methods for `trace`, `debug`, `info`, `warn`, `error`, `fatal` (the log severity levels) as well as an internal capture log helper all these methods call. Usage: ```js import * as Sentry from "@sentry/node"; Sentry.init({ dsn: "your-dsn-here", _experiments: { enableLogs: true // This is required to use the logging features } }); // Trace level (lowest severity) Sentry.logger.trace("This is a trace message", { userId: 123 }); // Debug level Sentry.logger.debug("This is a debug message", { component: "UserProfile" }); // Info level Sentry.logger.info("User %s logged in successfully", [123]); // Warning level Sentry.logger.warn("API response was slow", { responseTime: 2500 }); // Error level Sentry.logger.error("Failed to load user %s data", [123], { errorCode: 404 }); // Critical level Sentry.logger.critical("Database connection failed", { dbHost: "primary-db" }); // Fatal level (highest severity) Sentry.logger.fatal("Application is shutting down unexpectedly", { memory: "exhausted" }); ```
This was referenced Mar 24, 2025
AbhiPrasad
added a commit
that referenced
this issue
Mar 25, 2025
ref #15526 Adds support for `beforeSendLog`, currently in the `_experiments` options namespace. While adding `beforeSendLog`, I noticed the `beforeCaptureLog` was not placed correctly. This PR also fixes that, and introduces a `afterCaptureLog` that runs in the capturing lifecycle properly.
AbhiPrasad
added a commit
that referenced
this issue
Mar 25, 2025
ref #15526 This adds support for parameterizing logs via the existing `ParameterizedString` type and `parameterize` function exported from the SDK. This works for all usages of the logger, so browser and Node.js. Usage: ```js Sentry.logger.info(Sentry.logger.fmt`User ${user} updated profile picture`, { userId: 'user-123', imageSize: '2.5MB', timestamp: Date.now() }); ``` `fmt` is an alias to `Sentry.parameterize` that is exported from the `logger` namespace. To support this change, I changed the typing of `ParameterizedString` to accept `unknown[]` for `__sentry_template_values__`. This is broadening the type, so should not be a breaking change. [`logentry.params`](https://github.com/getsentry/relay/blob/a91f0c92860f88789ad6092ef5b1062aa3e34b80/relay-event-schema/src/protocol/logentry.rs#L51C27-L51C32) should accept all kinds of values, relay handles formatting them correctly.
|
I know we got #15815 left, but this is ready to release now :) Just tested everything on some demo app and it all works! Closing as such. |
# for free
to join this conversation on GitHub.
Already have an account?
# to comment
In #15442 we created an experimental logging API to test out the new logging product.
Based on the experimental API, we devised unified public API we'd like all SDKs to implement: https://www.notion.so/sentry/Logs-in-the-SDK-1a48b10e4b5d80b1827fe14d9fd0236b#1a48b10e4b5d80a782a9efc6fd463acf
This task looks at implementing this logging API in the JavaScript SDKs
captureLogmethod #15717beforeSendLogoption and functionality feat(core): Add support forbeforeSendLog#15814The text was updated successfully, but these errors were encountered: