Skip to content
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

Draft: Upgrading from raven-js to sentry/browser #2417

Open
wants to merge 8 commits into
base: main
Choose a base branch
from
Open

Draft: Upgrading from raven-js to sentry/browser #2417

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
4692898
Just testing and debugging
BenzeneAlcohol Jul 18, 2024
9423f5e
Resolves #2412
BenzeneAlcohol Jul 23, 2024
8465d93
Removed and re added package
BenzeneAlcohol Jul 23, 2024
7b1ad96
Linting fixes
BenzeneAlcohol Jul 23, 2024
c06f369
Yarn lock committed
BenzeneAlcohol Jul 24, 2024
78f88eb
Imported only the necessary modules
BenzeneAlcohol Jul 24, 2024
f1bfa93
Changed file names from raven
BenzeneAlcohol Jul 24, 2024
b58795f
Fix typo
BenzeneAlcohol Jul 25, 2024
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
3 changes: 3 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,5 +67,8 @@
"hooks": {
"pre-commit": "npm-run-all -ln --parallel lint test"
}
},
"dependencies": {
"@sentry/browser": "^8.18.0"
BenzeneAlcohol marked this conversation as resolved.
Show resolved Hide resolved
}
}
4 changes: 2 additions & 2 deletions packages/jaeger-ui/src/types/tracking.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
// See the License for the specific language governing permissions and
// limitations under the License.

import { RavenStatic } from 'raven-js';
import * as Sentry from '@sentry/browser';
BenzeneAlcohol marked this conversation as resolved.
Show resolved Hide resolved
import { TNil } from '.';
import { Config } from './config';

Expand All @@ -22,7 +22,7 @@ export interface IWebAnalyticsFunc {

export default interface IWebAnalytics {
init: () => void;
context: boolean | RavenStatic | null;
context: boolean | Sentry.BrowserClient | null;
isEnabled: () => boolean;
trackPageView: (pathname: string, search: string | TNil) => void;
trackError: (description: string) => void;
Expand Down
67 changes: 34 additions & 33 deletions packages/jaeger-ui/src/utils/tracking/conv-raven-to-ga.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,8 @@
// limitations under the License.

/* eslint-disable camelcase */
import { RavenTransportOptions } from 'raven-js';
import { Event as SentryEvent } from '@sentry/browser';
import {Stacktrace, Exception, Breadcrumb} from '@sentry/browser'

import prefixUrl from '../prefix-url';

Expand All @@ -36,6 +37,16 @@ const FETCH_SYMBOLS = [
{ sym: '__IGNORE__', word: '', rx: /\.js(\.map)?$/i },
];

interface SentryTransportOptions {
url: string;
data: any;
auth: {
sentry_version: string;
sentry_client: string;
sentry_key: string;
};
BenzeneAlcohol marked this conversation as resolved.
Show resolved Hide resolved
}

// eslint-disable-next-line no-console
const warn = console.warn.bind(console);

Expand Down Expand Up @@ -116,20 +127,11 @@ function convErrorMessage(message: string, maxLen = 0) {
// cFn
// dFn
//
interface IConvException {
type: string;
value: number;
stacktrace: {
frames: {
filename: string;
function: string;
}[];
};
}
function convException(errValue: IConvException) {

function convException(errValue: Exception) {
const message = convErrorMessage(`${errValue.type}: ${errValue.value}`, 149);
const frames = errValue.stacktrace.frames.map(fr => {
const filename = fr.filename.replace(origin, '').replace(/^\/static\/js\//i, '');
const frames = (errValue.stacktrace?.frames ?? []).map(fr => {
const filename = (fr.filename ?? '').replace(origin, '').replace(/^\/static\/js\//i, '');
const fn = collapseWhitespace(fr.function || '??');
return { filename, fn };
});
Expand Down Expand Up @@ -169,9 +171,7 @@ function convNav(to: string) {
// "dp" - fetch the dependency data
// And, "NNN" is a non-200 status code.
type TCrumbData = {
Copy link
Member

Choose a reason for hiding this comment

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

can you explain what "breadcrumb" means in this context? I saw a link you posted to sentry docs, but they didn't explain it either, just started talking details.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Will explain this tomorrow, late night here.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

breadcrumb in this context is basically any event that is captured. Everything is referred to as a breadcrumb. It basically lets us capture everything leading up to that event/error.

url: string;
status_code: number;
to: string;
[key: string]: any;
};
function convFetch(data: TCrumbData) {
const { url, status_code } = data;
Expand Down Expand Up @@ -251,16 +251,15 @@ interface ICrumb {
category: string;
data: TCrumbData;
message: string;
selector: string;
}
function convBreadcrumbs(crumbs: ICrumb[]) {
function convBreadcrumbs(crumbs: Breadcrumb[]) {
if (!Array.isArray(crumbs) || !crumbs.length) {
return '';
}
// the last UI breadcrumb has the CSS selector included
let iLastUi = -1;
for (let i = crumbs.length - 1; i >= 0; i--) {
if (crumbs[i].category.slice(0, 2) === 'ui') {
if (crumbs[i]?.category?.slice(0, 2) === 'ui') {
iLastUi = i;
break;
}
Expand All @@ -270,10 +269,10 @@ function convBreadcrumbs(crumbs: ICrumb[]) {
let onNewLine = true;
for (let i = 0; i < crumbs.length; i++) {
const c = crumbs[i];
const cStart = c.category.split('.')[0];
const cStart = c.category?.split('.')[0];
switch (cStart) {
case 'fetch': {
const fetched = convFetch(c.data);
const fetched = c.data ? convFetch(c.data) : null;
if (fetched) {
joiner.push(fetched);
onNewLine = false;
Expand All @@ -282,25 +281,25 @@ function convBreadcrumbs(crumbs: ICrumb[]) {
}

case 'navigation': {
const nav = `${onNewLine ? '' : '\n'}\n${convNav(c.data.to)}\n`;
const nav = `${onNewLine ? '' : '\n'}\n${convNav(c.data?.to)}\n`;
joiner.push(nav);
onNewLine = true;
break;
}

case 'ui': {
if (i === iLastUi) {
const selector = compressCssSelector(c.message);
if (c.category && i === iLastUi) {
const selector = c.message ? compressCssSelector(c.message) : null;
joiner.push(`${c.category[3]}{${selector}}`);
} else {
} else if (c.category) {
joiner.push(c.category[3]);
}
onNewLine = false;
break;
}

case 'sentry': {
const msg = convErrorMessage(c.message, 58);
const msg = c.message ? convErrorMessage(c.message, 58) : null;
joiner.push(`${onNewLine ? '' : '\n'}${msg}\n`);
onNewLine = true;
break;
Expand Down Expand Up @@ -343,24 +342,26 @@ function convBreadcrumbs(crumbs: ICrumb[]) {

// Create the GA label value from the message, page, duration, git info, and
// breadcrumbs. See <./README.md> for details.
function getLabel(message: string, page: string, duration: number, git: string, breadcrumbs: ICrumb[]) {
function getLabel(message: string, page: string, duration: number, git: string, breadcrumbs: Breadcrumb[]) {
const header = [message, page, duration, git, ''].filter(v => v != null).join('\n');
const crumbs = convBreadcrumbs(breadcrumbs);
return `${header}\n${truncate(crumbs, 498 - header.length, true)}`;
}

// Convert the Raven exception data to something that can be sent to Google
// Analytics. See <./README.md> for details.
export default function convRavenToGa({ data }: RavenTransportOptions) {
export default function convRavenToGa({ data }: SentryTransportOptions) {
const { breadcrumbs, exception, extra, request, tags } = data;
const { message, stack } = convException(exception.values[0]);
const url = truncate(request.url.replace(origin, ''), 50);
const { message, stack } = convException(exception?.values?.[0] ?? {});

const url = truncate((request?.url ?? '').replace(origin, ''), 50);
const { word: page } = getSym(NAV_SYMBOLS, url);
const value = Math.round(extra['session:duration'] / 1000);
const duration = extra?.['session:duration'];
const value = typeof duration === 'number' ? Math.round(duration / 1000) : 0;
const category = `jaeger/${page}/error`;
let action = [message, tags && tags.git, url, '', stack].filter(v => v != null).join('\n');
action = truncate(action, 499);
const label = getLabel(message, page, value, tags && tags.git, breadcrumbs && breadcrumbs.values);
const label = getLabel(message, page, value, (tags && tags.git) as string, (breadcrumbs && Array.isArray(breadcrumbs.values) ? breadcrumbs.values : []) as Breadcrumb[]);
return {
message,
category,
Expand Down
Loading