@grafana/faro-react
Version:
Faro package that enables easier integration in projects built with React.
132 lines • 5.83 kB
JavaScript
;
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.FaroProfiler = void 0;
var react_1 = require("react");
var faro_web_sdk_1 = require("@grafana/faro-web-sdk");
var dependencies_1 = require("../dependencies");
var FaroProfiler = /** @class */ (function (_super) {
__extends(FaroProfiler, _super);
function FaroProfiler(props) {
var _this = _super.call(this, props) || this;
_this.mountSpan = undefined;
_this.mountSpanEndTime = undefined;
_this.updateSpan = undefined;
if (_this.isOtelInitialized) {
_this.mountSpan = _this.createSpan('componentMount');
}
else {
dependencies_1.internalLogger === null || dependencies_1.internalLogger === void 0 ? void 0 : dependencies_1.internalLogger.error('The Faro React Profiler requires tracing instrumentation. Please enable it in the "instrumentations" section of your config.');
}
return _this;
}
Object.defineProperty(FaroProfiler.prototype, "isOtelInitialized", {
get: function () {
return !!(dependencies_1.api === null || dependencies_1.api === void 0 ? void 0 : dependencies_1.api.isOTELInitialized());
},
enumerable: false,
configurable: true
});
Object.defineProperty(FaroProfiler.prototype, "otel", {
get: function () {
return dependencies_1.api === null || dependencies_1.api === void 0 ? void 0 : dependencies_1.api.getOTEL();
},
enumerable: false,
configurable: true
});
Object.defineProperty(FaroProfiler.prototype, "tracer", {
get: function () {
var _a;
return (_a = this.otel) === null || _a === void 0 ? void 0 : _a.trace.getTracer('@grafana/faro-react', faro_web_sdk_1.VERSION);
},
enumerable: false,
configurable: true
});
FaroProfiler.prototype.createSpan = function (spanName, options) {
var _a, _b;
var span = this.tracer.startSpan(spanName, {
startTime: options === null || options === void 0 ? void 0 : options.startTime,
attributes: __assign({ 'react.component.name': this.props.name }, ((_a = options === null || options === void 0 ? void 0 : options.attributes) !== null && _a !== void 0 ? _a : {})),
});
(_b = this.otel) === null || _b === void 0 ? void 0 : _b.trace.setSpan(this.otel.context.active(), span);
if (options === null || options === void 0 ? void 0 : options.endTime) {
span.end(options.endTime);
}
return span;
};
FaroProfiler.prototype.createChildSpan = function (spanName, parent, options) {
var _this = this;
var _a;
var span;
(_a = this.otel) === null || _a === void 0 ? void 0 : _a.context.with(this.otel.trace.setSpan(this.otel.context.active(), parent), function () {
span = _this.createSpan(spanName, options);
});
return span;
};
FaroProfiler.prototype.componentDidMount = function () {
if (this.isOtelInitialized && this.mountSpan) {
this.mountSpanEndTime = Date.now();
this.mountSpan.end(this.mountSpanEndTime);
}
};
FaroProfiler.prototype.shouldComponentUpdate = function (_a) {
var _this = this;
var updateProps = _a.updateProps;
if (this.isOtelInitialized && this.mountSpan && updateProps !== this.props.updateProps) {
var changedProps = Object.keys(updateProps).filter(function (key) { return updateProps[key] !== _this.props.updateProps[key]; });
if (changedProps.length > 0) {
this.updateSpan = this.createChildSpan('componentUpdate', this.mountSpan, {
attributes: {
'react.component.changed_props': changedProps,
},
});
}
}
return true;
};
FaroProfiler.prototype.componentDidUpdate = function () {
if (this.isOtelInitialized && this.updateSpan) {
this.updateSpan.end();
this.updateSpan = undefined;
}
};
FaroProfiler.prototype.componentWillUnmount = function () {
if (this.isOtelInitialized && this.mountSpan) {
this.createChildSpan('componentRender', this.mountSpan, {
startTime: this.mountSpanEndTime,
endTime: Date.now(),
});
}
};
FaroProfiler.prototype.render = function () {
return this.props.children;
};
return FaroProfiler;
}(react_1.Component));
exports.FaroProfiler = FaroProfiler;
//# sourceMappingURL=FaroProfiler.js.map