Skip to content

feat(astro): Add distributed tracing via <meta> tags #9483

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
merged 4 commits into from
Nov 9, 2023
Merged

feat(astro): Add distributed tracing via <meta> tags #9483

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
fb0adba
feat(astro): Add distributed tracing via `<meta>` tags
Lms24 Nov 8, 2023
272cbbd
add regex check for sentry-trace and baggage values
Lms24 Nov 8, 2023
32a7a04
use ReadableStream to modify html chunks
Lms24 Nov 9, 2023
77fdc93
fix tests and encoding error
Lms24 Nov 9, 2023
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
43 changes: 43 additions & 0 deletions packages/astro/src/server/meta.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import type { Hub } from '@sentry/core';
import { getDynamicSamplingContextFromClient } from '@sentry/core';
import type { Span } from '@sentry/types';
import { dynamicSamplingContextToSentryBaggageHeader, generateSentryTraceHeader } from '@sentry/utils';

/**
* Extracts the tracing data from the current span or from the client's scope
* (via transaction or propagation context) and renders the data to <meta> tags.
*
* This function creates two serialized <meta> tags:
* - `<meta name="sentry-trace" content="..."/>`
* - `<meta name="baggage" content="..."/>`
*
* TODO: Extract this later on and export it from the Core or Node SDK
*
* @param span the currently active span
* @param client the SDK's client
*
* @returns an object with the two serialized <meta> tags
*/
export function getTracingMetaTags(span: Span | undefined, hub: Hub): { sentryTrace: string; baggage?: string } {
const scope = hub.getScope();
const client = hub.getClient();
const { dsc, sampled, traceId } = scope.getPropagationContext();
const transaction = span?.transaction;

const sentryTrace = span ? span.toTraceparent() : generateSentryTraceHeader(traceId, undefined, sampled);

const dynamicSamplingContext = transaction
? transaction.getDynamicSamplingContext()
: dsc
? dsc
: client
? getDynamicSamplingContextFromClient(traceId, client, scope)
: undefined;

const baggage = dynamicSamplingContextToSentryBaggageHeader(dynamicSamplingContext);

return {
sentryTrace: `<meta name="sentry-trace" content="${sentryTrace}"/>`,
baggage: baggage ? `<meta name="baggage" content="${baggage}"/>` : undefined,
};
}
31 changes: 26 additions & 5 deletions packages/astro/src/server/middleware.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import { captureException, configureScope, startSpan } from '@sentry/node';
import { captureException, configureScope, getCurrentHub, startSpan } from '@sentry/node';
import { addExceptionMechanism, objectify, stripUrlQueryAndFragment, tracingContextFromHeaders } from '@sentry/utils';
import type { APIContext, MiddlewareResponseHandler } from 'astro';

import { getTracingMetaTags } from './meta';

type MiddlewareOptions = {
/**
* If true, the client IP will be attached to the event by calling `setUser`.
Expand Down Expand Up @@ -93,11 +95,30 @@ export const handleRequest: (options?: MiddlewareOptions) => MiddlewareResponseH
},
},
async span => {
const res = await next();
if (span && res.status) {
span.setHttpStatus(res.status);
const originalResponse = await next();
if (span && originalResponse.status) {
span.setHttpStatus(originalResponse.status);
}

const hub = getCurrentHub();
const client = hub.getClient();
const contentType = originalResponse.headers.get('content-type');

const isPageloadRequest = contentType && contentType.startsWith('text/html');
if (!isPageloadRequest || !client) {
return originalResponse;
}
return res;

const html = await originalResponse.text();
Copy link
Contributor

Choose a reason for hiding this comment

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

m: Honestly I am a little worried here for multiple reasons:

  • I don't understand the Request/Response APIs enough yet but my worry is that this will consume the repsonse stream and somehow make it unavailable for anything that tries to access it.
  • I believe with our approach here we will definitely prevent streamed responses from being streamed and just completely block right? This could hurt TTFB.
  • I don't know how to feel about the heuristic to find the head tag here 😂. Using an HTML parser to properly find it is probably overkill?
  • Let's make absolutely sure this doesn't open any XSS vectors. Maybe we run it through a regexp before writing to the HTML.

Copy link
Member Author

@Lms24 Lms24 Nov 8, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

I don't understand the Request/Response APIs enough yet but my worry is that this will consume the repsonse stream and somehow make it unavailable for anything that tries to access it.
I believe with our approach here we will definitely prevent streamed responses from being streamed and just completely block right? This could hurt TTFB.

It's a good point. Astro uses streaming but they also show a similar example for modifying HTML in their middleware docs. I'm gonna ask the Astro folks if there are performance concerns with doing this.

I don't know how to feel about the heuristic to find the head tag here 😂. Using an HTML parser to properly find it is probably overkill?

Agreed, it's super basic but we use the identical approach in SvelteKit and so far it worked decently well. Using a parser is for sure a performance concern. My pragmatic take would be to go with this and improve the lookup logic once we discover problems here.

Let's make absolutely sure this doesn't open any XSS vectors.

Generally, I agree but I'm not entirely sure about the XSS vector. I guess for something malicious to end up in here, the SDK's options (release, environment) or the transaction data (name, ids) would need to be somehow modified beforehand. Do you see any obvious ways how this could happen?

Maybe we run it through a regexp before writing to the HTML.

I think this would work decently well for sentry-trace content but baggage is a little more arbitrary. Lemme try to come up with something.

Copy link
Contributor

Choose a reason for hiding this comment

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

Astro uses streaming but they also show a similar example for modifying HTML

Alright if Astro is recommending this it's probably fine.

My pragmatic take would be to go with this and improve the lookup logic once we discover problems here.

Sounds good to me.

Do you see any obvious ways how this could happen?

No obvious ways, but if we can come up with a simple way to ensure the string cant be escaped it would be great.

Copy link
Member Author

Choose a reason for hiding this comment

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

@lforst I added a baggage regex check in 272cbbd

for sentry-trace, we already had a regex

We'll only serialize the baggage/sentry-trace content if the regexes match.

if (typeof html !== 'string' || !html.includes('<head>')) {
return originalResponse;
}

const { sentryTrace, baggage } = getTracingMetaTags(span, hub);
const content = `<head>\n${sentryTrace}\n${baggage}\n`;
const modifiedHtml = html.replace('<head>', content);

return new Response(modifiedHtml, originalResponse);
},
);
return res;
Expand Down
103 changes: 103 additions & 0 deletions packages/astro/test/server/meta.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
import * as SentryCore from '@sentry/core';
import { vi } from 'vitest';

import { getTracingMetaTags } from '../../src/server/meta';

const mockedSpan = {
toTraceparent: () => '123',
transaction: {
getDynamicSamplingContext: () => ({
environment: 'production',
}),
},
};

const mockedHub = {
getScope: () => ({
getPropagationContext: () => ({
traceId: '123',
}),
}),
getClient: () => ({}),
};

describe('getTracingMetaTags', () => {
it('returns the tracing tags from the span, if it is provided', () => {
{
// @ts-expect-error - only passing a partial span object
const tags = getTracingMetaTags(mockedSpan, mockedHub);

expect(tags).toEqual({
sentryTrace: '<meta name="sentry-trace" content="123"/>',
baggage: '<meta name="baggage" content="sentry-environment=production"/>',
});
}
});

it('returns propagationContext DSC data if no span is available', () => {
const tags = getTracingMetaTags(undefined, {
...mockedHub,
// @ts-expect-error - only passing a partial scope object
getScope: () => ({
getPropagationContext: () => ({
traceId: 'abc',
sampled: true,
spanId: '456',
dsc: {
environment: 'staging',
public_key: 'key',
trace_id: 'abc',
},
}),
}),
});

expect(tags).toEqual({
sentryTrace: expect.stringMatching(/<meta name="sentry-trace" content="abc-.+-1"/),
baggage: '<meta name="baggage" content="sentry-environment=staging,sentry-public_key=key,sentry-trace_id=abc"/>',
});
});

it('returns only the `sentry-trace` tag if no DSC is available', () => {
vi.spyOn(SentryCore, 'getDynamicSamplingContextFromClient').mockReturnValueOnce({
trace_id: '',
public_key: undefined,
});

const tags = getTracingMetaTags(
// @ts-expect-error - only passing a partial span object
{
toTraceparent: () => '123',
transaction: undefined,
},
mockedHub,
);

expect(tags).toEqual({
sentryTrace: '<meta name="sentry-trace" content="123"/>',
});
});

it('returns only the `sentry-trace` tag if no DSC is available', () => {
vi.spyOn(SentryCore, 'getDynamicSamplingContextFromClient').mockReturnValueOnce({
trace_id: '',
public_key: undefined,
});

const tags = getTracingMetaTags(
// @ts-expect-error - only passing a partial span object
{
toTraceparent: () => '123',
transaction: undefined,
},
{
...mockedHub,
getClient: () => undefined,
},
);

expect(tags).toEqual({
sentryTrace: '<meta name="sentry-trace" content="123"/>',
});
});
});
97 changes: 94 additions & 3 deletions packages/astro/test/server/middleware.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,16 @@ import { vi } from 'vitest';

import { handleRequest, interpolateRouteFromUrlAndParams } from '../../src/server/middleware';

vi.mock('../../src/server/meta', () => ({
getTracingMetaTags: () => ({
sentryTrace: '<meta name="sentry-trace" content="123">',
baggage: '<meta name="baggage" content="abc">',
}),
}));

describe('sentryMiddleware', () => {
const startSpanSpy = vi.spyOn(SentryNode, 'startSpan');
const nextResult = Promise.resolve(new Response(null, { status: 200, headers: new Headers() }));

afterEach(() => {
vi.clearAllMocks();
Expand All @@ -24,7 +32,6 @@ describe('sentryMiddleware', () => {
id: '123',
},
};
const nextResult = Promise.resolve({ status: 200 });
const next = vi.fn(() => nextResult);

// @ts-expect-error, a partial ctx object is fine here
Expand Down Expand Up @@ -109,7 +116,7 @@ describe('sentryMiddleware', () => {
params: {},
url: new URL('https://myDomain.io/users/'),
};
const next = vi.fn();
const next = vi.fn(() => nextResult);

// @ts-expect-error, a partial ctx object is fine here
await middleware(ctx, next);
Expand Down Expand Up @@ -159,7 +166,7 @@ describe('sentryMiddleware', () => {
params: {},
url: new URL('https://myDomain.io/users/'),
};
const next = vi.fn();
const next = vi.fn(() => nextResult);

// @ts-expect-error, a partial ctx object is fine here
await middleware(ctx, next);
Expand All @@ -178,6 +185,90 @@ describe('sentryMiddleware', () => {
expect.any(Function), // the `next` function
);
});

it('injects tracing <meta> tags into the HTML of a pageload response', async () => {
vi.spyOn(SentryNode, 'getCurrentHub').mockImplementation(() => ({
// @ts-expect-error this is fine
getClient: () => ({}),
}));

const middleware = handleRequest();

const ctx = {
request: {
method: 'GET',
url: '/users',
headers: new Headers(),
},
params: {},
url: new URL('https://myDomain.io/users/'),
};
const next = vi.fn(() =>
Promise.resolve(
new Response('<head><meta name="something" content=""/></head>', {
headers: new Headers({ 'content-type': 'text/html' }),
}),
),
);

// @ts-expect-error, a partial ctx object is fine here
const resultFromNext = await middleware(ctx, next);

expect(resultFromNext?.headers.get('content-type')).toEqual('text/html');

const html = await resultFromNext?.text();

expect(html).toContain('<meta name="sentry-trace" content="');
expect(html).toContain('<meta name="baggage" content="');
});

it("no-ops if the response isn't HTML", async () => {
const middleware = handleRequest();

const ctx = {
request: {
method: 'GET',
url: '/users',
headers: new Headers(),
},
params: {},
url: new URL('https://myDomain.io/users/'),
};

const originalResponse = new Response('{"foo": "bar"}', {
headers: new Headers({ 'content-type': 'application/json' }),
});
const next = vi.fn(() => Promise.resolve(originalResponse));

// @ts-expect-error, a partial ctx object is fine here
const resultFromNext = await middleware(ctx, next);

expect(resultFromNext).toBe(originalResponse);
});

it("no-ops if there's no <head> tag in the response", async () => {
const middleware = handleRequest();

const ctx = {
request: {
method: 'GET',
url: '/users',
headers: new Headers(),
},
params: {},
url: new URL('https://myDomain.io/users/'),
};

const originalResponse = new Response('<p>no head</p>', {
headers: new Headers({ 'content-type': 'text/html' }),
});
const next = vi.fn(() => Promise.resolve(originalResponse));

// @ts-expect-error, a partial ctx object is fine here
const resultFromNext = await middleware(ctx, next);

expect(resultFromNext).toBe(originalResponse);
});
});

describe('interpolateRouteFromUrlAndParams', () => {
Expand Down