A series of

The SDK development

  1. Sentry 20. X JS-SDK Design Art
  2. Sentry 20. X JS-SDK Design Art (Development Basics)
  3. Sentry 20.x JS-SDK Design Art
  4. Sentry 20. X JS-SDK Design Art (Unified API)

A series of

  1. Snuba: Sentry’s new search infrastructure (based on ClickHouse)
  2. Sentry 10 K8S cloud native architecture exploration, fast access to Vue App in 1 minute
  3. Sentry(V20.x) play forward/back end monitoring and event log big data analysis, deployed to K8S cluster using Helm
  4. Sentry(v20.x) JavaScript SDK three ways to install and load
  5. Sentry(v20.x) JavaScript SDK configuration details
  6. Sentry(v20.x) JavaScript SDK manually captures the basic usage of events
  7. Sentry(v20.x) JavaScript SDK Source Maps
  8. Sentry(v20.x) JavaScript SDK troubleshooting
  9. Sentry(V20.x) JavaScript SDK 1 minute overhand Performance monitor
  10. Sentry(v20.x) JavaScript SDK Performance monitoring management Transactions
  11. Sentry(v20.x) sampling Transactions for JavaScript SDK Performance monitoring
  12. Sentry(V20.x) JavaScript SDK Enriching event information
  13. Sentry(v20.x) JavaScript SDK Data Management

Sentry-Javascript

  • Official Sentry SDKs for JavaScript
  • The sample code – packages/browser/examples /

@sentry/browser

Related to the sample

  1. denyUrls
  2. allowUrls
  3. ignoreError message
  4. ignoreError type
  5. regularException
  6. captureException
  7. captureMessage
  8. duplicated exception
  9. duplicated message
  10. integration
  11. event hints
  12. breadcrumb hints

practice

Quick run example

# sentry - javascript programs
yarn
yarn build

cd packages/browser/examples/
python -m SimpleHTTPServer You can also use your own preferred HTTP server
# Serving HTTP on 0.0.0.0 port 8000...
Copy the code

Visit: http://localhost:8000/

Example Configuration details

Sentry.init({
  // Client's DSN.
  dsn: 'https://[email protected]/297378'.// An array of strings or regexps that'll be used to ignore specific errors based on their type/message
  ignoreErrors: [/PickleRick_\d\d/.'RangeError'].// An array of strings or regexps that'll be used to ignore specific errors based on their origin url
  denyUrls: ['external-lib.js'].// An array of strings or regexps that'll be used to allow specific errors based on their origin url
  allowUrls: ['http://localhost:5000'.'https://browser.sentry-cdn'].// Debug mode with valuable initialization/lifecycle informations.
  debug: true.// Whether SDK should be enabled or not.
  enabled: true.// Custom integrations callback
  integrations(integrations) {
    return [newHappyIntegration(), ... integrations]; },// A release identifier.
  release: '1537345109360'.// An environment identifier.
  environment: 'staging'.// Custom event transport that will be used to send things to Sentry
  transport: HappyTransport,
  // Method called for every captured event
  async beforeSend(event, hint) {
    // Because beforeSend and beforeBreadcrumb are async, user can fetch some data
    // return a promise, or whatever he wants
    // Our CustomError defined in errors.js has `someMethodAttachedToOurCustomError`
    // which can mimick something like a network request to grab more detailed error info or something.
    // hint is original exception that was triggered, so we check for our CustomError name
    if (hint.originalException.name === 'CustomError') {
      const serverData = awaithint.originalException.someMethodAttachedToOurCustomError(); event.extra = { ... event.extra, serverData, }; }console.log(event);
    return event;
  },
  // Method called for every captured breadcrumb
  beforeBreadcrumb(breadcrumb, hint) {
    // We ignore our own logger and rest of the buttons just for presentation purposes
    if (breadcrumb.message.startsWith('Sentry Logger')) return null;
    if(breadcrumb.category ! = ='ui.click'|| hint.event.target.id ! = ='breadcrumb-hint') return null;

    // If we have a `ui.click` type of breadcrumb, eg. clicking on a button we defined in index.html
    // We will extract a `data-label` attribute from it and use it as a part of the message
    if (breadcrumb.category === 'ui.click') {
      const label = hint.event.target.dataset.label;
      if (label) {
        breadcrumb.message = `User clicked on a button with label "${label}"`; }}console.log(breadcrumb);
    returnbreadcrumb; }});Copy the code
  • dsn: Indicates the CLIENT DSN
  • ignoreErrors: string or array of regular expressions to be used according totype/messageIgnoring specific errors
  • denyUrls: string or array of regular expressions that will be used according toorigin urlIgnoring specific errors
  • allowUrls: string or regular expression array that will be used to allow based on itorigin urlSpecific error of
  • debug: Use valuable initializations (initialization)/ Lifecycle (lifecycleDebug mode for information
  • enabled: Whether to enable or notSDK
  • integrations: Custom integration callback
  • release: Release version identifier
  • environment: Publication environment identifier
  • transport: custom event transport, which will be used to send things toSentry
  • beforeSend: method called for each captured event
  • beforeBreadcrumb: method called for each captured breadcrumb
I am weishao wechat: uuhells123 public number: hackers afternoon tea add my wechat (mutual learning exchange), pay attention to the public number (for more learning materials ~)Copy the code