Skip to content

fix: analytics #35

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dwjanus merged 6 commits into from
Jan 23, 2026
Merged

fix: analytics #35

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
8bddb7c
add frontend property to bugsnag
dwjanus Jan 7, 2026
422961c
added frontend property to dd global context
dwjanus Jan 20, 2026
a9bf4ce
add amplitude enrichment plugin
dwjanus Jan 20, 2026
1e6100d
format
dwjanus Jan 20, 2026
b667f49
enrichment plugin
dwjanus Jan 21, 2026
6da9876
feedback
dwjanus Jan 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
73 changes: 47 additions & 26 deletions scripts/inject-amplitude.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { fileURLToPath } from 'url';

const AMPLITUDE_API_KEY = process.env.AMPLITUDE_API_KEY;
const AMPLITUDE_SERVER_URL = process.env.AMPLITUDE_SERVER_URL;
const AMPLITUDE_SERVER_ZONE = process.env.AMPLITUDE_SERVER_ZONE || 'US';
const AMPLITUDE_SERVER_ZONE = process.env.AMPLITUDE_SERVER_ZONE ?? 'US';

const currentPath = fileURLToPath(import.meta.url);
const projectRoot = path.dirname(currentPath);
Expand Down Expand Up @@ -32,31 +32,52 @@ async function inject(fileName) {
const amplitudeListenerScript = `<script type="module">
!(function () {
var e = "${AMPLITUDE_API_KEY}";
e &&
(globalThis.amplitude.init(e${
AMPLITUDE_SERVER_URL
? `, undefined, {
serverUrl: "${AMPLITUDE_SERVER_URL}",
serverZone: "${AMPLITUDE_SERVER_ZONE}"
}`
: ''
}),
globalThis.amplitude.setOptOut(!1),
globalThis.addEventListener("dydx:track", function (e) {
var t = e.detail.eventType,
d = e.detail.eventData;
globalThis.amplitude.track(t, d);
}),
globalThis.addEventListener("dydx:identify", function (e) {
var t = e.detail.property,
d = e.detail.propertyValue;
if ("userId" === t) globalThis.amplitude.setUserId(d);
else {
var i = new globalThis.amplitude.Identify();
i.set(t, d), globalThis.amplitude.identify(i);
}
}),
console.log("Amplitude enabled."));
if (!e) return;

// Enrichment plugin to add 'frontend' to ALL events (including automatic ones)
var appendBonkPlugin = {
name: 'append-bonk-plugin',
execute: async function(event) {
Copy link

@jaredvu jaredvu Jan 22, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

don't you also need setup?

Copy link
Collaborator Author

@dwjanus dwjanus Jan 22, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

in the docs they say its optional and the setup that was there didnt do anything so i dont think we need it.
for reference see Amplitude browser sdk plugins and scroll down to the table in the Create a custom plugin section

event.event_properties = {
...event.event_properties,
frontend: 'bonk',
};
return event;
}
};

// add plugin BEFORE init
globalThis.amplitude.add(appendBonkPlugin());

// now initialize amplitude
globalThis.amplitude.init(e${
AMPLITUDE_SERVER_URL
? `, undefined, {
serverUrl: "${AMPLITUDE_SERVER_URL}",
serverZone: "${AMPLITUDE_SERVER_ZONE}",
}`
: ''
});

globalThis.amplitude.setOptOut(!1);

globalThis.addEventListener("dydx:track", function (e) {
var t = e.detail.eventType,
d = e.detail.eventData;
globalThis.amplitude.track(t, d);
});

globalThis.addEventListener("dydx:identify", function (e) {
var t = e.detail.property,
d = e.detail.propertyValue;
if ("userId" === t) globalThis.amplitude.setUserId(d);
else {
var i = new globalThis.amplitude.Identify();
i.set(t, d), globalThis.amplitude.identify(i);
}
});

console.log("Amplitude enabled.");
})();
</script>`;

Expand Down
7 changes: 7 additions & 0 deletions scripts/inject-bugsnag.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ async function inject(fileName) {
(function() {
var BUGSNAG_API_KEY = '${BUGSNAG_API_KEY}';
var walletType;
var frontend = 'bonk';

if (BUGSNAG_API_KEY) {
Bugsnag.start(BUGSNAG_API_KEY);
Expand All @@ -40,6 +41,9 @@ async function inject(fileName) {
case 'walletType':
walletType = value;
break;
case 'frontend':
frontend = value;
break;
default:
break;
}
Expand All @@ -59,6 +63,9 @@ async function inject(fileName) {
if (walletType) {
event.addMetadata('walletType', walletType);
}
if (frontend) {
event.addMetadata('frontend', frontend);
}
});
} else {
console.warn(location, error, metadata);
Expand Down
7 changes: 6 additions & 1 deletion src/lib/analytics/datadog.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ const SERVICE_NAME = 'v4-web';
const LOGGER_NAME = 'v4-web';
const SITE_NAME = 'datadoghq.com';
const instanceId = crypto.randomUUID();
const FRONTEND = 'bonk';

const LOG_ENDPOINT_PATH = (PROXY_URL ?? '').endsWith('/') ? 'api/v2/logs' : '/api/v2/logs';

Expand All @@ -22,14 +23,18 @@ if (CLIENT_TOKEN) {
proxy: PROXY_URL ? `${PROXY_URL}${LOG_ENDPOINT_PATH}` : undefined,
sendLogsAfterSessionExpiration: true,
});

datadogLogs.setGlobalContextProperty('frontend', FRONTEND);
datadogLogs.setGlobalContextProperty('dd-client-token', CLIENT_TOKEN);
datadogLogs.setGlobalContextProperty('instance-id', instanceId);
Comment on lines +27 to +29
Copy link

@jaredvu jaredvu Jan 21, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is the difference between the Global and non-Global context property?

Copy link
Collaborator Author

@dwjanus dwjanus Jan 22, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The difference is when they are executed, global sets the context pre-init and regular is called synchronously after init. This is really just a belt and suspenders incase we were setting the context async before the SDK was fully initialized

}

datadogLogs.createLogger(LOGGER_NAME);

const datadogLogger = datadogLogs.getLogger(LOGGER_NAME)!;
datadogLogger.setContextProperty('dd-client-token', CLIENT_TOKEN);
datadogLogger.setContextProperty('instance-id', instanceId);
datadogLogger.setContextProperty('frontend', 'bonk');
datadogLogger.setContextProperty('frontend', FRONTEND);

/**
* TODO: make a logger wrapper that enables us also log to the console
Expand Down
16 changes: 10 additions & 6 deletions src/lib/telemetry.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,49 +4,53 @@ import { isDev } from '@/constants/networks';
import { track } from './analytics/analytics';
import { dd } from './analytics/datadog';

const FRONTEND = 'bonk';

let lastLogTime = Date.now();

export function getDurationSinceLastLogMs() {
return Date.now() - lastLogTime;
}

export const log = (location: string, error?: Error, metadata?: object) => {
const modifiedMetadata = { ...metadata, frontend: FRONTEND };
lastLogTime = Date.now();
if (isDev) {
// eslint-disable-next-line no-console
console.warn('telemetry/log:', { location, error, metadata });
console.warn('telemetry/log:', { location, error, metadata: modifiedMetadata });
}

const customEvent = new CustomEvent('dydx:log', {
detail: {
location,
error,
metadata,
metadata: modifiedMetadata,
},
});

track(
AnalyticsEvents.Error({
location,
error,
metadata,
metadata: modifiedMetadata,
})
);

dd.error(`[Error] ${location}`, metadata, error);
dd.error(`[Error] ${location}`, { ...metadata, frontend: FRONTEND }, error);

globalThis.dispatchEvent(customEvent);
};

export const logInfo = (location: string, metadata?: object) => {
lastLogTime = Date.now();
const modifiedMetadata = { ...metadata, frontend: FRONTEND };

if (isDev) {
// eslint-disable-next-line no-console
console.log('telemetry/logInfo:', { location, metadata });
console.log('telemetry/logInfo:', { location, metadata: modifiedMetadata });
}

dd.info(`[Info] ${location}`, metadata);
dd.info(`[Info] ${location}`, { ...metadata, frontend: FRONTEND });
};

// Log rejected Promises without a .catch() handler
Expand Down
Loading