How do I use toucan-js with Sentry Performance/Tracing

[STRRL]

trafficstars

Hi! I want to use toucan-js for collecting tracing data with my cloudflare workers application.

I have set up the tracesSampleRate when new Toucan({<options>}), but it does not work, no data on the sentry performance panel appeared.

What should I do to use toucan with tracing correctly?

Thank in advance!

[ngshiheng]

hey @STRRL , I'm not the maintainer of toucan-js but I encountered the same issue when I didn't import @sentry/tracing. Here's an example:

import { Toucan } from 'toucan-js';
import '@sentry/tracing';


type Env = {
	SENTRY_DSN: string;
};

export default {
	async fetch(request, env, context): Promise<Response> {
		const sentry = new Toucan({
			dsn: env.SENTRY_DSN,
			tracesSampleRate: 1.0,
			context,
			request,
		});

		const transaction = sentry.startTransaction({ name: 'someRandomName' });
		try {
			handler();
			return new Response('Hello!');
		} catch (e) {
			sentry.captureException(e);

			return new Response('Something went wrong! Team has been notified.', {
				status: 500,
			});
		} finally {
			transaction.finish();
		}
	},
} as ExportedHandler<Env>;

To create a span, simply do const span = transaction.startChild({ op: 'someFunction' });. Just remember to call span.finish() at the end of it.

[mikkoh]

One thing I'll add to @ngshiheng's answer is that you need to pass a description to give a name for the span:

const span = transaction.startChild({
    op: 'timeout 1',
    description: 'Timeout 1',
  });

(unnamed span) is what you get when you don't pass a description