Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(browser): Add logger.X methods to browser SDK #15763

Merged
merged 1 commit into from
Mar 21, 2025

Conversation

AbhiPrasad
Copy link
Member

@AbhiPrasad AbhiPrasad commented Mar 20, 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:

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 AbhiPrasad requested a review from a team March 20, 2025 20:40
@AbhiPrasad AbhiPrasad self-assigned this Mar 20, 2025
@AbhiPrasad AbhiPrasad requested review from stephanie-anderson and chargome and removed request for a team March 20, 2025 20:40
Copy link
Contributor

size-limit report 📦

Path Size % Change Change
@sentry/browser 23.17 KB -0.55% -130 B 🔽
@sentry/browser - with treeshaking flags 22.96 KB -0.63% -149 B 🔽
@sentry/browser (incl. Tracing) 36.24 KB -0.31% -113 B 🔽
@sentry/browser (incl. Tracing, Replay) 73.4 KB -0.16% -116 B 🔽
@sentry/browser (incl. Tracing, Replay) - with treeshaking flags 66.82 KB -0.19% -127 B 🔽
@sentry/browser (incl. Tracing, Replay with Canvas) 78.04 KB -0.14% -111 B 🔽
@sentry/browser (incl. Tracing, Replay, Feedback) 90.59 KB -0.13% -115 B 🔽
@sentry/browser (incl. Feedback) 40.31 KB -0.29% -117 B 🔽
@sentry/browser (incl. sendFeedback) 27.81 KB -0.44% -124 B 🔽
@sentry/browser (incl. FeedbackAsync) 32.6 KB -0.38% -126 B 🔽
@sentry/react 24.97 KB -0.5% -128 B 🔽
@sentry/react (incl. Tracing) 38.12 KB -0.38% -146 B 🔽
@sentry/vue 27.41 KB -0.44% -122 B 🔽
@sentry/vue (incl. Tracing) 37.93 KB -0.31% -119 B 🔽
@sentry/svelte 23.2 KB -0.54% -127 B 🔽
CDN Bundle 24.39 KB -0.53% -133 B 🔽
CDN Bundle (incl. Tracing) 36.27 KB -0.31% -115 B 🔽
CDN Bundle (incl. Tracing, Replay) 71.28 KB -0.19% -132 B 🔽
CDN Bundle (incl. Tracing, Replay, Feedback) 76.47 KB -0.18% -136 B 🔽
CDN Bundle - uncompressed 71.31 KB -0.53% -383 B 🔽
CDN Bundle (incl. Tracing) - uncompressed 107.68 KB -0.35% -384 B 🔽
CDN Bundle (incl. Tracing, Replay) - uncompressed 218.94 KB -0.18% -384 B 🔽
CDN Bundle (incl. Tracing, Replay, Feedback) - uncompressed 231.51 KB -0.17% -384 B 🔽
@sentry/nextjs (client) 39.42 KB -0.36% -145 B 🔽
@sentry/sveltekit (client) 36.66 KB -0.29% -107 B 🔽
@sentry/node 142.64 KB - -
@sentry/node - without tracing 96.03 KB - -
@sentry/aws-serverless 120.4 KB -0.01% -1 B 🔽

View base workflow run

Comment on lines +39 to +50
if (WINDOW.document) {
WINDOW.document.addEventListener('visibilitychange', () => {
if (WINDOW.document.visibilityState === 'hidden') {
_INTERNAL_flushLogsBuffer(client);
}
});
}

client.on('flush', () => {
_INTERNAL_flushLogsBuffer(client);
});
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could we not also just flush in the client callback?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Which client callback are you referring too?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

client.on('flush', () => {
    _INTERNAL_flushLogsBuffer(client);
  });

@AbhiPrasad AbhiPrasad merged commit e55b8ee into develop Mar 21, 2025
156 checks passed
@AbhiPrasad AbhiPrasad deleted the abhi-browser-logging-methods branch March 21, 2025 14:46
AbhiPrasad added a commit that referenced this pull request 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" });
```
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy