redux-bug-reporter comes with several built-in integrations to popular bug trackers, and easily supports custom integrations. Most integrations export a createSubmit function, which is passed a config and returns a submitFn. Current integrations supported are:
- Default:
POSTto passed in submission URL - Console logging
- Sheetsu (Google sheets)
- Asana
- Github issues
- Jira
- Taiga
- Custom Integrations
The default integration is a simple POST to a provided URL. This integration is good for any server built to handle redux-bug-reporter POSTs. If you want to modify any properties of the fetch call, you can additionally pass fetchProps to define custom headers, change the cache settings, etc.
import createSubmit from 'redux-bug-reporter/lib/integrations/default'
let submitFn = createSubmit({ url: 'http://server-to-post-to.biz', fetchProps: { /* Override default fetch properties here */ } })
// Later, when rendering redux-bug-reporter
<ReduxBugReporter submit={submitFn} projectName='example' />
The console integration prints the bug to the console. This is probably only useful in testing, and is used on the demo page.
import submitFn from 'redux-bug-reporter/lib/integrations/console'
// Later, when rendering redux-bug-reporter
<ReduxBugReporter submit={submitFn} projectName='example' />
Sheetsu is a wonderful tool that turns a Google spreadsheet into an API. Create a copy of this google sheet, and integrate with Sheetsu to get a Sheetsu API url. The API must be configured to have CREATE (POST) permissions.
import createSubmit from 'redux-bug-reporter/lib/integrations/sheetsu'
let submitFn = createSubmit({ url: 'https://sheetsu.com/apis/v1.0/SHEETSU_API_URL' })
// Later, when rendering redux-bug-reporter
<ReduxBugReporter submit={submitFn} projectName='example' />
🚨Warning: This integration requires passing in an Asana access_token. Be careful with this token, and store it as an env variable and not in code. If redux-bug-reporter is only being used in a development environment, make sure your build process removes the access token as dead code before deploying to production. If you wish to use redux-bug-reporter in production, you will need to deploy a server that stores the Asana access_token as an environment variable, and posts to https://app.asana.com/api/1.0/tasks on your behalf. Fork the integration in src/integrations/asana.js and alter the POST to go to your custom server. If this is a pain point for you, please create an issue and I'll consider writing a server implementation🚨
Asana integration is simple but unfortunately Asana only currently supports plain text bugs, so the formatting in the Asana interface of a submitted bug, while functional, is a little ugly. For this integration, you will need an access_token and the id of the project you'd like to file bugs to.
import createSubmit from 'redux-bug-reporter/lib/integrations/asana'
let submitFn = createSubmit({ access_token: 'ASANA_ACCESS_TOKEN', projects: [PROJECT_ID] })
// Later, when rendering redux-bug-reporter
<ReduxBugReporter submit={submitFn} projectName='example' />
🚨Warning: This integration requires passing in a GitHub access_token. Be careful with this token, and store it as an env variable and not in code. If redux-bug-reporter is only being used in a development environment, make sure your build process removes the access token as dead code before deploying to production. If you wish to use redux-bug-reporter in production, you might prefer to deploy a server running github-issue-filer, which stores the access token in an env variable, and forking the GitHub integration to POST to github-issue-filer instead.🚨
The GitHub issue integration creates GitHub issues. The access_token passed in must have repo access to the repo where you would like issues to be filed.
import createSubmit from 'redux-bug-reporter/lib/integrations/github'
const submitFn = createSubmit({
github_owner: 'dtschust',
github_repo: 'redux-bug-reporter',
access_token: 'ACCESS_TOKEN_STORED_IN_ENV_VARIABLE'
})
// Later, when rendering redux-bug-reporter
<ReduxBugReporter submit={submitFn} projectName='example' />
Unfortunately, it is not possible to create bugs in Jira through a web browser due to the Jira API's poor CORS support. As such, you will need to deploy a server running jira-issue-filer, see the README for jira-issue-filer for documentation on setting it up.
import createSubmit from 'redux-bug-reporter/lib/integrations/jira'
const submitFn = createSubmit({
url: 'http://server-running-jira-issue-filer.biz'
})
// Later, when rendering redux-bug-reporter
<ReduxBugReporter submit={submitFn} projectName='example' />
🚨Warning: This integration requires passing in a Taiga token. Be careful with this token, and store it as an env variable and not in code. If redux-bug-reporter is only being used in a development environment, make sure your build process removes the access token as dead code before deploying to production. If you wish to use redux-bug-reporter in production, you will need to deploy a server that stores the Taiga token as an environment variable, and posts to https://api.taiga.io/api/v1/issues on your behalf. Fork the integration in src/integrations/taiga.js and alter the POST to go to your custom server. If this is a pain point for you, please create an issue and I'll consider writing a server implementation🚨
The Taiga integration creates issues. A token and project_id must be provided.
import createSubmit from 'redux-bug-reporter/lib/integrations/taiga'
const submitFn = createSubmit({
project_id: 1234,
token: 'TOKEN_STORED_IN_ENV_VARIABLE'
})
// Later, when rendering redux-bug-reporter
<ReduxBugReporter submit={submitFn} projectName='example' />If you would like to develop a custom integration, check out the existing integrations in src/integrations. They are pretty straight forward. If you think your integration might be useful to others, feel free to submit a PR to this repo, or you could publish the integration as a separate package i.e. redux-bug-reporter-foo-integration.