Exploring native architecture in Sentry(V20.12.1) K8S cloud, JavaScript Enriching event information

A series of

1. Sentry-go SDK Chinese Practice Guide
2. Plan together according to official documents in Sentry For Go
3. Snuba: Sentry’s new search infrastructure (based on ClickHouse)
4. Sentry 10 K8S cloud native architecture exploration, fast access to Vue App in 1 minute
5. Sentry(V20.12.1) K8S cloud native architecture exploration, play forward/back end monitoring and event log big data analysis, high performance + high availability + scalable + scalable cluster deployment
6. Sentry(V20.12.1) K8S cloud native architecture exploration, Sentry JavaScript SDK three ways to install and load
7. Sentry(V20.12.1) K8S cloud native architecture exploration, Sentry FOR JAVASCRIPT SDK configuration details
8. Sentry(V20.12.1) K8S cloud native architecture exploration, Sentry FOR JAVASCRIPT manual capture of event basic usage
9. Sentry(V20.12.1) K8S cloud native architecture exploration, Sentry FOR JAVASCRIPT Source Maps details
10. Sentry(V20.12.1) K8S cloud native architecture exploration, Sentry FOR JAVASCRIPT troubleshooting
11. Sentry(V20.12.1) K8S Cloud native architecture exploration, 1 minute hands-on JavaScript performance monitoring
12. Sentry(V20.12.1) K8S Cloud Native Architecture Exploration, JavaScript Performance Monitoring management Transactions
13. Sentry(V20.12.1) K8S Cloud Native Architecture Exploration, sampling Transactions for JavaScript Performance Monitoring

Add Context

Custom contexts allow you to attach arbitrary data to events. Typically, this context is shared between any issues captured during its life cycle. You cannot search for these, but you can view them on the issue page:

Structured Context

The best practice for attaching custom data is through structured context. The context must always be a dictionary or map, and its value can be arbitrary. Use setContext and give the context a unique name:

Sentry.setContext("character", {
  name: "Mighty Fighter".age: 19.attack_type: "melee"});Copy the code

Size Limitations

When sending context, consider the payload size limit. Sentry does not recommend sending the entire application state and big data BLOB in context. If the maximum Payload size is exceeded, Sentry responds with 413 Payload Too Large and rejects the event. When keepalive: true is used, the request may remain pending forever.

Passing Context Directly

Starting with our JavaScript SDK version 5.16.0, you can feed some context data directly to captureException and captureMessage calls. Provided data will be merged with data already stored in the current range, unless it is explicitly cleared using a callback method.

This feature comes in three different variants:

1. A normal object that contains updatable properties
2. We will extract the Scope instance of the property from it
3. Callback function that takes the current scope as an argument and allows modification

We allow the following context keys to be passed: tags, Extra, contexts, user, level, fingerprint.

Example Usages

Sentry.captureException(new Error("something went wrong"), {
  tags: {
    section: "articles",}});Copy the code

Explicitly clear content already stored in scope:

Sentry.captureException(new Error("clean as never"), scope= > {
  scope.clear();
  scope.setTag("clean"."slate");
  return scope;
});
Copy the code

Pass data using Scope instances (whose properties will still be merged with the global Scope) :

const scope = new Sentry.Scope();
scope.setTag("section"."articles");
Sentry.captureException(new Error("something went wrong"), scope);
Copy the code

Use Scope instances to pass data and ignore the globally configured Scope attribute:

const scope = new Sentry.Scope();
scope.setTag("section"."articles");
Sentry.captureException(new Error("something went wrong"), () = > scope);
Copy the code

Clearing Context

The Context remains within the current scope, so it is cleared at the end of each operation (request, etc.). You can also push and pop your own scope to apply context data to a specific code block or function.

Sentry supports two different scopes to set the context:

1. Global Scope, Sentry is not discarded at the end of the operation
2. Scope created by the user

This will change in all future events:

This will change in all future events:Copy the code

This state is changed only for errors caught in the withScope callback, and then automatically restored to its previous value:

Sentry.withScope(function(scope) {
  scope.setUser(someUser);
  Sentry.captureException(error);
});
Copy the code

If you want to delete global configuration data from a Scope, you can call:

Sentry.configureScope(scope= > scope.clear());
Copy the code

Additional Data

In addition to Structured Contexts, Sentry also supports adding unstructured “Additional Data” through setExtra. Additional Data has been deprecated and structured context should be used instead, and should be avoided whenever possible.

Identify Users

Users contain key information that constitutes a unique identity in Sentry. Each option is optional, but one must exist for the Sentry SDK to capture the user:

Id: Your user’s internal identifier.

Username: indicates the username. Often used as a better label than an internal ID.

Email: indicates the replacement or supplement of username. Sentry knows E-mail addresses and can display things like Gravatars and unlock messaging.

Ip_address: indicates the IP address of the user. If the user is not authenticated, Sentry uses the IP address as the user’s unique identifier. Sentry will attempt to extract this information, if any, from the HTTP request data. Set to “{{auto}}” to enable Sentry to infer the IP address from connection.

In addition, you can provide any key/value pair other than the reserved name, and the Sentry SDK stores these key/value pairs along with the user.

Identify users:

Sentry.setUser({ email: "[email protected]" });
Copy the code

You can also clear the currently set user:

Sentry.configureScope(scope= > scope.setUser(null));
Copy the code

Set Transaction Name

The current transaction name is used to group transactions in the Performance product and annotate error events with failure points.

Transaction names can refer to the current Web application route or the current task being executed. Such as:

• GET /api/{version}/users/
• UserListView
• myapp.tasks.renew_all_subscriptions

Ideally, transaction names do not contain variable values such as user IDS, but have a low cardinality while still uniquely identifying the code you are interested in.

Many of our framework integrations already have transaction names set. Set yourself:

Sentry.configureScope(scope= > scope.setTransactionName("UserListView"));
Copy the code

This overrides the name of the transaction that is currently running.

Customize Tags

Tags are key/value string pairs that are both indexable and searchable. Tags have powerful UI features, such as filters and tag-distribution maps. Tags also help you quickly access related events and see the tag distribution of a group of events. Common uses of Tags include hostname, platform version, and user language.

We will automatically index all tags for an event, as well as the frequency and last time Sentry saw the tag. We will also keep track of the number of different tags and can help you identify hot spots for various issues.

Defining tags is easy and binding them to current Scope ensures that all future events within scope contain the same tag:

Sentry.setTag("page_locale"."de-at");
Copy the code

Some tags are automatically set by Sentry. It is strongly recommended that you do not overwrite these tags and use your own name instead.

Once you start sending tagged data, you’ll see it in the Sentry Web UI: Filters in the sidebar of the Project page, aggregated within events, and aggregated events on the Tags page.

Attachments

Sentry can enhance crash reporting by storing other files, such as log files, alongside events as attachments. Attachments allow crashed files to be not only uploaded to Sentry, but also persisted for further investigation.

Uploading Attachments

To add an Attachment, create an Event processor that uploads the file to the attachment endpoint in the form of a multipart Form data request. This requires associating the attachment with the event using its ID:

public attachmentUrlFromDsn(dsn: Dsn, eventId: string) {
  const { host, path, projectId, port, protocol, user } = dsn;
  return `${protocol}: / /${host}${port ! = =' ' ? ` :${port}` : ' '}${ path ! = =' ' ? ` /${path}` : ' '
  }/api/${projectId}/events/${eventId}/attachments/? sentry_key=${user}&sentry_version=7&sentry_client=custom-javascript`;
}

Sentry.addGlobalEventProcessor((event: Event) = > {
  try {
    const client = Sentry.getCurrentHub().getClient();
    const endpoint = attachmentUrlFromDsn(
      client.getDsn(),
      event.event_id
    );
    const formData = new FormData();
    formData.append(
      'my-attachment'.new Blob([JSON.stringify({ logEntries: ["my log"] {})],type: 'application/json',}).'logs.json'
    );
    fetch(endpoint, {
      method: 'POST'.body: formData,
    }).catch((ex) = > {
      // we have to catch this otherwise it throws an infinite loop in Sentry
      console.error(ex);
    });
    return event;
  } catch (ex) {
    console.error(ex); }});Copy the code

Sentry allows up to 100MB of attachments per event, including crash report files if applicable. Uploads larger than this size are rejected with HTTP error 413 Payload Too Large and the data is immediately discarded. To add larger or more files, consider using the secondary storage option.

Attachments remain for 30 days; If the total storage space contained in the quota is exceeded, no attachments will be stored. You can delete attachments or events they contain at any time. Deleting attachments does not affect your quota (quota) – Sentry stores attachments immediately after they are credited to your quota.

Access to Attachments

To restrict access to attachments, navigate to your organization’s General Settings, Then select the Attachments Access drop-down menu to set the appropriate Access – to any member of your organization, organization billing owner, member, admin, Manager, or owner.

By default, when storage is enabled, all members are granted access. If a member does not have access to the project, the attachment cannot be downloaded. The button will be grayed out in Sentry. Members can only view attachments stored.

Viewing Attachments

The attachment appears at the bottom of the Issue Details page that displays the event.

Alternatively, Attachments show up in the Attachments TAB on the Issue Details page, where you can view the attachment type and related events. Click the Event ID to open the Issue Details information for that particular Event.

Breadcrumbs

Sentry uses breadcrumbs to create event clues prior to the event. These events are very similar to traditional logging, but allow richer structured data to be recorded.

This page provides an overview of manual breadcrumb recording and customization. Learn more about the information displayed on the Issue Details page and how to filter breadcrumbs to quickly resolve problems in Using breadcrumbs.

Manual Breadcrumbs

You can manually add breadcrumbs whenever something interesting happens. For example, if a user authenticates or makes other state changes, a breadcrumb can be manually logged.

Sentry.addBreadcrumb({
  category: "auth".message: "Authenticated user " + user.email,
  level: Sentry.Severity.Info,
});
Copy the code

Available breadcrumb Keys include Type, category, Message, level, TIMESTAMP (which many SDKS set automatically for you), and Data, where you can put any other information you want to include breadcrumbs. Using keys other than these six will not cause an error, but will cause data to be deleted when the event is handled by Sentry.

Automatic Breadcrumbs

The SDK and its associated integration will automatically record many types of breadcrumbs. For example, the browser JavaScript SDK automatically logs all location changes.

Customize Breadcrumbs

The SDK allows you to customize breadcrumbs by hooking before_breadcrumb. This hook passes an already assembled breadcrumb and, in some SDKS, an optional Hint. This function can modify the breadcrumb or decide to discard it entirely by returning null:

Sentry.init({
  // ...

  beforeBreadcrumb(breadcrumb, hint) {
    return breadcrumb.category === "ui.click" ? null: breadcrumb; }});Copy the code

User Feedback

When a user encounters an error, Sentry can collect additional feedback. This type of feedback is useful when you can usually render simple error pages (classic 500.html).

To collect feedback, use an embeddable JavaScript widget that requests and collects the user’s name, E-mail address, and description of what happened. Once you provide feedback, Sentry pairs it with the original event, giving you more insight into the problem.

The screen capture below provides an example of a User Feedback widget, although your personalization may vary depending on your customization:

Collecting Feedback

To integrate widgets, you need to run the JavaScript SDK version 2.1 or higher. The widget authenticates with your public DSN and then passes the Event ID generated at the back end.

You can use the User Feedback API if you want to use an alternative product to the widget or if you don’t have a JavaScript front end.

Make sure you have the JavaScript SDK available:

<script
  src="https://browser.sentry-cdn.com/6.0.1/bundle.min.js"
  integrity="sha384-z2Rmh4rfoBkdxaENH00ggKo5Bx8b2SJs+MWQrjWx4DbET95Zr2mxV2Vet3CCj4iW"
  crossorigin="anonymous"
></script>
Copy the code

If you use a framework like React or Angular, the best place to collect user feedback is your error handling component. (See the platform-specific documentation for examples.) If you don’t use a framework, you can use beforeSend to collect feedback before sending events:

<script>
  Sentry.init({
    dsn: "https://[email protected]/0".beforeSend(event, hint) {
      // Check if it is an exception, and if so, show the report dialog
      if (event.exception) {
        Sentry.showReportDialog({ eventId: event.event_id });
      }
      returnevent; }});</script>
Copy the code

Customizing the Widget

You can customize widgets to your organization’s needs, especially for localization purposes. All options can be passed through the showReportDialog call.

Automatic language detection override for Sentry (e.g. Lang =de)

Param	Default
eventId	Manually set the event ID.
dsn	Manually set the DSN to report.
user	Manually set user Data [the object with the key listed below].
user.email	The user’s E-mail address.
user.name	The user name.
lang	[automatic]– Overrides the language code of Sentry
title	Looks like we got a problem.
subtitle	Our team has been notified.
subtitle2	If you want to help, please tell us what happened below. –Not visible at a small screen resolution
labelName	The name of the
labelEmail	Email
labelComments	What happened?
labelClose	Shut down
labelSubmit	submit
errorGeneric	Unknown error occurred while submitting report. Please try again.
errorFormEntry	Some fields are invalid. Please correct the error and try again.
successMessage	Your feedback has been sent. Thank you very much!
onLoad	n/a

Scopes and Hubs

After capturing the event and sending it to Sentry, the SDK merges the event data with additional information in the current scope. The SDK usually manages scopes automatically for you in the framework integration without you having to think about them. However, you should know what scope is and how to use it to your advantage.

What’s a Scope, what’s a Hub

You can think of the Hub as the central point our SDK uses to route events to Sentry. When init() is called, a hub is created on which a client and a blank scope are created. The hub is then associated with the current thread and will hold a bunch of scopes internally.

Scope will contain useful information that should be sent with the event. For example, contexts or breadcrumbs are stored on the scope. When pushed into a scope, it inherits all data from the parent scope, and when it pops up, all changes are restored.

The default SDK integration will intelligently push and pop up scopes. For example, Web Framework integration creates and destroys scopes around your routes or controllers.

How do the Scope and Hub Work

When you start using the SDK, a Scope and hub are automatically created for you. A hub is unlikely to interact with it directly unless you are writing an integration or want to create or destroy scopes. Scopes, on the other hand, are more user-oriented. You can call configure-scope at any time to modify the data stored on scope. For example, this is used to modify the context.

When you call a global function such as capture_event internally, Sentry finds the current hub and asks it to capture the event. The hub then internally merges the event with the highest-scope data.

Configuring the Scope

The most useful operation when working with scopes is the configure-scope function. It can be used to reconfigure the current scope. This can be used, for example, to add custom tags or to inform Sentry of currently authenticated users.

Sentry.configureScope(function(scope) {
  scope.setTag("my-tag"."my value");
  scope.setUser({
    id: 42.email: "[email protected]"}); });Copy the code

This can also be applied when canceling user Settings on logout:

Sentry.configureScope(scope= > scope.setUser(null));
Copy the code

Local Scopes

We also support one-click push and scope configuration. Commonly referred to as with-scope or push-scope, this is also useful if you only want to send data for a specific event. In the following example, we use this function to attach level and tag to only one specific error:

Sentry.withScope(function(scope) {
  scope.setTag("my-tag"."my value");
  scope.setLevel("warning");
  // will be tagged with my-tag="my value"
  Sentry.captureException(new Error("my error"));
});

// will not be tagged with my-tag
Sentry.captureException(new Error("my other error"));
Copy the code

Although this example looks similar to configure-Scope, it is very different in the sense that configure-Scope actually changes the current active Scope, and all subsequent calls to configure-Scope will retain the changes made.

Using with-scope, on the other hand, creates a copy of the current scope and remains isolated until the function call completes. Therefore, you can either not want to set context information for other locations here, or you can attach no context information at all by calling clear on the scope, leaving the “global” scope unchanged.

Chinese documents have been synchronized to:

• getsentry.hacker-linner.com

I am for less. Wechat: uuhells123. Public account: Hacker afternoon tea. Thank you for your support 👍👍👍!Copy the code