Source code analysis sentry user behavior record implementation process

Today, we will introduce the sharp tool of front-end anomaly monitoring Sentry The source code implementation process of user behavior record in the platform , Why use Sentry, You can read previous articles

https://xie.infoq.cn/article/40fd56e8c8fd296b9bd0d91aa

.

Preface

In the process of daily troubleshooting , The user's behavior and operation records can give us great reference and troubleshooting direction . At present, some platforms on the market cannot record the behavior records of users ,Sentry It provides a good behavior record query , As shown in the figure below . Jump to page from user , Go to the click element request interface , Something goes wrong , As shown in the figure , It is most likely that the corresponding data of the interface does not meet the expectations, resulting in page sending errors , This article will explore Sentry JS SDK How to record the user's operation behavior records .

The source code to achieve

SDK Called on initialization

init

Method , Final

init

Methodical  

initAndBind

  Point to  

getCurrentHub().bindClient()

Hub.prototype.bindClient = function (client) {
 //  Get the last
 var top = this.getStackTop();
 //  hold  new BrowerClient()  example   Bound to the top On
 top.client = client;
 if (client && client.setupIntegrations) {
 client.setupIntegrations();
 }
};


The default integration is invoked here  

client.setupIntegrations()

, Final direction  

@sentry/core/integration.js

, there  options  namely  sdk  Passed in and processed during initialization  options.

export function setupIntegrations(options) {
 var integrations = {};
 getIntegrationsToSetup(options).forEach(function (integration) {
 integrations[integration.name] = integration;
 setupIntegration(integration);
 });
 return integrations;
}


setupIntegration

  call  

setupOnce

  Initialize interception , there  

setupOnce

  It is the ability of every integrated function .

export function setupIntegration(integration) {
 if (installedIntegrations.indexOf(integration.name) !== -1) {
 return;
 }
 integration.setupOnce(addGlobalEventProcessor, getCurrentHub);
 installedIntegrations.push(integration.name);
 logger.log("Integration installed: " + integration.name);
}


breadcrumbs Breadcrumb setupOnce function

@sentry/broswer/integrations/breadcrumbs.js

 – 

setupOnce

  function , You can see that it's right console,dom event , Network request , Page changes have been intercepted .

Breadcrumbs.prototype.setupOnce = function () {
 var _this = this;
 if (this._options.console) {
 addInstrumentationHandler({
 callback: function () {
 var args = [];
 for (var _i = 0; _i < arguments.length; _i++) {
 args[_i] = arguments[_i];
 }
 _this._consoleBreadcrumb.apply(_this, __spread(args));
 },
 type: 'console',
 });
 }
 if (this._options.dom) {
 addInstrumentationHandler({
 ...,
 type: 'dom',
 });
 }
 if (this._options.xhr) {
 addInstrumentationHandler({
 ..,
 type: 'xhr',
 });
 }
 if (this._options.fetch) {
 addInstrumentationHandler({
 ...,
 type: 'fetch',
 });
 }
 if (this._options.history) {
 addInstrumentationHandler({
 ...,
 type: 'history',
 });
 }
 };


addInstrumentationHandler

  come from  

@sentry/utils/instrument.js

, Finally called

instrument

Method , This method realizes the specific capture logic of each interception type .


function instrument(type) {
 if (instrumented[type]) {
 return;
 }
 instrumented[type] = true;
 switch (type) {
 case 'console':
 instrumentConsole();
 break;
 case 'dom':
 instrumentDOM();
 break;
 case 'xhr':
 instrumentXHR();
 break;
 case 'fetch':
 instrumentFetch();
 break;
 case 'history':
 instrumentHistory();
 break;
 case 'error':
 instrumentError();
 break;
 case 'unhandledrejection':
 instrumentUnhandledRejection();
 break;
 default:
 logger.warn('unknown instrumentation type:', type);
 }
}


Let's look at the specific interception capture callback function for log printing , All captured callback functions will eventually call  

getCurrentHub().addBreadcrumb

  Add behavior record , Only different types of behavior records will pass in different processing parameters .

Breadcrumbs.prototype._consoleBreadcrumb = function (handlerData) {
 var breadcrumb = {
 category: 'console',
 data: {
 arguments: handlerData.args,
 logger: 'console',
 },
 level: Severity.fromString(handlerData.level),
 message: safeJoin(handlerData.args, ' '),
 };
 if (handlerData.level === 'assert') {
 if (handlerData.args[0] === false) {
 breadcrumb.message = "Assertion failed: " + (safeJoin(handlerData.args.slice(1), ' ') || 'console.assert');
 breadcrumb.data.arguments = handlerData.args.slice(1);
 }
 else {
 // Don't capture a breadcrumb for passed assertions
 return;
 }
 }
 getCurrentHub().addBreadcrumb(breadcrumb, {
 input: handlerData.args,
 level: handlerData.level,
 });
}


getCurrentHub().addBreadcrumb

  Finally called for  

@sentry/hub/scope.js

, Time records are added here , And the processing of the maximum number of records , Finally, keep the behavior record in  

this._breadcrumbs（Scope）

Array .

Scope.prototype.addBreadcrumb = function (breadcrumb, maxBreadcrumbs) {
 var mergedBreadcrumb = __assign({ timestamp: dateTimestampInSeconds() }, breadcrumb);
 this._breadcrumbs =
 maxBreadcrumbs !== undefined && maxBreadcrumbs >= 0
 ? __spread(this._breadcrumbs, [mergedBreadcrumb]).slice(-maxBreadcrumbs)
 : __spread(this._breadcrumbs, [mergedBreadcrumb]);
 this._notifyScopeListeners();
 return this;
};


Print globally injected... On the console

__SENTRY__

The object can be in  

hub

  Object  

_breadcrumbs

  See the data in the following format .

Finally, report the time when the exception is initiated , By calling

this.getStackTop()

Get to the current

scope

Report together with the data in , there  

this.getStackTop().scope

  Including the above  

_breadcrumbs

  Behavioral data , Before that, there are  

_user

  User information , 

_tags

  Tag data , 

_extra

  Additional data, etc .

Hub.prototype._invokeClient = function (method) {
 var _a;
 var args = [];
 for (var _i = 1; _i < arguments.length; _i++) {
 args[_i - 1] = arguments[_i];
 }
 var top = this.getStackTop();
 if (top && top.client && top.client[method]) {
 (_a = top.client)[method].apply(_a, __spread(args, [top.scope]));
 }
};


The data format of the final exception report , As shown in the figure below .

Overall flow chart

Last

That's all for the overall source code analysis ,Sentry It is a powerful front-end anomaly monitoring platform , There are many functions and data analysis involved , Interested students can try to have a look , I think it's useful. Remember to give a compliment before you leave , Collect it and you may need it someday .