How to use @bugsnag/js - 10 common examples

To help you get started, we’ve selected a few @bugsnag/js examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github bugsnag / bugsnag-js / examples / react / src / index.js View on Github external
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'

import Bugsnag from '@bugsnag/js'
import bugsnagReact from '@bugsnag/plugin-react'

Bugsnag.init('YOUR_API_KEY')
Bugsnag.use(bugsnagReact, React)

const ErrorBoundary = Bugsnag.getPlugin('react')

const ErrorScreen = () =>
  <div>
    <h1><span role="img" aria-label="warning icon">⚠️</span> Error <span role="img" aria-label="warning icon">⚠️</span></h1>
    <p><strong>Uh oh, there was an error in the component tree!</strong></p>
    <p>This <code>FallbackComponent</code> prop can be used to show something useful to your users when such errors occur.</p>
  </div>

const onError = event => {
  // You can also provide an onError callback to run just on errors caught by
  // the error boundary. Maybe you want to attach some of the current state from
  // whatever model/store you're using (e.g redux)
  console.log('about to send this event', { event })
github bugsnag / bugsnag-js / examples / angular / src / app / app.module.ts View on Github external
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ErrorHandler } from '@angular/core';
// import our Angular plugin
import { BugsnagErrorHandler } from '@bugsnag/plugin-angular';
// import the bugsnag-js client you initialized in bugsnag.ts
import Bugsnag from '@bugsnag/js';
import { AppComponent } from './app.component';

Bugsnag.init('YOUR_API_KEY')

// There are certain errors within Angular that get caught by its own error handler
// and only logged to the console. These errors will never make it to Bugsnag by
// themselves and so require a little wiring up.
export function errorHandlerFactory() {
  return new BugsnagErrorHandler()
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [ { provide: ErrorHandler, useFactory: errorHandlerFactory } ],
github bugsnag / bugsnag-js / examples / typescript / src / app.ts View on Github external
// include Bugsnag from the installed dependencies
import Bugsnag from '@bugsnag/js'

const apiKey: string = process.env.BUGSNAG_API_KEY ? process.env.BUGSNAG_API_KEY : ''

// initialise Bugsnag with some basic options
Bugsnag.init({
  // this loads the apiKey from the environment so be sure to pass it in
  apiKey: apiKey,
  // setting the appVersion is useful to track when errors are introduced/fixed
  appVersion: '1.2.3',
  // using a combination of releaseStage/notifyReleaseStages you can ensure you
  // only get reports from the environments you care about
  releaseStage: 'production',
  enabledReleaseStages: [ 'staging', 'production' ],
  // you can set global metadata when you initialise Bugsnag
  metadata: {}
})

console.log(`
  Welcome to the plain TypeScript example app. Type one of the
  following keys, followed by enter, to perform each action:
github bugsnag / bugsnag-js / examples / react / src / index.js View on Github external
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'

import Bugsnag from '@bugsnag/js'
import bugsnagReact from '@bugsnag/plugin-react'

Bugsnag.init('YOUR_API_KEY')
Bugsnag.use(bugsnagReact, React)

const ErrorBoundary = Bugsnag.getPlugin('react')

const ErrorScreen = () =>
  <div>
    <h1><span role="img" aria-label="warning icon">⚠️</span> Error <span role="img" aria-label="warning icon">⚠️</span></h1>
    <p><strong>Uh oh, there was an error in the component tree!</strong></p>
    <p>This <code>FallbackComponent</code> prop can be used to show something useful to your users when such errors occur.</p>
  </div>

const onError = event => {
  // You can also provide an onError callback to run just on errors caught by
  // the error boundary. Maybe you want to attach some of the current state from
  // whatever model/store you're using (e.g redux)
  console.log('about to send this event', { event })
}
github bugsnag / bugsnag-js / examples / react / src / index.js View on Github external
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'

import Bugsnag from '@bugsnag/js'
import bugsnagReact from '@bugsnag/plugin-react'

Bugsnag.init('YOUR_API_KEY')
Bugsnag.use(bugsnagReact, React)

const ErrorBoundary = Bugsnag.getPlugin('react')

const ErrorScreen = () =>
  <div>
    <h1><span role="img" aria-label="warning icon">⚠️</span> Error <span role="img" aria-label="warning icon">⚠️</span></h1>
    <p><strong>Uh oh, there was an error in the component tree!</strong></p>
    <p>This <code>FallbackComponent</code> prop can be used to show something useful to your users when such errors occur.</p>
  </div>

const onError = event => {
  // You can also provide an onError callback to run just on errors caught by
  // the error boundary. Maybe you want to attach some of the current state from
  // whatever model/store you're using (e.g redux)
  console.log('about to send this event', { event })
}

ReactDOM.render(
github bugsnag / bugsnag-js / examples / typescript / src / app.ts View on Github external
function onError () {
  console.log('calling notify() with an onError callback…')
  // onError can be used to modify a report or prevent it from being sent at all
  // this example pseudo-randomly filters out approximately half of the reports
  Bugsnag.notify(new Error('sometimes will send'), (event) => {
    const n = Math.random()
    if (n <= 0.5) return false
  })
}
github bugsnag / bugsnag-js / examples / typescript / src / app.ts View on Github external
function handledError () {
  console.log('notifying of a handled error…')
  // you can notify Bugsnag of errors you handled or created yourself
  Bugsnag.notify(new Error('scheduling clash'))
}
github bugsnag / bugsnag-js / examples / plain-node / app.js View on Github external
function onError () {
  console.log('calling notify() with a onError callback…')
  // onError can be used to modify a report or prevent it from being sent at all
  // this example pseudo-randomly filters out approximately half of the reports
  Bugsnag.notify(new Error('sometimes will send'), (event) => {
    const n = Math.random()
    if (n <= 0.5) return false
  })
}
github bugsnag / bugsnag-js / examples / plain-node / app.js View on Github external
function leaveBreadcrumb () {
  console.log('leaving a breadcrumb…')
  // you can record all kinds of events which will be sent along with error reports
  // these can help when trying to understand the conditions leading up to an error
  Bugsnag.leaveBreadcrumb('network blip')
}
github bugsnag / bugsnag-js / examples / typescript / src / app.ts View on Github external
function leaveBreadcrumb () {
  console.log('leaving a breadcrumb…')
  // you can record all kinds of events which will be sent along with error reports
  // these can help when trying to understand the conditions leading up to an error
  Bugsnag.leaveBreadcrumb('network blip')
}

@bugsnag/js

Universal Javascript error reporting. Automatically detect JavaScript errors in the browser and Node.js, with plugins for React, Vue, Angular, Express, Restify and Koa.

MIT
Latest version published 2 months ago

Package Health Score

89 / 100
Full package analysis