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

[STRRL]

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

[jahands]

Anyone figured out how to use tracing in toucan-js 4? Looks like things have changed quite a bit