jill64/sentry-sveltekit-cloudflare

♟️ Unofficial Sentry Integration for SvelteKit Cloudflare Adapter

@jill64/sentry-sveltekit-cloudflare

♟️ Unofficial Sentry Integration for SvelteKit Cloudflare Adapter

Workaround until close @sentry/javascript #8291.

Note

If you are looking for other node-less adapters, see sentry-sveltkeit-edge.

Installation

npm i @jill64/sentry-sveltekit-cloudflare

Configuration

Add the following settings to your SvelteKit application's vite.config.js.

// vite.config.js
import { sveltekit } from '@sveltejs/kit/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [sveltekit()],
  ssr: {
    noExternal: ['@jill64/sentry-sveltekit-cloudflare']
  }
  // ...
})

Usage

Client

// hooks.client.js
import { init } from '@jill64/sentry-sveltekit-cloudflare/client'
// or
// import { clientInit } from '@jill64/sentry-sveltekit-cloudflare'

const onError = init(
  '__YOUR_SENTRY_DSN__'
  // ,
  // {
  //   sentryOptions: {
  //     // ... Other Sentry Config
  //   },
  //   enableInDevMode: boolean (default: false)
  // }
)

export const handleError = onError((e, sentryEventId) => {
  // Your Error Handler
})

Server

// hooks.server.js
import { init } from '@jill64/sentry-sveltekit-cloudflare/server'
// or
// import { serverInit } from '@jill64/sentry-sveltekit-cloudflare'

const { onHandle, onError } = init(
  '__YOUR_SENTRY_DSN__'
  // ,
  // {
  //   toucanOptions: {
  //     // ... Other Sentry Config
  //   },
  //   handleOptions: {
  //     handleUnknownRoutes: boolean (default: false)
  //   },
  //   enableInDevMode: boolean (default: false)
  // }
)

export const handle = onHandle(({ event, resolve }) => {
  // Your Handle Code
})

export const handleError = onError((e, sentryEventId) => {
  // Your Error Handler
})

Configure Source Map (Optional)

Use @sentry/vite-plugin.

Example

// vite.config.js
import { sentryVitePlugin } from '@sentry/vite-plugin'
import { sveltekit } from '@sveltejs/kit/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    sourcemap: true
  },
  plugins: [
    sentryVitePlugin({
      org: process.env.SENTRY_ORG,
      project: process.env.SENTRY_PROJECT,
      authToken: process.env.SENTRY_AUTH_TOKEN
    }),
    sveltekit()
  ]
})

License

MIT

sentry-sveltekit-cloudflare's Issues

require fix reference to sentry official in README

omit esm-env from deps

add doxygen comments in source

add conditional export by environments

How to utilize the Sentry API?

I am trying to figure out how to addUser context within the error handler - how would you do this with this package, or is this handled by something like toucan-js?

reduce bundle size

Currently shipping with all Sentry dependencies bundled together due to a module format conflict.
I will work on this when we have more time or when demand grows.

Expose Sentry Event ID in handleError

Hey, awesome package thanks a lot.

What I'd like:

export const handleError = onError((e) => {
  // HERE
})

I'd like to be able to access the Sentry Event-ID returned by const eventId = Sentry.captureException(input.error) or a custom id that is included in the capture maybe like so Sentry.captureException(input.error,{customErrorId})

Why?

This can be useful in many ways, the simplest is being able to show the Error-Id on the error page, allowing to easier trace it.

export const handleError = onError((e) => {
	// Your Error Handler
	// ...
	return {
		message: 'Whoops!',
		errorId: e.sentryEventId
	};
});

//+error.svelte
<p>Your Error ID: {$page.error.errorId}<p/>

Support SvelteKit routing instrumentation to BrowserTracing

getsentry/sentry-javascript#8291 (comment)

Handling of expected errors thrown using SvelteKit API

Hi, I was trying to use this library but I'm having some problems getting consistent error handling in all possible cases.

In SvelteKit, we use built-in error function to "throw" (in SvelteKit 2, not explicitly) custom HttpError to initiate HTTP error handling on the framework side, to respond with a custom HTTP status code. As an example:

error(503, "Service is now unavailable")

However, in current implementation, the error will not be catched by this library and we will just send a response back. This is because:

• expected errors are not going through SvelteKit handleError hook, Docs
• implementation of instrumentHandle for handle hook does not catch this HttpError. When the event resolves, error was already handled by SvelteKIt, setting the status code and the message. res gets returned with Response.
  

  sentry-sveltekit-cloudflare/src/server/instrumentHandle.ts

  Lines 54 to 56 in e34b951

  	const res = await resolve(event, {
  	transformPageChunk: addSentryCodeToPage(options)
  	})

I'm positive that it's not expected to be working this way, since we see a catch block in the same function:

sentry-sveltekit-cloudflare/src/server/instrumentHandle.ts

Lines 64 to 68 in e34b951

	} catch (e: unknown) {
	const Sentry = init(event)
	sendErrorToSentry(e, Sentry)
	throw e
	}

And below code in sendErrorToSentry:

sentry-sveltekit-cloudflare/src/server/sendErrorToSentry.ts

Lines 10 to 18 in e34b951

	// similarly to the `load` function, we don't want to capture 4xx errors or redirects
	if (
	isRedirect(objectifiedErr) ||
	(isHttpError(objectifiedErr) &&
	objectifiedErr.status < 500 &&
	objectifiedErr.status >= 400)
	) {
	return objectifiedErr
	}

So in my analysis, I think it's not possible to have both automatic Sentry error handling (it's still possible to throw normal JavaScript Error, which will force status code 500) and custom status codes/response. Is this expected? Could you analyze the possibility of handling this condition in your library? I'm happy to help with the implementation.

Fix monorepo structure

Option to ignore errors for specific paths

How can I ignore an error for a specific paths in hooks.server.ts?

A bit of background information: I am currently getting a lot of errors in sentry where POST requests are made to xmlrpc.php (wordpress exploit). I use action named routes. Errors occur because I have no default action (No action with name 'default' found). Unfortunately, this is not possible if you use action named routes (https://kit.svelte.dev/docs/form-actions#named-actions).

Is it possible to make the onHandle in hooks.server.js a async function?

For other modules I need to add await statements in the hooks.server.js. How do I make the onHandle function async?

kit v2

exclude toucan-js from bundle

@sentry/* continues to be bundled until resolve module resolution problem

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Edited/Blocked

These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.

• fix(deps): update dependency toucan-js to v3.4.0
• chore(deps): update sentry-javascript monorepo to v8 (major) (@sentry/core, @sentry/svelte, @sentry/types, @sentry/utils)

Detected dependencies

github-actions

.github/workflows/ci.yml

• jill64/playwright-config v2.3.0@87d42c8a5b69f14d6af1cccf1ae38a9a778570dc

npm

demo/package.json

• @jill64/eslint-config-svelte 1.2.27
• @jill64/svelte-toast 1.3.38
• @sentry/vite-plugin 2.16.1
• @sveltejs/adapter-cloudflare 4.4.0
• @sveltejs/vite-plugin-svelte 3.1.0
• svelte 4.2.17
• vite 5.2.11

package.json

• @sentry/svelte 7.115.0
• toucan-js 3.3.1
• @jill64/eslint-config-ts 1.1.21
• @jill64/playwright-config 2.3.0
• @jill64/prettier-config 1.0.0
• @playwright/test 1.44.0
• @sentry/types 7.115.0
• @sentry/core 7.115.0
• @sentry/utils 7.115.0
• @sveltejs/kit 2.5.8
• @types/node 20.12.12
• esbuild 0.21.3
• typescript 5.4.5
• @sveltejs/kit 1.x || 2.x

---

• Check this box to trigger a request for Renovate to run again on this repository

unmet peer @sentry/sveltekit - @sveltejs/[email protected]

omit: eslint.tsconfig.json & rsac.yml

Use conditional exports instead $app.*

Error sent to Sentry despite enableInDevMode: false in dev environment.

Memo: This problem is most likely due to esm-env dependencies within the target project, as it is rarely seen at the preview site within monorepo.