diff --git a/docs/platforms/javascript/common/best-practices/index.mdx b/docs/platforms/javascript/common/best-practices/index.mdx index 71f60ed3a60a6..090e10acac980 100644 --- a/docs/platforms/javascript/common/best-practices/index.mdx +++ b/docs/platforms/javascript/common/best-practices/index.mdx @@ -11,6 +11,7 @@ notSupported: - javascript.fastify - javascript.gcp-functions - javascript.hapi + - javascript.hono - javascript.koa - javascript.nestjs --- diff --git a/docs/platforms/javascript/common/best-practices/micro-frontends.mdx b/docs/platforms/javascript/common/best-practices/micro-frontends.mdx index 38634e77d6ec3..0474dfa3f2b77 100644 --- a/docs/platforms/javascript/common/best-practices/micro-frontends.mdx +++ b/docs/platforms/javascript/common/best-practices/micro-frontends.mdx @@ -11,6 +11,7 @@ notSupported: - javascript.fastify - javascript.gcp-functions - javascript.hapi + - javascript.hono - javascript.koa - javascript.nestjs keywords: @@ -131,6 +132,7 @@ init({ }, }); ``` + ```html {tabTitle:CDN/Loader Bundle}{filename:index.html} - ``` @@ -186,15 +186,16 @@ It’s possible to set the `id` configuration value to something other than the ```html ``` @@ -227,6 +228,7 @@ feedback.attachTo(document.querySelector("#your-button"), { formTitle: "Report a Bug!", }); ``` + ```typescript {tabTitle: NextJs} function AttachToFeedbackButton() { const [feedback, setFeedback] = useState(); @@ -264,6 +266,7 @@ const form = await feedback.createForm(); form.appendToDom(); form.open(); ``` + ```typescript {tabTitle: NextJS} function CreateFeedbackFromButton() { const [feedback, setFeedback] = useState(); @@ -308,7 +311,7 @@ Sentry.captureFeedback( }, { includeReplay: true, // optional - attachments: [] // optional + attachments: [], // optional } ); ``` @@ -356,6 +359,7 @@ document }); }); ``` + ### Loading Strategies @@ -363,7 +367,9 @@ document Because the `feedbackIntegration` is a user-facing integration, we offer two loading strategies that have bundle size implications. -For most users, we recommend using `feedbackIntegration` in your `Sentry.init` call. This will set up user feedback with good defaults, matching the environment. + For most users, we recommend using `feedbackIntegration` in your `Sentry.init` + call. This will set up user feedback with good defaults, matching the + environment. All of the code examples on this page use `feedbackIntegration` as a default because it's available regardless of whether you've chosen the CDN or NPM installation method. However, the implementation of `feedbackIntegration` is different for the two installation methods. For NPM users, `feedbackIntegration` is an alias of `feedbackSyncIntegration`. For CDN users, `feedbackIntegration` is an alias of `feedbackAsyncIntegration`. @@ -385,32 +391,32 @@ This integration includes the minimum amount of code needed upfront to show the For CDN users `feedbackIntegration` is an alias of `feedbackAsyncIntegration`. ```javascript {tabTitle: Default Strategy} -import * as Sentry from '@sentry/browser'; +import * as Sentry from "@sentry/browser"; Sentry.init({ - dsn: '___PUBLIC_DSN___', + dsn: "___PUBLIC_DSN___", integrations: [ // Use the default strategy, an alias for `feedbackAsyncIntegration` Sentry.feedbackIntegration({ // Additional SDK configuration goes in here, for example: - colorScheme: 'system', + colorScheme: "system", }), - ] + ], }); ``` ```javascript {tabTitle: Async Strategy} -import * as Sentry from '@sentry/browser'; +import * as Sentry from "@sentry/browser"; Sentry.init({ - dsn: '___PUBLIC_DSN___', + dsn: "___PUBLIC_DSN___", integrations: [ // Use the async strategy so everything is bundled for page load Sentry.feedbackAsyncIntegration({ // Additional SDK configuration goes in here, for example: - colorScheme: 'system', + colorScheme: "system", }), - ] + ], }); ``` @@ -419,47 +425,47 @@ Sentry.init({ For NPM users `feedbackIntegration` is an alias of `feedbackSyncIntegration`. ```javascript {tabTitle: Default Strategy} -import * as Sentry from '@sentry/browser'; +import * as Sentry from "@sentry/browser"; Sentry.init({ - dsn: '___PUBLIC_DSN___', + dsn: "___PUBLIC_DSN___", integrations: [ // Use the default strategy, an alias for `feedbackSyncIntegration` Sentry.feedbackIntegration({ // Additional SDK configuration goes in here, for example: - colorScheme: 'system', + colorScheme: "system", }), - ] + ], }); ``` ```javascript {tabTitle: Sync Strategy} -import * as Sentry from '@sentry/browser'; +import * as Sentry from "@sentry/browser"; Sentry.init({ - dsn: '___PUBLIC_DSN___', + dsn: "___PUBLIC_DSN___", integrations: [ // Use the sync strategy so everything is bundled for page load Sentry.feedbackSyncIntegration({ // Additional SDK configuration goes in here, for example: - colorScheme: 'system', + colorScheme: "system", }), - ] + ], }); ``` ```javascript {tabTitle: Async Strategy} -import * as Sentry from '@sentry/browser'; +import * as Sentry from "@sentry/browser"; Sentry.init({ - dsn: '___PUBLIC_DSN___', + dsn: "___PUBLIC_DSN___", integrations: [ // Use the async strategy to keep bundle size lower Sentry.feedbackAsyncIntegration({ // Additional SDK configuration goes in here, for example: - colorScheme: 'system', + colorScheme: "system", }), - ] + ], }); ``` diff --git a/docs/platforms/javascript/common/user-feedback/index.mdx b/docs/platforms/javascript/common/user-feedback/index.mdx index 1feb8875db05c..a5d9e0ab8dc38 100644 --- a/docs/platforms/javascript/common/user-feedback/index.mdx +++ b/docs/platforms/javascript/common/user-feedback/index.mdx @@ -8,7 +8,7 @@ The User Feedback feature allows you to collect user feedback from anywhere insi Note that if you're using a self-hosted Sentry instance, you'll need to be on version 24.4.2 or higher in order to use the full functionality of the User Feedback feature. Lower versions may have limited functionality. - + ## User Feedback Widget @@ -28,7 +28,6 @@ The embeddable JavaScript widget allows users to submit feedback from anywhere i To set up the integration, add the following to your Sentry initialization. There are many options you can pass to the integration constructor. See the [configuration documentation](/platforms/javascript/user-feedback/configuration/) for more details. - By default, this will insert the widget into the bottom right corner of your website. You're free to customize nearly every aspect of the widget, including replacing it completely with your own UI. @@ -52,10 +51,10 @@ The User Feedback widget integrates easily with {' '}and `Sentry.lastEventId()`. - ## Crash-Report Modal diff --git a/docs/platforms/javascript/guides/hono/config.yml b/docs/platforms/javascript/guides/hono/config.yml new file mode 100644 index 0000000000000..e63d04b13d591 --- /dev/null +++ b/docs/platforms/javascript/guides/hono/config.yml @@ -0,0 +1,7 @@ +title: Hono +description: Learn how to set up Hono with Sentry. +sdk: sentry.javascript.hono +categories: + - javascript + - server + - server-node diff --git a/docs/platforms/javascript/guides/hono/index.mdx b/docs/platforms/javascript/guides/hono/index.mdx new file mode 100644 index 0000000000000..6f33fb75d3331 --- /dev/null +++ b/docs/platforms/javascript/guides/hono/index.mdx @@ -0,0 +1,143 @@ +--- +title: Hono +description: "Learn about using Sentry with Hono." +categories: + - server +--- + + + +This guide explains how to set up Sentry in your Hono application. + +If you don't already have an account and a Sentry project established, sign up for [Sentry](https://sentry.io/signup/) for free, then return to this page. + +## Features + +In addition to capturing errors, you can monitor interactions between multiple services or applications by [enabling tracing](/concepts/key-terms/tracing/). You can also collect and analyze performance profiles from real users with [profiling](/product/explore/profiling/). Note that profiling currently only works in the Node.js runtime. + +Select which Sentry features you'd like to install in addition to Error Monitoring to get the corresponding installation and configuration instructions below. + + + +## Setup + +Since Hono is a framework designed to run in all kinds of JavaScript runtimes, different setups for different platforms are outlined below. + +### Setup On Cloudflare Workers + +```bash {tabTitle:npm} +npm install @sentry/cloudflare --save +``` + +```bash {tabTitle:yarn} +yarn add @sentry/cloudflare +``` + +```bash {tabTitle:pnpm} +pnpm add @sentry/cloudflare +``` + +To use the SDK, you'll need to set either the `nodejs_compat` or `nodejs_als` compatibility flags in your `wrangler.toml`/`wrangler.json`. +This is because the SDK needs access to the `AsyncLocalStorage` API to work correctly. + +```toml {tabTitle:Toml} {filename:wrangler.toml} +compatibility_flags = ["nodejs_compat"] +# compatibility_flags = ["nodejs_als"] +``` + +```json {tabTitle:JSON} {filename:wrangler.json} +{ + "compatibility_flags": [ + "nodejs_compat" + // "nodejs_als" + ] +} +``` + +Next, wrap your handler with the `withSentry` function. This will initialize the SDK and hook into the +environment. Note that you can turn off almost all side effects using the respective options. + +```typescript {filename:index.ts} {"onboardingOptions": {"performance": "14-18"}} +import { Hono } from "hono"; +import * as Sentry from "@sentry/cloudflare"; + +const app = new Hono(); + +// Your routes... +app.get("/", () => { + // ... +}); + +export default Sentry.withSentry( + (env) => ({ + dsn: "___PUBLIC_DSN___", + + // Set tracesSampleRate to 1.0 to capture 100% of spans for tracing. + // Learn more at + // https://docs.sentry.io/platforms/javascript/configuration/options/#traces-sample-rate + tracesSampleRate: 1.0, + }), + app +); +``` + +### Setup On Cloudflare Pages + +```bash {tabTitle:npm} +npm install @sentry/cloudflare --save +``` + +```bash {tabTitle:yarn} +yarn add @sentry/cloudflare +``` + +```bash {tabTitle:pnpm} +pnpm add @sentry/cloudflare +``` + +To use the SDK, you'll need to set either the `nodejs_compat` or `nodejs_als` compatibility flags in your `wrangler.toml`/`wrangler.json`. +This is because the SDK needs access to the `AsyncLocalStorage` API to work correctly. + +```toml {tabTitle:Toml} {filename:wrangler.toml} +compatibility_flags = ["nodejs_compat"] +# compatibility_flags = ["nodejs_als"] +``` + +```json {tabTitle:JSON} {filename:wrangler.json} +{ + "compatibility_flags": [ + "nodejs_compat" + // "nodejs_als" + ] +} +``` + +Next, add the `sentryPagesPlugin` as +[middleware to your Cloudflare Pages application](https://developers.cloudflare.com/pages/functions/middleware/). + +We recommend adding a `functions/_middleware.js` for the middleware setup so that Sentry is initialized for your entire +app. + +```javascript {filename:functions/_middleware.js} {"onboardingOptions": {"performance": "7-11"}} +import * as Sentry from "@sentry/cloudflare"; + +export const onRequest = [ + // Make sure Sentry is the first middleware + Sentry.sentryPagesPlugin((context) => ({ + dsn: "___PUBLIC_DSN___", + + // Set tracesSampleRate to 1.0 to capture 100% of spans for tracing. + // Learn more at + // https://docs.sentry.io/platforms/javascript/configuration/options/#traces-sample-rate + tracesSampleRate: 1.0, + })), + // Add more middlewares here +]; +``` + +### Setup On Other Runtimes + +We currently limit support for Hono to Cloudflare. +If you need support for other runtimes [reach out on GitHub with a feature request](https://github.com/getsentry/sentry-javascript/issues/new/choose). diff --git a/docs/product/performance/getting-started.mdx b/docs/product/performance/getting-started.mdx index 9e7367d60d4b5..c1061339a3918 100644 --- a/docs/product/performance/getting-started.mdx +++ b/docs/product/performance/getting-started.mdx @@ -54,6 +54,7 @@ If you don't already have performance monitoring enabled, use the links for supp - [Gatsby](/platforms/javascript/guides/gatsby/tracing/) - [Google Cloud Functions](/platforms/javascript/guides/gcp-functions/tracing/) - [Hapi](/platforms/javascript/guides/hapi/tracing/) + - [Hono](/platforms/javascript/guides/hono/tracing/) - [Koa](/platforms/javascript/guides/koa/tracing/) - [Nest.js](/platforms/javascript/guides/nestjs/tracing/) - [Next.js](/platforms/javascript/guides/nextjs/tracing/) @@ -66,10 +67,7 @@ If you don't already have performance monitoring enabled, use the links for supp - [SvelteKit](/platforms/javascript/guides/sveltekit/tracing/) - [Vue](/platforms/javascript/guides/vue/tracing/) -- +- - -- +- - diff --git a/platform-includes/getting-started-use/javascript.hono.mdx b/platform-includes/getting-started-use/javascript.hono.mdx new file mode 100644 index 0000000000000..bfbdfbbe9deab --- /dev/null +++ b/platform-includes/getting-started-use/javascript.hono.mdx @@ -0,0 +1,48 @@ +```javascript {tabTitle:CommonJS} +// Require this first! +require("./instrument"); + +// Now require other modules +const Sentry = require("@sentry/node"); +const Hapi = require('@hapi/hapi'); + +const init = async () => { + const server = Hapi.server({ + port: 3030, + host: 'localhost', + }); + + // All your routes etc. + + await Sentry.setupHapiErrorHandler(server); + + await server.start(); + console.log('Server running on %s', server.info.uri); +}; + +init(); +``` + +```javascript {tabTitle:ESM} +// Import this first! +import "./instrument"; + +// Now import other modules +import * as Sentry from "@sentry/node"; +import Hapi from "@hapi/hapi"; + +const init = async () => { + const server = Hapi.server({ + port: 3030, + host: 'localhost', + }); + + // All your routes etc. + + await Sentry.setupHapiErrorHandler(server); + + await server.start(); +}; + +init(); +``` diff --git a/platform-includes/migration/javascript-v8/other-changes/javascript.hono.mdx b/platform-includes/migration/javascript-v8/other-changes/javascript.hono.mdx new file mode 100644 index 0000000000000..0c1c7a47c83fe --- /dev/null +++ b/platform-includes/migration/javascript-v8/other-changes/javascript.hono.mdx @@ -0,0 +1,9 @@ +### Customizing OpenTelemetry + +If you want to customize the OpenTelemetry setup with your Node SDK in `8.x`, see the docs about using [OpenTelemetry with `8.x`](./v8-opentelemetry) + + + + + + diff --git a/platform-includes/sourcemaps/legacy-troubleshooting/javascript.mdx b/platform-includes/sourcemaps/legacy-troubleshooting/javascript.mdx index 035e82649ce70..85c90ca47a9e1 100644 --- a/platform-includes/sourcemaps/legacy-troubleshooting/javascript.mdx +++ b/platform-includes/sourcemaps/legacy-troubleshooting/javascript.mdx @@ -56,7 +56,7 @@ To verify that the distribution has been set correctly in the SDK, open an issue If you've uploaded source maps and they aren't applying to your code in an issue in Sentry, take a look at the JSON of the event and look for the `abs_path` to see exactly where we're attempting to resolve the file - for example, `http://localhost:8000/scripts/script.js` (`abs_path` will appear once for each frame in the stack trace - match this up with the file(s) that are not deminified.). A link to the JSON view can be found at the top of the issue page next to the date the event occurred. The uploaded artifact names must match these values. -If you have **dynamic values in your path** (for example, `https://www.site.com/{some_value}/scripts/script.js`), you may want to use the `rewriteFrames` integration`rewriteFrames` integration to change your `abs_path` values. +If you have **dynamic values in your path** (for example, `https://www.site.com/{some_value}/scripts/script.js`), you may want to use the `rewriteFrames` integration`rewriteFrames` integration to change your `abs_path` values. ### Using sentry-cli diff --git a/platform-includes/sourcemaps/legacy-uploading-methods/javascript.mdx b/platform-includes/sourcemaps/legacy-uploading-methods/javascript.mdx index 7a0907b873da7..581ef2a3e9ca7 100644 --- a/platform-includes/sourcemaps/legacy-uploading-methods/javascript.mdx +++ b/platform-includes/sourcemaps/legacy-uploading-methods/javascript.mdx @@ -124,6 +124,7 @@ Sentry.init({ ## Uploading using Sentry Bundler Plugins on Version `2.x` If you're using + - Sentry self-hosted or single-tenant on version `23.6.1` or lower - or the Sentry JavaScript SDK on version `7.46.0` - or esbuild with `splitting: true` @@ -330,7 +331,7 @@ To verify that the distribution has been set correctly in the SDK, open an issue If you've uploaded source maps and they aren't applying to your code in an issue in Sentry, take a look at the JSON of the event and look for the `abs_path` to see exactly where we're attempting to resolve the file - for example, `http://localhost:8000/scripts/script.js` (`abs_path` will appear once for each frame in the stack trace - match this up with the file(s) that are not deminified.). A link to the JSON view can be found at the top of the issue page next to the date the event occurred. The uploaded artifact names must match these values. -If you have **dynamic values in your path** (for example, `https://www.site.com/{some_value}/scripts/script.js`), you may want to use the `rewriteFrames` integration`rewriteFrames` integration to change your `abs_path` values. +If you have **dynamic values in your path** (for example, `https://www.site.com/{some_value}/scripts/script.js`), you may want to use the `rewriteFrames` integration`rewriteFrames` integration to change your `abs_path` values. #### Using sentry-cli diff --git a/platform-includes/sourcemaps/overview/javascript.mdx b/platform-includes/sourcemaps/overview/javascript.mdx index 22605cf761987..0e565c2527afb 100644 --- a/platform-includes/sourcemaps/overview/javascript.mdx +++ b/platform-includes/sourcemaps/overview/javascript.mdx @@ -29,7 +29,10 @@ If you used Create React App to set up your React application see our TypeScript (tsc) +- + {" "} + TypeScript (tsc){" "} + If you're using one of webpack, Vite, Rollup or Esbuild, use the corresponding Sentry plugin instead (see section "Sentry Bundler Support"). @@ -42,7 +45,7 @@ If you used Create React App to set up your React application see our Sentry CLI. - + diff --git a/platform-includes/sourcemaps/troubleshooting/javascript.mdx b/platform-includes/sourcemaps/troubleshooting/javascript.mdx index 337c86bdd96bc..0778afc2795a2 100644 --- a/platform-includes/sourcemaps/troubleshooting/javascript.mdx +++ b/platform-includes/sourcemaps/troubleshooting/javascript.mdx @@ -160,6 +160,7 @@ Sometimes build scripts and plugins produce pre-compressed minified files (for e 'javascript.fastify', 'javascript.gcp-functions', 'javascript.hapi', + 'javascript.hono', 'javascript.koa', 'javascript.nestjs', ]}> diff --git a/platform-includes/sourcemaps/upload/primer/javascript.mdx b/platform-includes/sourcemaps/upload/primer/javascript.mdx index f19448a94e44b..f181c01f57bc5 100644 --- a/platform-includes/sourcemaps/upload/primer/javascript.mdx +++ b/platform-includes/sourcemaps/upload/primer/javascript.mdx @@ -1,7 +1,7 @@ We provide guides on uploading source maps to Sentry for the most popular JavaScript build tools. Pick one from the list below to learn more. - + @@ -11,7 +11,7 @@ If you can't find the tool of your choice in the list below, we recommend you ch - + diff --git a/src/components/platformIcon.tsx b/src/components/platformIcon.tsx index 6c42e480b9cd0..9f32e8ef352f4 100644 --- a/src/components/platformIcon.tsx +++ b/src/components/platformIcon.tsx @@ -66,6 +66,7 @@ import GrapheneSVG from 'platformicons/svg/graphene.svg'; import GraphqlSVG from 'platformicons/svg/graphql.svg'; import GrpcSVG from 'platformicons/svg/grpc.svg'; import HapiSVG from 'platformicons/svg/hapi.svg'; +import HonoSVG from 'platformicons/svg/hono.svg'; import Html5SVG from 'platformicons/svg/HTML5.svg'; import HttpxSVG from 'platformicons/svg/httpx.svg'; import HueySVG from 'platformicons/svg/huey.svg'; @@ -203,6 +204,7 @@ import GrapheneSVGLarge from 'platformicons/svg_80x80/graphene.svg'; import GraphqlSVGLarge from 'platformicons/svg_80x80/graphql.svg'; import GrpcSVGLarge from 'platformicons/svg_80x80/grpc.svg'; import HapiSVGLarge from 'platformicons/svg_80x80/hapi.svg'; +import HonoSVGLarge from 'platformicons/svg_80x80/hono.svg'; import Html5SVGLarge from 'platformicons/svg_80x80/HTML5.svg'; import HttpxSVGLarge from 'platformicons/svg_80x80/httpx.svg'; import HueySVGLarge from 'platformicons/svg_80x80/huey.svg'; @@ -584,6 +586,10 @@ const formatToSVG = { sm: HapiSVG, lg: HapiSVGLarge, }, + hono: { + sm: HonoSVG, + lg: HonoSVGLarge, + }, kotlin: { sm: KotlinSVG, lg: KotlinSVGLarge, @@ -911,6 +917,7 @@ export const PLATFORM_TO_ICON = { 'javascript-gcp-functions': 'gcp-functions', 'javascript-ionic': 'ionic', 'javascript-hapi': 'hapi', + 'javascript-hono': 'hono', 'javascript-koa': 'koa', 'javascript-fastify': 'fastify', 'javascript-nestjs': 'nestjs', diff --git a/src/data/platforms.yml b/src/data/platforms.yml index dba963bf9a8ce..dcc8b2b1fadf9 100644 --- a/src/data/platforms.yml +++ b/src/data/platforms.yml @@ -4,6 +4,9 @@ - slug: hapi type: framework name: Hapi +- slug: hono + type: framework + name: Hono - slug: fastify type: framework name: Fastify