TamperMonkey script to inject gadget trace link into sentry

tampermonkey-sentry-gadget-log-trace.js

// ==UserScript==
// @name         Trace ID Link Inserter
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Insert a link to example.com with the trace ID
// @author       You
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Function to find the trace ID and insert the link
    function insertTraceLink() {
        // Find the container with Highlight attribute
        const highlightContainer = document.querySelector('[data-sentry-element="HighlightContainer"]');

        if (!highlightContainer) {
            return;
        }

        // Find the span element containing the trace ID within the highlight container
        const traceIdElement = highlightContainer.querySelector('span[data-test-id="value-unformatted"]');

        // Find the parent div that contains the original link within the highlight container
        const valueWrapper = highlightContainer.querySelector('[data-sentry-element="ValueWrapper"]');

        // Check if our custom link already exists within this highlight container
        const existingLink = highlightContainer.querySelector('.gadget-trace-link-container');

        // Only proceed if we found the trace ID element, its parent, and our link doesn't exist yet
        if (traceIdElement && valueWrapper && !existingLink) {
            // Get the trace ID text
            const traceId = traceIdElement.textContent;

            // Create a container div with background
            const containerDiv = document.createElement('div');
            containerDiv.className = 'gadget-trace-link-container'; // Add a class for identification
            containerDiv.style.backgroundColor = '#f5f5f7';
            containerDiv.style.padding = '8px';
            containerDiv.style.borderRadius = '4px';
            containerDiv.style.marginTop = '5px';

            // Create image element
            const imgElement = document.createElement('img');
            imgElement.src = 'https://assets.gadget.dev/assets/1b5b906861f70ec70ea51c35c1e023be.svg';
            imgElement.style.height = '16px';
            imgElement.style.marginRight = '5px';
            imgElement.style.verticalAlign = 'middle';

            // Construct URL parameters in an unencoded format
            const baseUrl = 'https://clhom.gadget.app/edit/production/logs';
            const queryParams = {
                'logql': `{environment_id="372314"} | json | level=~"info|warn|error" | trace_id="${traceId}"`,
                'timeRange[input]': 'Last 2 days'
            };

            // Build the URL with proper encoding
            const queryString = Object.entries(queryParams)
                .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
                .join('&');
            const fullUrl = `${baseUrl}?${queryString}`;

            // Create a new link element
            const exampleLink = document.createElement('a');
            exampleLink.href = fullUrl;
            exampleLink.textContent = `Gadget log trace`;
            exampleLink.target = "_blank";
            exampleLink.style.display = 'inline-flex';
            exampleLink.style.alignItems = 'center';
            exampleLink.style.textDecoration = 'none';

            // Add image and link to container
            exampleLink.prepend(imgElement);
            containerDiv.appendChild(exampleLink);

            try {
                // Insert the container div after the existing content
                valueWrapper.appendChild(containerDiv);
            } catch (e) {
                // Silent error handling
            }
        }
    }

    // Setup a mutation observer to watch for changes in the DOM
    function setupMutationObserver() {
        // Only setup the observer if it doesn't already exist
        if (!window.gadgetTraceObserver) {
            // Create a new observer
            window.gadgetTraceObserver = new MutationObserver(function(mutations) {
                // Check if our target element exists after DOM changes
                insertTraceLink();
            });

            // Start observing the document with configured parameters
            window.gadgetTraceObserver.observe(document.body, {
                childList: true,
                subtree: true
            });
        }
    }

    // Run on page load
    window.addEventListener('load', function() {
        insertTraceLink();
        setupMutationObserver();
    });

    // Try immediately in case content is already loaded
    insertTraceLink();

    // Always setup the observer for SPA navigation
    setupMutationObserver();
})();