IntegrationFramework Guides
Framework Guides
Next.js
Create or update sentry.client.config.ts:
// sentry.client.config.ts
import * as Sentry from "@sentry/nextjs";
let cachedPatterns: Array<{ pattern: string; type: string }> | null = null;
let cacheExpiry = 0;
async function getPatterns() {
if (cachedPatterns && Date.now() < cacheExpiry) {
return cachedPatterns;
}
const response = await fetch("https://api.noisegate.dev/v1/filters", {
headers: { "Authorization": `Bearer ${process.env.NEXT_PUBLIC_NOISEGATE_API_KEY}` }
});
const data = await response.json();
cachedPatterns = data.patterns;
cacheExpiry = Date.now() + 5 * 60 * 1000;
return cachedPatterns;
}
Sentry.init({
dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
beforeSend: async (event) => {
try {
const patterns = await getPatterns();
const message = event.exception?.values?.[0]?.value || "";
const shouldFilter = patterns.some(p =>
p.type === "regex"
? new RegExp(p.pattern).test(message)
: message.includes(p.pattern)
);
return shouldFilter ? null : event;
} catch {
return event;
}
},
});Add to .env.local:
NEXT_PUBLIC_NOISEGATE_API_KEY=ng_live_xxxxxxxxxxxxReact
// src/sentry.ts
import * as Sentry from "@sentry/react";
let cachedPatterns: Array<{ pattern: string; type: string }> | null = null;
let cacheExpiry = 0;
async function getPatterns() {
if (cachedPatterns && Date.now() < cacheExpiry) {
return cachedPatterns;
}
const response = await fetch("https://api.noisegate.dev/v1/filters", {
headers: { "Authorization": `Bearer ${import.meta.env.VITE_NOISEGATE_API_KEY}` }
});
const data = await response.json();
cachedPatterns = data.patterns;
cacheExpiry = Date.now() + 5 * 60 * 1000;
return cachedPatterns;
}
export function initSentry() {
Sentry.init({
dsn: import.meta.env.VITE_SENTRY_DSN,
integrations: [Sentry.browserTracingIntegration()],
beforeSend: async (event) => {
try {
const patterns = await getPatterns();
const message = event.exception?.values?.[0]?.value || "";
const shouldFilter = patterns.some(p =>
p.type === "regex"
? new RegExp(p.pattern).test(message)
: message.includes(p.pattern)
);
return shouldFilter ? null : event;
} catch {
return event;
}
},
});
}Call in your entry point:
// src/main.tsx
import { initSentry } from "./sentry";
initSentry();Vue
// src/plugins/sentry.ts
import * as Sentry from "@sentry/vue";
import type { App } from "vue";
let cachedPatterns: Array<{ pattern: string; type: string }> | null = null;
let cacheExpiry = 0;
async function getPatterns() {
if (cachedPatterns && Date.now() < cacheExpiry) {
return cachedPatterns;
}
const response = await fetch("https://api.noisegate.dev/v1/filters", {
headers: { "Authorization": `Bearer ${import.meta.env.VITE_NOISEGATE_API_KEY}` }
});
const data = await response.json();
cachedPatterns = data.patterns;
cacheExpiry = Date.now() + 5 * 60 * 1000;
return cachedPatterns;
}
export function initSentry(app: App) {
Sentry.init({
app,
dsn: import.meta.env.VITE_SENTRY_DSN,
beforeSend: async (event) => {
try {
const patterns = await getPatterns();
const message = event.exception?.values?.[0]?.value || "";
const shouldFilter = patterns.some(p =>
p.type === "regex"
? new RegExp(p.pattern).test(message)
: message.includes(p.pattern)
);
return shouldFilter ? null : event;
} catch {
return event;
}
},
});
}Initialize in your app:
// src/main.ts
import { createApp } from "vue";
import App from "./App.vue";
import { initSentry } from "./plugins/sentry";
const app = createApp(App);
initSentry(app);
app.mount("#app");Node.js
// src/sentry.ts
import * as Sentry from "@sentry/node";
let cachedPatterns: Array<{ pattern: string; type: string }> | null = null;
let cacheExpiry = 0;
async function getPatterns() {
if (cachedPatterns && Date.now() < cacheExpiry) {
return cachedPatterns;
}
const response = await fetch("https://api.noisegate.dev/v1/filters", {
headers: { "Authorization": `Bearer ${process.env.NOISEGATE_API_KEY}` }
});
const data = await response.json();
cachedPatterns = data.patterns;
cacheExpiry = Date.now() + 5 * 60 * 1000;
return cachedPatterns;
}
Sentry.init({
dsn: process.env.SENTRY_DSN,
beforeSend: async (event) => {
try {
const patterns = await getPatterns();
const message = event.exception?.values?.[0]?.value || "";
const shouldFilter = patterns.some(p =>
p.type === "regex"
? new RegExp(p.pattern).test(message)
: message.includes(p.pattern)
);
return shouldFilter ? null : event;
} catch {
return event;
}
},
});Environment Variables
| Framework | Variable |
|---|---|
| Next.js | NEXT_PUBLIC_NOISEGATE_API_KEY |
| React (Vite) | VITE_NOISEGATE_API_KEY |
| Vue (Vite) | VITE_NOISEGATE_API_KEY |
| Node.js | NOISEGATE_API_KEY |
Next Steps
- Advanced Usage — Caching strategies, hooks, fallbacks