{"id":26151912,"url":"https://github.com/chrisweb/sentry_component-annotation_react-three-fiber","last_synced_at":"2026-04-20T17:31:47.210Z","repository":{"id":281222053,"uuid":"944568587","full_name":"chrisweb/sentry_component-annotation_react-three-fiber","owner":"chrisweb","description":null,"archived":false,"fork":false,"pushed_at":"2025-03-07T16:44:31.000Z","size":1,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-07T17:33:35.428Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chrisweb.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-03-07T15:22:40.000Z","updated_at":"2025-03-07T16:44:36.000Z","dependencies_parsed_at":"2025-03-07T17:44:03.994Z","dependency_job_id":null,"html_url":"https://github.com/chrisweb/sentry_component-annotation_react-three-fiber","commit_stats":null,"previous_names":["chrisweb/sentry_component-annotation_react-three-fiber"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisweb%2Fsentry_component-annotation_react-three-fiber","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisweb%2Fsentry_component-annotation_react-three-fiber/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisweb%2Fsentry_component-annotation_react-three-fiber/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisweb%2Fsentry_component-annotation_react-three-fiber/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chrisweb","download_url":"https://codeload.github.com/chrisweb/sentry_component-annotation_react-three-fiber/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242988069,"owners_count":20217538,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-03-11T06:54:08.430Z","updated_at":"2026-04-20T17:31:42.191Z","avatar_url":"https://github.com/chrisweb.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Sentry component annotation\n\nSentry has a new \"component annotation\" feature, in Next.js you enable it in the [next.config](next.config.ts) file by adding the following lines to the sentry configuration:\n\n```js\n  // Automatically annotate React components to show their full name in breadcrumbs and session replay\n  reactComponentAnnotation: {\n    enabled: true,\n  },\n```\n\nThe packages used:\n\n* next **15.2.1**\n* @sentry/nextjs **9.5.0**\n* @sentry/bundler-plugin-core **3.2.1**\n* @sentry/babel-plugin-component-annotate **3.2.1**\n* @react-three/fiber **9.0.4**\n\nNow [build and then start](#development) the project and you will see the following error in the browser console:\n\n```shell\nUncaught TypeError: Cannot read properties of undefined (reading 'sentry')\n```\n\n## The problem\n\nPreviously the only way to not get the error was to disable the **reactComponentAnnotation** feature\n\nNow we got a new configuration option to ignore react-three-fiber like this:\n\n```js\n  // Automatically annotate React components to show their full name in breadcrumbs and session replay\n  reactComponentAnnotation: {\n    enabled: true,\n    ignoredComponents: ['@react-three/fiber'],\n  },\n```\n\nThe first example showed that the package / module name seems to be wrong, so maybe exclude our custom React component which is called Demo, but this is also didn't work, so I tried even more options:\n\n```js\n  // Automatically annotate React components to show their full name in breadcrumbs and session replay\n  reactComponentAnnotation: {\n    enabled: true,\n    ignoredComponents: ['@react-three/fiber', 'Demo', 'Canvas', 'ambientLight', 'spotLight', 'pointLight', 'Box'],\n  },\n```\n\nThe problem is: **the above ignoredComponents doesn't work (the same error is still in the console)**\n\nSo the question is: **what does Sentry mean by \"component\"?**\n\n## development\n\nclone this project in your IDE\n\nthen install the dependencies:\n\n```\nnpm i\n```\n\ncreate a new build:\n\n```shell\nnpm run build\n```\n\nthen start the server:\n\n```shell\nnpm run start\n```\n\nfinally visit: `http://127.0.0.1:3000`\n\n## stack history\n\ninstallation commands used to create this project\n\ninstall next.js (15.2.1) using create-next-app:\n\n```shell\nnpx create-next-app@latest .\n```\n\nquestions answered like this:\n\n```shell\n√ Would you like to use TypeScript? ... Yes\n√ Would you like to use ESLint? ... Yes\n√ Would you like to use Tailwind CSS? ... No\n√ Would you like your code inside a `src/` directory? ... No\n√ Would you like to use App Router? (recommended) ... Yes\n√ Would you like to use Turbopack for `next dev`? ... No\n√ Would you like to customize the import alias (`@/*` by default)? ... Yes\n√ What import alias would you like configured? ... @/*\n```\n\ninstall [@sentry/nextjs](https://www.npmjs.com/package/@sentry/nextjs) (9.5.0) using the [@sentry/wizard](https://www.npmjs.com/package/@sentry/wizard):\n\n```shell\nnpx @sentry/wizard\n```\n\nquestions answered like this:\n\n```shell\n┌   Sentry Next.js Wizard \n◇  Are you using Sentry SaaS or self-hosted Sentry? │ Sentry SaaS (sentry.io)\n◇  Do you already have a Sentry account? │ Yes\n◇  Installed @sentry/nextjs with NPM.\n◇  Do you want to route Sentry requests in the browser through your Next.js server to avoid ad blockers? │ Yes\n◇  Do you want to enable React component annotations to make breadcrumbs and session replays more readable? │ Yes\n◇  Do you want to enable Tracing to track the performance of your application? │ No\n◇  Do you want to enable Sentry Session Replay to get a video-like reproduction of errors during a user session? │ No\n◆  Created fresh sentry.server.config.ts.\n◆  Created fresh sentry.client.config.ts.\n◆  Created fresh sentry.edge.config.ts.\n◆  Added new instrumentation.ts file.\n◆  Added Sentry configuration to next.config.ts. (you probably want to clean this up a bit!)\n◆  Created app\\global-error.tsx.\n◇  Do you want to create an example page (\"/sentry-example-page\") to test your Sentry setup? │ Yes\n◆  Created app\\sentry-example-page\\page.tsx.\n◆  Created app\\api\\sentry-example-api\\route.ts.\n◆  Created .env.sentry-build-plugin with auth token for you to test source map uploading locally.\n◆  Added .env.sentry-build-plugin to .gitignore.\n◇  Are you using a CI/CD tool to build and deploy your application? │ No\n└  \n```\n\ninstall @react-three/fiber:\n\n```shell\nnpm i @react-three/fiber --save-exact\n```\n\nreact-three-fiber types:\n\n```shell\nnpm i @types/three --save-exact --save-dev\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchrisweb%2Fsentry_component-annotation_react-three-fiber","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchrisweb%2Fsentry_component-annotation_react-three-fiber","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchrisweb%2Fsentry_component-annotation_react-three-fiber/lists"}