https://www.wissel.nl/assets/shared/appsignal/stimulus-breadcrumbs-d8140ee9.js

1/**
2 * AppSignal plugin which reports Stimulus controller lifecycle callbacks
3 * (initialize/connect/disconnect) and action invocations as breadcrumbs.
4 *
5 * Stimulus already logs these same events to the console via
6 * `application.debug`, but that's off outside development and, even when
7 * on, logs the entire controller instance and DOM element -- too much (and
8 * unsafe) to persist as-is. This hooks the same internal activity log to
9 * report a sanitized breadcrumb regardless of `application.debug`, and
10 * defers to the original behavior for the console output.
11 *
12 * @param appsignal the Appsignal client instance
13 * @param application the Stimulus Application instance (see
14 *   node_modules/@hotwired/stimulus/dist/stimulus.js, class Application)
15 */
16function installBreadcrumbHandler(appsignal, application) {
17  const logDebugActivity = application.logDebugActivity.bind(application)
18
19  application.logDebugActivity = (identifier, functionName, detail = {}) => {
20    appsignal.addBreadcrumb(breadcrumbFor(identifier, functionName, detail))
21    logDebugActivity(identifier, functionName, detail)
22  }
23}
24
25/**
26 * @param identifier {string} the controller's identifier
27 * @param functionName {string} the lifecycle callback or action method name
28 * @param detail {{ element?: Element, event?: Event, target?: EventTarget, currentTarget?: EventTarget }}
29 */
30function breadcrumbFor(
31  identifier,
32  functionName,
33  { element, event, target, currentTarget },
34) {
35  return {
36    category: "stimulus",
37    action: `${identifier} #${functionName}`,
38    metadata: {
39      ...(element && { element: describeElement(element) }),
40      ...(event && { event: event.type }),
41      ...(target &&
42        target !== currentTarget && { target: describeElement(target) }),
43    },
44  }
45}
46
47/** @param element {Element} */
48function describeElement(element) {
49  return `${element.tagName}${element.id ? `#${element.id}` : ""}`
50}
51
52export { installBreadcrumbHandler }