WIP

.gitignore

@@ -1,4 +1,6 @@
 /node_modules/
 /.rpt2_cache/
 package-lock.json
-/dist
+/dist
+# Sentry Config File
+.env.sentry-build-plugin

package.json

@@ -17,6 +17,8 @@
   "type": "module",
   "dependencies": {
     "@lit-labs/scoped-registry-mixin": "^1.0.0",
+    "@sentry/browser": "^7.73.0",
+    "@sentry/rollup-plugin": "^2.8.0",
     "custom-card-helpers": "^1.8.0",
     "home-assistant-js-websocket": "^8.0.0",
     "lit": "^3.0.0",

rollup.config.js

@@ -6,13 +6,15 @@ import { terser } from 'rollup-plugin-terser'
 import json from '@rollup/plugin-json'
 import image from '@rollup/plugin-image'
 import gzipPlugin from 'rollup-plugin-gzip'
+import { sentryRollupPlugin } from "@sentry/rollup-plugin"
 
 export default [
   {
     input: 'src/clock-weather-card.ts',
     output: {
       dir: 'dist',
       format: 'es',
+      sourcemap: true
     },
     plugins:  [
       image(),
@@ -25,7 +27,12 @@ export default [
         babelHelpers: 'bundled'
       }),
       terser(),
-      gzipPlugin()
+      gzipPlugin(),
+      sentryRollupPlugin({
+        authToken: process.env.SENTRY_AUTH_TOKEN,
+        org: process.env.SENTRY_ORG,
+        project: process.env.SENTRY_PROJECT,
+      })
     ]
   },
 ];

src/clock-weather-card.ts

@@ -9,7 +9,6 @@ import {
   handleAction,
   TimeFormat
 } from 'custom-card-helpers' // This is a community maintained npm module with common helper functions/types. https://github.com/custom-cards/custom-card-helpers
-
 import {
   type ClockWeatherCardConfig,
   type MergedClockWeatherCardConfig,
@@ -31,6 +30,7 @@ import { svg, png } from './images'
 import { version } from '../package.json'
 import { safeRender } from './helpers'
 import { DateTime } from 'luxon'
+import * as Sentry from '@sentry/browser'
 
 console.info(
 `%c  CLOCK-WEATHER-CARD \n%c Version: ${version}`,
@@ -55,6 +55,18 @@ const gradientMap: Map<number, Rgb> = new Map()
   .set(30, new Rgb(255, 150, 79)) // orange
   .set(40, new Rgb(255, 192, 159)) // red
 
+Sentry.init({
+  dsn: 'https://fe6c1f118f256a93acaa8cb90fcb26ee@o4505062260277248.ingest.sentry.io/4506031035645952',
+
+  // Alternatively, use `process.env.npm_package_version` for a dynamic release version
+  // if your build tool supports it.
+  release: `clock-weather-card@${version}`,
+  integrations: [new Sentry.BrowserTracing(), new Sentry.Replay(), new Sentry.BrowserProfilingIntegration()],
+  tracesSampleRate: 1.0,
+  replaysSessionSampleRate: 1.0,
+  replaysOnErrorSampleRate: 1.0
+})
+
 @customElement('clock-weather-card')
 export class ClockWeatherCard extends LitElement {
   // https://lit.dev/docs/components/properties/
@@ -152,10 +164,10 @@ export class ClockWeatherCard extends LitElement {
           hasDoubleClick: hasAction(this.config.double_tap_action)
         })}
         tabindex="0"
-        .label=${`Clock Weather Card: ${this.config.entity || 'No Entity Defined'}`}
+        .label=${`Clock Weather Card: ${this.config.entity}`}
       >
         ${this.config.title
-? html`
+          ? html`
           <div class="card-header">
             ${this.config.title}
           </div>`

src/helpers.ts

@@ -1,9 +1,11 @@
 import { html, type TemplateResult } from 'lit'
+import * as Sentry from '@sentry/browser'
 
 export function safeRender<T> (renderFn: () => T): T | TemplateResult {
   try {
     return renderFn()
   } catch (e) {
+    Sentry.captureException(e)
     console.error('clock-weather-card - Error while rendering clock-weather-card component:', e)
     return html``
   }