@prodwise/runtime-sdk
v0.1.0
Published
Embedded JS SDK that monitors the dataLayer and reports errors to Glitchtip
Readme
Prodwise Runtime SDK
Monitors window.dataLayer and reports errors to Glitchtip.
Usage
Add to the <head> of your page:
<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({ 'pw.init': { dsn: 'https://[email protected]/123' } });
</script>
<script async src="https://cdn.prodwise.com/websdk.js"></script>The SDK loads asynchronously, reads the pw.init entry from dataLayer, and begins monitoring. Any error events already in dataLayer before the script loads are replayed on init.
Configuration
| Key | Type | Default | Description |
|-----|------|---------|-------------|
| dsn | string | required | Glitchtip DSN |
| environment | string | production | Environment label |
| release | string | | Release or git SHA |
| dataLayerName | string | dataLayer | Name of the dataLayer global |
| maxErrors | number | 50 | Max errors reported per session |
| captureGlobalErrors | boolean | true | Capture window.onerror |
| captureUnhandledRejections | boolean | true | Capture unhandled promise rejections |
Deployment
The deploy workflow requires two GitHub Actions secrets:
| Secret | Description |
|--------|-------------|
| CLOUDFLARE_API_TOKEN | Uploads the CDN bundle to Cloudflare R2. The token requires Account - Cloudflare R2 Storage - Edit permission. |
| CLOUDFLARE_ACCOUNT_ID | Identifies which Cloudflare account to upload to. Find it on the Cloudflare dashboard homepage in the right-hand sidebar under Account ID. |
| NPM_TOKEN | Publishes the package to npm |
CDN subdomain
cdn.prodwise.com is a custom domain attached to the prodwise-runtime Cloudflare R2 bucket. Configure this once in the Cloudflare dashboard under R2 > prodwise-runtime > Settings > Custom Domains.
Once the domain is attached, any object uploaded to the bucket is immediately reachable at https://cdn.prodwise.com/<object-key>. To serve additional scripts, add further wrangler r2 object put steps to the deploy workflow and they will be available under the same subdomain without any further DNS changes.
Error events
The SDK captures dataLayer events named error, gtm.pageError, or exception. Any additional properties on the event are forwarded as extra context.
window.dataLayer.push({
event: 'error',
error: new Error('something broke'),
component: 'checkout',
});